XAML Page With Grid And Button - xaml

I have a grid which will take up most of my Xamarin.Forms Page, and I want to add a button below the grid. My issue is that I am using the below syntax to add the button, however the button fills the entire page.
What do I need to change so that the button appears directly below the grid?
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="XF.Pages.AEI" >
<ContentView Content="{Binding ApprovedUserGrid,Mode=TwoWay}" Padding="0,30,0,0"/>
<Button Command="{Binding OkayCommand}" Text="Okay" TextColor="White"
FontAttributes="Bold" FontSize="Large" HorizontalOptions="FillAndExpand"
BackgroundColor="#088da5" />
</ContentPage>
This is C# for my grid (not where I actually bind, but the creation)
private Grid _Grid;
public Grid TestGrid
{
get { return _Grid ?? (_Grid=new Grid()); }
set
{
_Grid = value;
NotifyPropertyChanged();
}
}
EDIT
I edit code to read like this, and there are no errors, but I do not see my button on the page?
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="XF_Login.Pages.ApproveUsers" >
<StackLayout Orientation="Vertical" Padding="30" Spacing="40">
<ContentView Content="{Binding ApprovedUserGrid,Mode=TwoWay}" Padding="0,30,0,0"/>
<Button Command="{Binding OkayCommand}" Text="Okay" TextColor="White"
FontAttributes="Bold" FontSize="Large" HorizontalOptions="FillAndExpand"
BackgroundColor="#088da5" />
</StackLayout>
</ContentPage>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="XF_Login.Pages.ApproveUsers" >
<StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand" Padding="30" Spacing="40">
<ContentView VerticalOptions="FillAndExpand" Content="{Binding ApprovedUserGrid,Mode=TwoWay}" Padding="0,30,0,0"/>
<Button Command="{Binding OkayCommand}" Text="Okay" TextColor="White"
FontAttributes="Bold" FontSize="Large" HorizontalOptions="Center"
BackgroundColor="#088da5" />
</StackLayout>
</ContentPage>

Related

Xamarin.iOS Error - Application windows are expected to have a root view controller .... Using Static Binding

I am getting this error:
Foundation.MonoTouchException: Objective-C exception thrown. Name:
NSInternalInconsistencyException Reason: Application windows are
expected to have a root view controller at the end of application
launch
Using Xamarin.iOS if I use inside my xaml file this kind of Binding:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
xmlns:converters="clr-namespace:AppAlgorix.Converters"
xmlns:resources="clr-namespace:AppAlgorix.Resources"
prism:ViewModelLocator.AutowireViewModel="True"
x:Class="AppAlgorix.Views.LoginPage">
<ContentPage.Resources>
<ResourceDictionary>
<converters:MaskedCardConverter x:Key="cvtMaskedCard"></converters:MaskedCardConverter>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<StackLayout Orientation="Vertical" HorizontalOptions="Center" Padding="20">
<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="Fill" HeightRequest="80">
<Label Text="SEJA BEM VINDO" HorizontalOptions="CenterAndExpand" FontSize="Large" FontAttributes="None" TextColor="{Binding Source={x:Static resources:AppParameters.AppLabelColorDefault}}"></Label>
</StackLayout>
</StackLayout>
</ContentPage.Content>
</ContentPage>
I have tried this format also:
<Label Text="SEJA BEM VINDO" HorizontalOptions="CenterAndExpand"
FontSize="Large" FontAttributes="None" TextColor="{Binding
AppLabelColorDefault, Source={x:Static
resources:AppParameters}}"></Label>
My Parameters Class is this:
namespace AppAlgorix.Resources
{
public static class AppParameters
{
public static string AppLabelColorDefault
{
get
{
var color = Parameters.ResourceManager.GetString("applabelcolordefault");
return color;
}
}
}
}
My Xamarin project has Android and iOS. This approach works with Android, but do not work with iOS.
If I change my view to this :
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
xmlns:converters="clr-namespace:AppAlgorix.Converters"
prism:ViewModelLocator.AutowireViewModel="True"
x:Class="AppAlgorix.Views.LoginPage">
<ContentPage.Resources>
<ResourceDictionary>
<converters:MaskedCardConverter x:Key="cvtMaskedCard"></converters:MaskedCardConverter>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<StackLayout Orientation="Vertical" HorizontalOptions="Center" Padding="20">
<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="Fill" HeightRequest="80">
<Label Text="SEJA BEM VINDO" HorizontalOptions="CenterAndExpand" FontSize="Large" FontAttributes="None" TextColor="Black"></Label>
</StackLayout>
</StackLayout>
</ContentPage.Content>
</ContentPage>
I can execute and see my view in emulator...
So, I think my problem is this Binding format...
My question is... How to resolve this error in Xamarin.iOS, without breaking Xamarin.Android ?

