I have Xamarin page which has a grid with two rows and a column. In the first row/column I have a label and the second row/column I have a frame where it does not take the full height of the row. Could you help, please?
<controls:GradientColorStack
StartColor="#0cacee"
EndColor="#0574d8"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
GradientOreintation="Vertical">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="330" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Grid.Column="0"
Grid.Row="0"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Text="" />
<controls:CustomFrame
Grid.Row="1"
CornerRadius="30,30,0,0"
BackgroundColor="White"
HasShadow="True"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Margin="12,20,12,0" />
</Grid>
</controls:GradientColorStack>
There is default spacing in Row and Column .
Grid has properties to control spacing between rows and columns. The following properties are available for customizing the Grid:
ColumnSpacing – the amount of space between columns. The default value of this property is 6.
RowSpacing – the amount of space between rows. The default value of this property is 6.
Here you can set RowSpacing= "0" to get full height of the row.
<Grid BackgroundColor="Accent" RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="330"/>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label BackgroundColor="Wheat" Grid.Column="0"
Grid.Row="0"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Text="1111111111" />
<Frame
Grid.Row="1"
BackgroundColor="White"
HasShadow="True"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Margin="12,0,12,0" />
</Grid>
By the way Margin="12,20,12,0" also can affect the top space, if not necessary ,can set this : Margin="12,0,12,0"
Works fine with frames ?
<Frame
BackgroundColor="Red"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="370" />
</Grid.RowDefinitions>
<Label Grid.Column="0"
BackgroundColor="GREEN"
Grid.Row="0"
HorizontalOptions="FillAndExpand"
VerticalOptions="Start"
Text="LOL" />
<Frame
Grid.Row="1"
Grid.Column="0"
BackgroundColor="White"
HasShadow="True"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Margin="12,20,12,0">
<StackLayout>
<Label Text="Text" />
</StackLayout>
</Frame>
</Grid>
</Frame>
Related
I have a Xamarin Forms project and I have a Content Page with a ListView in which I have two buttons to add or remove items from a Cart.
When I click on the remove button it works just fine but when I click on the add button it only works if I click it on the left corner. If I click somewhere else on the button it will register as if I click the entire item on the listView.
Also, I don't know why but the buttons change its size when clicked.
Here is how it is performing
And here is the code. The button that is not working properly is called btnAdd
<?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="AppCrijoya.Views.CartPage">
<ContentPage.Content>
<StackLayout Padding="0">
<Grid RowSpacing="0" Margin="0">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" VerticalOptions="Start" BackgroundColor="#ffffff" Padding="0,8" Margin="0,0,0,5">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label VerticalOptions="Center" HorizontalOptions="Center" Grid.Column="0">Monto Total:</Label>
<Label x:Name="lblTotalCart" VerticalOptions="Center" HorizontalOptions="Center" Grid.Column="1" TextColor="Black" FontAttributes="Bold"></Label>
<Button VerticalOptions="Center" HorizontalOptions="Center" Grid.Column="2" x:Name="btnContinue" Text="Continuar"
BackgroundColor="#353A47" FontSize="12" HeightRequest="35"
TextColor="White" Clicked="BtnContinue_Clicked" Padding="0" />
</Grid>
<StackLayout x:Name="stkEmpty" IsVisible="False" Margin="0,220,0,0" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
<Image Source="bag.png" HeightRequest="40"></Image>
<Label HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">TU CESTA DE LA COMPRA ESTÁ VACÍA</Label>
</StackLayout>
</StackLayout>
<ScrollView Grid.Row="1">
<ListView x:Name="CartListView" ItemsSource="{Binding oList}" HasUnevenRows="True" IsPullToRefreshEnabled="False" SelectionMode="None">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Frame Margin="3.5" CornerRadius="30">
<Grid x:Name="Item" HorizontalOptions="FillAndExpand" VerticalOptions="Center" HeightRequest="150" RowSpacing="6">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="155"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="{Binding Image}" Aspect="Fill" HeightRequest="100" WidthRequest="100" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"></Image>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" VerticalOptions="Center" HorizontalOptions="Start">
<Label Text="{Binding Name}" Margin="0" TextColor="Black" FontSize="15"/>
</StackLayout>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="35"/>
</Grid.RowDefinitions>
<!--<StackLayout Grid.Column="1" Grid.Row="0" HorizontalOptions="Start" VerticalOptions="Center">
<Label Text="Cantidad" VerticalOptions="Center"/>
</StackLayout>-->
<StackLayout Grid.Column="0" Grid.Row="1" HorizontalOptions="Start">
<Label Text="Precio Unidad"/>
</StackLayout>
<StackLayout Grid.Column="1" Grid.Row="1" HorizontalOptions="End">
<Label Text="{Binding Price, StringFormat='{0:N2}€'}"/>
</StackLayout>
<StackLayout Grid.Column="0" Grid.Row="2" HorizontalOptions="Start">
<Label Text="Precio Total" FontAttributes="Bold"/>
</StackLayout>
<StackLayout Grid.Column="1" Grid.Row="2" HorizontalOptions="Start">
<Label Text="{Binding Total, StringFormat='{0:N2}€'}" TextColor="Black"/>
</StackLayout>
<StackLayout Grid.Column="0" Grid.Row="3" HorizontalOptions="StartAndExpand">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Button x:Name="btnRemove"
Grid.Column="0"
CornerRadius="15"
BackgroundColor="#E5D3C2"
WidthRequest="50"
HeightRequest="35"
Padding="0" Text="-"
CommandParameter="{Binding .}"
Clicked="BtnRemove_Clicked"
BorderWidth="0.3"
TextColor="#353A47"
BorderColor="#353A47"/>
<Button x:Name="btnAdd"
Grid.Column="2"
CornerRadius="15"
BackgroundColor="#E5D3C2"
WidthRequest="50"
HeightRequest="35"
Padding="0" Text="+"
CommandParameter="{Binding .}"
Clicked="BtnAdd_Clicked"
BorderWidth="0.3"
TextColor="#353A47"
BorderColor="#353A47"/>
<Label x:Name="lblQuantity"
Grid.Column="1"
VerticalOptions="Center"
Text="{Binding Quantity}"
FontAttributes="Bold"
FontSize="15"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
HeightRequest="20"
WidthRequest="30"/>
</Grid>
</StackLayout>
<!-- <Button x:Name="btnDelete" Grid.ColumnSpan="2" Grid.Row="3" Text="Retirar de bolsa" CommandParameter="{Binding Id}"
BackgroundColor="#9C2424" FontSize="10" HeightRequest="35"
TextColor="White" Clicked="BtnDelete_Clicked" Padding="0" />-->
</Grid>
</Grid>
</Grid>
</Frame>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ScrollView>
</Grid>
</StackLayout>
</ContentPage.Content>
</ContentPage>
Please help because I have no idea of why this is happening. Thanks.
EDIT
If I remove the label in between the two buttons it will work, don't know why
You may get more reliable behavior if you:
Add the missing RowDefinition, so Grid.Row="3" has height 35.
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<!-- ADD BELOW LINE -->
<RowDefinition Height="auto"/>
<RowDefinition Height="35"/>
</Grid.RowDefinitions>```
Remove the unneeded StackLayout. Change:
<StackLayout Grid.Column="0" Grid.Row="3" HorizontalOptions="StartAndExpand">
<Grid>
...
</Grid>
</StackLayout>
to:
<Grid Grid.Column="0" Grid.Row="3" HorizontalOptions="StartAndExpand">
...
</Grid>
IF the above are not sufficient, you might need to add a HeightRequest or hardcoded RowDefinition Height somewhere. I realize this is not ideal - Auto heights are preferable, because they adapt as needed - but sometimes Xamarin Forms needs that extra hint.
The first place to try is to give the whole ItemTemplate a HeightRequest:
<ViewCell>
<Frame ... HeightRequest="300" ...
If that works, then you might try instead putting that on one of the nested elements, to allow most of the content to be automatically sized.
ALTERNATIVE (If the first two items aren't enough)
Its possible to collapse any complex ItemTemplate layout to a SINGLE Grid. Then use StackLayout within cells as needed (but NO NESTED Grids). This is done by use of ColumnSpan and RowSpan to describe areas of the overall grid. You can see this visually if you DIAGRAM the entire layout on a piece of paper, drawing vertical and horizontal lines around each section. Extend those lines all the way to edges of the outer grid.
Xamarin Forms should do a better job of figuring out the layout of this single Grid.
The page might also appear faster.
Try to change the order of the Label , like this .
<Button
x:Name="btnRemove"
Grid.Column="0"
Padding="0"
BackgroundColor="#E5D3C2"
BorderColor="#353A47"
BorderWidth="0.3"
Clicked="BtnRemove_Clicked"
CommandParameter="{Binding .}"
CornerRadius="15"
HeightRequest="35"
Text="-"
TextColor="#353A47"
WidthRequest="50" />
<Label
x:Name="lblQuantity"
Grid.Column="1"
FontAttributes="Bold"
FontSize="15"
HeightRequest="20"
HorizontalTextAlignment="Center"
Text="{Binding Quantity}"
VerticalOptions="Center"
VerticalTextAlignment="Center"
WidthRequest="30" />
<Button
x:Name="btnAdd"
Grid.Column="2"
Padding="0"
BackgroundColor="#E5D3C2"
BorderColor="#353A47"
BorderWidth="0.3"
Clicked="BtnAdd_Clicked"
CommandParameter="{Binding .}"
CornerRadius="15"
HeightRequest="35"
Text="+"
TextColor="#353A47"
WidthRequest="50" />
I did a test based on your code,I found that the middle Label lblQuantity(Label x:Name="lblQuantity") has covered button (Button x:Name="btnAdd" ), so you can just remove property WidthRequest="30" of the middle label (lblQuantity), just as follows:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Button x:Name="btnRemove"
Grid.Column="0"
CornerRadius="15"
BackgroundColor="#E5D3C2"
WidthRequest="50"
HeightRequest="35"
Padding="0"
Text="-"
Clicked="btnRemove_Clicked"
BorderWidth="0.3"
TextColor="#353A47"
BorderColor="#353A47"/>
<Button x:Name="btnAdd"
Grid.Column="2"
CornerRadius="15"
BackgroundColor="#E5D3C2"
WidthRequest="50"
HeightRequest="35"
Padding="0"
Text="+"
Clicked="btnAdd_Clicked"
BorderWidth="0.3"
TextColor="#353A47"
BorderColor="#353A47"/>
<Label x:Name="lblQuantity"
Grid.Column="1"
VerticalOptions="Center"
Text="{Binding Name}"
FontAttributes="Bold"
FontSize="15"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
HeightRequest="20"
/>
</Grid>
trying to format 2 labels.
Labels should represent title and value.
They should have position on bottom right corner.
On tablet everything looks fine, but on phone when "value" need to be wrapped. The space where it could not fit the wrapped text on the first line still stay.
So on the end, the text formatting look strange. with empty space where text cannot fit.
In this case I can imagine that size of second label is adjust to the size of longest text on line...
<StackLayout Orientation="Horizontal" HorizontalOptions="End" VerticalOptions="End">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label
Grid.Column="0"
BackgroundColor="Bisque"
FontSize="Medium"
Text="Version of Co.:"
HorizontalOptions="EndAndExpand"/>
<Label
Grid.Column="1"
BackgroundColor="BlanchedAlmond"
HorizontalOptions="End"
HorizontalTextAlignment="Start"
FontSize="Medium"
Text="This is vereverevery longversiontitle."/>
</Grid>
</StackLayout>
When I will set up horizontalTextAlignment on the second label to "Start" result will look like this and I will have again strange empty space.
With short text which dont need to be wrap, whole layout looks fine as I want:
Update:
Expected behavior:
Just Add one more column to your grid,
and change the position of label to 1, 2 respectively.
<StackLayout Orientation="Horizontal" HorizontalOptions="End" VerticalOptions="End">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label
Grid.Column="1"
BackgroundColor="Bisque"
FontSize="Medium"
Text="Version of Co.:"
HorizontalOptions="EndAndExpand"/>
<Label
Grid.Column="2"
BackgroundColor="BlanchedAlmond"
HorizontalOptions="End"
HorizontalTextAlignment="Start"
FontSize="Medium"
Text="This is vereverevery longversiontitle."/>
</Grid>
</StackLayout>
Set the outer StackLayout's Orientation as Vertical.
Add the extra column to the Grid, and set the exact width value on it .
Set the Label's HorizontalTextAlignment as End.
Sample code
<StackLayout Orientation="Vertical" HorizontalOptions="End" VerticalOptions="End">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label
Grid.Column="1"
BackgroundColor="Bisque"
FontSize="Medium"
Text="Version of Co.:"
HorizontalOptions="EndAndExpand"
HorizontalTextAlignment="End"/>
<Label
Grid.Column="2"
BackgroundColor="BlanchedAlmond"
HorizontalOptions="End"
HorizontalTextAlignment="End"
FontSize="Medium"
Text="This is vereverevery longversiontitle."/>
</Grid>
</StackLayout>
Hello friends how are you?
I tell you that I have a page that aims to write a message and store it. The problem is that when I position myself in the editor the screen is cut showing only half of the editor. What could be happening? Could you help me?. Thank you very much for your help.
Here my code:
</TabbedPage>
<ContentPage>
....
</ContentPage>
<ContentPage>
....
</ContentPage>
<ContentPage x:Name="MessagesContentPage" Title="Messages" >
<Grid BindingContext="{Binding MessageViewModel}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" VerticalOptions="Start">
<ScrollView>
<ListView
x:Name="OpportunityMessagesListView"
SeparatorVisibility="Default"
IsRefreshing="{Binding IsRefreshing}"
SelectionMode="None" >
<ListView.ItemTemplate>
<DataTemplate >
<ViewCell >
<ViewCell.ContextActions>
<MenuItem x:Name="MenuItemDeleteMessage" Clicked="MenuItemDeleteMessage_Clicked" Text="Eliminar" IsDestructive="True" CommandParameter="{Binding Id}" IsEnabled="{Binding IsMenuEnabled}">
<!--<MenuItem.IconImageSource>
<FontImageSource Glyph="Rechazar" FontFamily="{StaticResource FontAwesomeSolid}" Color="#e82424" />
</MenuItem.IconImageSource>-->
</MenuItem>
</ViewCell.ContextActions>
<Grid x:Name="Item" Padding="3" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Grid.Row="0" Grid.Column="0" Margin="0" Text="{Binding Message}" VerticalTextAlignment="Center" HorizontalTextAlignment="Start" HorizontalOptions="FillAndExpand" LineBreakMode="CharacterWrap"/>
<Label Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Text="{Binding CreationTime, StringFormat='{0:yyyy-MM-dd HH:mm:ss}'}" TextColor="LightGray" BackgroundColor="Transparent" HorizontalTextAlignment="End"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ScrollView>
</Grid>
<Grid Grid.Row="1" VerticalOptions="End" Padding="3" Margin="3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="8*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<customControl:ExtendedEditor x:Name="MessageExtendedEditor" Grid.Row="0" Grid.Column="0" AutoSize="TextChanges" Placeholder="Esccriba información de seguimiento" />
<Button Grid.Row="0" Grid.Column="1" x:Name="SaveMessageButton" Clicked="SaveMessageButton_Clicked" FontFamily="{StaticResource FontAwesomeSolid}" Text="" HeightRequest="57" VerticalOptions="End" FontSize="27" BackgroundColor="Transparent" BorderColor="Transparent" TextColor="#5694ff" />
</Grid>
</Grid>
</ContentPage>
Just as a suggestion, considering that we are talking about Xamarin Forms it's better to explain if you have this issue just on Android, iOS or both (or UWP in case).
Anyway, I think that at the following link you can find all the help that you need
https://xamarinhelp.com/accommodate-on-screen-keyboard-xamarin-forms/
Let me know if it solve your problems. In case it won't solve your problem I think it is better if you explain the problem in a more detailed way.
I'm trying to create a grid layout with a height of 8px with cornered radius horizontally as below snapshot.
: https://ibb.co/s1dkpnw
<Grid Margin="0,0,0,24" HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="6*">
</ColumnDefinition>
<ColumnDefinition Width="4*">
</ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="8">
</RowDefinition>
</Grid.RowDefinitions>
<Frame CornerRadius="8" Grid.Row="0" HorizontalOptions="FillAndExpand" HeightRequest="8">
<Label Grid.Row="0" Grid.Column="0" HeightRequest="8" HorizontalOptions="FillAndExpand" BackgroundColor="Lime"></Label>
<Label Grid.Row="0" Grid.Column="1" HeightRequest="8" HorizontalOptions="FillAndExpand" BackgroundColor="Blue"></Label>
</Frame>
</Grid>
I'm able to get the UI as in the below snapshot.
: https://ibb.co/7nLTgdL
I'm not able to get the UI displyed within the frame visible, although i'm getting a cornered radius for a two columned layout. It just shows a empty frame.
Please let me know how to design the XAML UI to get the UI as in the design snapshot.
Got the UI aligned by pushing the Grid within the frame control as below,
<Frame CornerRadius="8" Grid.Row="0" HorizontalOptions="FillAndExpand" HeightRequest="8">
<Grid HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="6*">
</ColumnDefinition>
<ColumnDefinition Width="4*">
</ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="8">
</RowDefinition>
</Grid.RowDefinitions>
<Label Grid.Row="0" Grid.Column="0" HeightRequest="8" HorizontalOptions="FillAndExpand" BackgroundColor="Lime"></Label>
<Label Grid.Row="0" Grid.Column="1" HeightRequest="8" HorizontalOptions="FillAndExpand" BackgroundColor="Blue"></Label>
</Grid>
</Frame>
AbsoluteLayout can help you:
<AbsoluteLayout HorizontalOptions="Center">
<Frame
AbsoluteLayout.LayoutBounds="0,0,150,8"
AbsoluteLayout.LayoutFlags="None"
BackgroundColor="#0086C9"
CornerRadius="7" />
<Frame
AbsoluteLayout.LayoutBounds="120,0,150,8"
AbsoluteLayout.LayoutFlags="None"
BackgroundColor="#D8D8D8"
CornerRadius="7" />
<Frame
AbsoluteLayout.LayoutBounds="120,0,30,8"
AbsoluteLayout.LayoutFlags="None"
BackgroundColor="#0086C9"
CornerRadius="1" />
</AbsoluteLayout>
Output: https://i.ibb.co/jh6QmBL/ss.png
I managed to setup rows and columns from the code but couldn't move this settings to xaml:
grid.RowDefinitions = new RowDefinitionCollection {
new RowDefinition { Height = new GridLength(1, GridUnitType.Star) }
};
grid.ColumnDefinitions = new ColumnDefinitionCollection {
new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) }
};
The following doesn't work:
<Grid x:Name="grid" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
...
</Grid>
From the documentation I managed to fetch only c# implementation
I also get the same behaviour (does not fill and expand) for a grid with a single cell (1 row / column, although I am not sure why we would ever need a grid with a single cell full size of screen), but it seems to work fine for a 2 x 2, 3 x 3 cell grid (have not tried others yet).
The Height="" and Width="" attributes are required in Xamarin Forms although I "think" they are not needed in WPF as the default assumes this is the case.
<ContentPage.Content>
<Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Grid.Row="0" Grid.Column="0" Text="1"></Button>
<Button Grid.Row="1" Grid.Column="1" Text="2"></Button>
</Grid>
</ContentPage.Content>
Here is a sample
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Text="Top Left" Grid.Row="0" Grid.Column="0" />
<Label Text="Top Right" Grid.Row="0" Grid.Column="1" />
<Label Text="Bottom Left" Grid.Row="1" Grid.Column="0" />
<Label Text="Bottom Right" Grid.Row="1" Grid.Column="1" />
</Grid>