Space around in xamarin forms

Im using xamarin forms.
i wanna design my xaml files but i realized something strange.
left and right of entry has space that i couldnt remove even with custom renderer.
is there any idea what is might be?
i tried padding,margin,HorizontalOption none of them effected.
even i tried to setPadding to 0 from custom renderer in android but it didnt work.
the first one is label as you can see filled out all the space but entry has an space around it .
Update:
this is my xaml codes and im using android emulator to test.
<StackLayout BackgroundColor="White" Spacing="15">
<Label Text="fds" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="Red"/>
<Entry BackgroundColor="Red" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
</StackLayout>
don't know how is your implementation but this what I tried:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
xmlns:bases="clr-namespace:WhiteSolution.Views.Bases"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:viewModelBase="clr-namespace:WhiteSolution.ViewModels.Bases"
viewModelBase:ViewModelLocator.AutoWireViewModel="True"
x:Class="WhiteSolution.Views.HomePage">
<ContentPage.Content>
<Grid VerticalOptions="FillAndExpand"
BackgroundColor="WhiteSmoke">
<StackLayout Padding="0"
Spacing="0"
BackgroundColor="Blue">
<Label Text="no space label"
Margin="0"
HorizontalOptions="FillAndExpand"
HorizontalTextAlignment="Center"
BackgroundColor="Yellow"
FontSize="Large"/>
<Entry Text="no space entry"
Margin="0"
BackgroundColor="Red"
HorizontalOptions="FillAndExpand"
HorizontalTextAlignment="Center"
FontSize="Large"/>
</StackLayout>
</Grid>
</ContentPage.Content>
</ContentPage>
and i get this result
if you share your code it will be more useful
Try this, Padding Property should be 0 in main StackLayout.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="SampleApp.Views.DashboardView">
<ContentPage.Content>
<StackLayout Padding="0" BindingContext="{Binding Dashboard}">
<!-- Controls -->
</StackLayout>
</ContentPage.Content>
I realized that entry has Default margin value. so i set it to 0 and everything worked.
here is my code
<StackLayout>
<Entry Margin="0" Text="fd" BackgroundColor="Red" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
<Label Text="fd" BackgroundColor="Red" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
</StackLayout>

Xamarin MasterDetailPage ContentPropertyAttribute

I'm trying to learn Xamarin and I was doing a simple MasterDetailPage to run on iOS. After running the code I got this error:
Can not set the content of MasterDetailPage as it doesn't have a ContentPropertyAttribute
Below is my XAML file code snippet:
<?xml version="1.0" encoding="utf-8"?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:MasterDetailLearing" x:Class="MasterDetailLearing.MainPage">
<!-- Place new controls here -->
<Label Text="Welcome to Xamarin.Forms!" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" />
<MasterDetailPage.Master>
<ContentPage Padding="10" BackgroundColor="Gray" Title="Master">
<ContentPage.Content>
<StackLayout Margin="5,30,5,5">
<Label Text="Master Page"></Label>
</StackLayout>
</ContentPage.Content>
</ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<ContentPage Padding="10">
<ContentPage.Content>
<StackLayout Margin="5,30,5,5">
<Label Text="Detail Page"></Label>
</StackLayout>
</ContentPage.Content>
</ContentPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
a MasterDetail page only has Master and Detail children. You cannot include any other content as a direct child. So your Label needs to be in either the Master or the Detail, it cannot be a direct child of the page.

Vertical text align on side menu xamarin.forms

I have been trying to centralize the text- "Hello Janine Alexander" on this side menu but to no avail. I have tried YAlign="Center" and also VerticalTextAlignment="Center" but neither have moved it even an inch down. Any help will be appreciated. I do think its in the navigation bar resulting in it not moving vertically down.How do i fix this
Here is the complete xaml code:
<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="loyaltyworx1.Profile">
<MasterDetailPage.Master>
<ContentPage Title="Menu"
BackgroundColor="#2196F3">
<StackLayout Orientation="Vertical">
<Label x:Name="lblMessage" FontSize="Medium" HorizontalOptions="Center" TextColor="White" />
<!--
This StackLayout you can use for other
data that you want to have in your menu drawer
-->
<StackLayout BackgroundColor="#2196F3"
HeightRequest="150">
<Label Text=""
FontSize="20"
VerticalOptions="CenterAndExpand"
TextColor="White"
HorizontalOptions="Center"/>
</StackLayout>
<ListView x:Name="navigationDrawerList"
RowHeight="60"
SeparatorVisibility="None"
BackgroundColor="White"
ItemSelected="OnMenuItemSelected">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<!-- Main design for our menu items -->
<StackLayout VerticalOptions="FillAndExpand"
Orientation="Horizontal"
Padding="20,10,0,10"
Spacing="20">
<Image Source="{Binding Icon}"
WidthRequest="40"
HeightRequest="40"
VerticalOptions="Center"
/>
<Label Text="{Binding Title}"
FontSize="Medium"
VerticalOptions="Center"
TextColor="#343f42"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
It looks like you're adding it to the Navigation bar of the MasterDetailPage. If so, you're not going to be able to move it down. What I did on my app was to remove the navigationbar in the MasterDetailPage and in the content page I added the label with binding to add the name of the logged in user.
MainPage.xaml
<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MyApp"
x:Class="MyApp.MainPage"
NavigationPage.HasNavigationBar="False">
<MasterDetailPage.Master>
<local:MasterPage x:Name ="masterPage"/>
</MasterDetailPage.Master>
</MasterDetailPage>
MasterPage.xaml
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MyApp.MasterPage"
Padding="0,10,0,0"
Icon="hamburger.png"
Title="Menu">
<ContentPage.Content>
<StackLayout>
<StackLayout Orientation="Horizontal" Padding="10,10,0,0">
<Label Text="" FontSize="40" FontFamily="FontAwesome" />
<Label x:Name="Username" Text="{Binding UserFullName}" VerticalOptions="CenterAndExpand"/>
</StackLayout>
.....
Screen shot
If that's not the issue please add the code that is wrapping the label to get a better idea of what could be happening.

Databinding in XAML for MasterDetailPage in Xamarin.Forms

So far, most examples using Xamarin.Forms are using C# for building up the UI. I prefer using XAML for the UI, and databind it to ViewModels.
I'm having trouble using the Xamarin.Forms.MasterDetailPage in combination with XAML, and I can't seem to port the C# example to XAML + ViewModels.
This is the XAML I got so far:
<?xml version="1.0" encoding="UTF-8" ?>
<MasterDetailPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:NSContacten;assembly=NSContacten"
x:Class="MasterDetailExample.Main"
Title="Master Detail Example">
<MasterDetailPage.Master BindingContext="{Binding Menu}">
<ContentPage Padding="5, 25">
<StackLayout Orientation="Vertical">
<Label Text="Master" HorizontalOptions="Center" />
<Label Text="{Binding Subtitle}" HorizontalOptions="Center" />
</StackLayout>
</ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail BindingContext="{Binding Detailpage}">
<ContentPage Padding="5, 25">
<StackLayout Orientation="Vertical">
<Label Text="Detail" HorizontalOptions="Center" />
<Label Text="{Binding Subtitle}" HorizontalOptions="Center" />
</StackLayout>
</ContentPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
The component works: I do see the 'Master' and 'Detail' labels. The bound labels (on the BindingContext objects) are not displayed.
I've used loads of different combinations, but I'm still stuck: How does this work? Is my binding incorrect (should it be on the "ContentPage"), can't I bind to the .Master and .Detail properties etc.? How should the "Menu" and "Detailpage" bindings look like?
It would be a huge help if anyone could help me out! The next step would be that the .Detail will be changed when a button is pressed in the .Master . Thanks in advance!
Your Xaml is almost ok, but:
The {BindingContext} are invalid on the properties and should be on the ContentPage elements
MasterDetailPage.Master require a Page.Title to be set, or it throws.
Here's the correct Xaml working for me:
<?xml version="1.0" encoding="UTF-8" ?>
<MasterDetailPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:NSContacten;assembly=NSContacten"
x:Class="MasterDetailExample.Main"
Title="Master Detail Example">
<MasterDetailPage.Master>
<ContentPage Padding="5, 25" BindingContext="{Binding Menu}" Title="Master">
<StackLayout Orientation="Vertical">
<Label Text="Master" HorizontalOptions="Center" />
<Label Text="{Binding Subtitle}" HorizontalOptions="Center" />
</StackLayout>
</ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<ContentPage Padding="5, 25" BindingContext="{Binding Detailpage}">
<StackLayout Orientation="Vertical">
<Label Text="Detail" HorizontalOptions="Center" />
<Label Text="{Binding Subtitle}" HorizontalOptions="Center" />
</StackLayout>
</ContentPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
I tested it with an anonymous type as the page view model:
public MyMDPage ()
{
InitializeComponent ();
BindingContext = new {
Menu = new { Subtitle = "I'm Master" },
Detailpage = new { Subtitle = "I'm Detail" }
};
}
and this works just fine. In your case, you probably want concrete types instead of anonymous ones for your view model, but you get the idea.