Xamarin Grid does not split evenly - xaml

I want two labels contained within a ListView DataTemplate Cell to split evenly horizontally across the screen.
From my understanding,
if you use a Grid and set the two ColumnDefinitions to 1* it should work. I tried this and it does not display as expected.
I had to add a large WidthRequest to the first Label to get it to work.
I also tried setting the HorizonalOptions on the Grid and labels to FillAndExpand and that had no results.
<ViewCell>
<Frame HasShadow="true" Margin="2">
<StackLayout Orientation="Horizontal" Margin="0,0,0,0" >
<StackLayout WidthRequest="20" BackgroundColor="{Binding RYGStatusColor}" >
<Label Text="{Binding RYGStatusLetter}" HorizontalTextAlignment="Center"
FontSize="Medium" FontAttributes="Bold" TextColor="White" />
</StackLayout>
<StackLayout Orientation="Vertical">
<Label Text="{Binding ProgramName}" FontSize="Medium" FontAttributes="Bold" />
<Label Text="{Binding DesignCustomerName}" FontSize="Small" />
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0"
Text="{Binding EstimatedTotalValue, Converter={StaticResource CurrencyDisplay}}"
FontSize="Small" FontAttributes="Bold" WidthRequest="1024" />
<!-- WidthRequest is a hack to force the width to be equal across the screen. -->
<Label Grid.Row="0" Grid.Column="1" FontSize="Small">
<Label.FormattedText>
<FormattedString>
<Span Text="Modified: " />
<Span Text="{Binding ModifiedDate, StringFormat='{0:M/d/yy}', Converter={StaticResource LocalTime}}}" />
</FormattedString>
</Label.FormattedText>
</Label>
</Grid>
</StackLayout>
</StackLayout>
</Frame>
</ViewCell>
Without the WidthRequest hack, I get these results: Actual Results
Row 1
"Label1 Label2 "
Row 2
"Label1 Label2 "
With the hack, I get expected results:Expected Results
Row 1
"Label1 Label2 "
Row 2
"Label1 Label2 "

I suspect the Grid is splitting itself correctly, but it is not taking up the full space that you are expecting. Try adding HorizontalOptions="FillAndExpand" to the Grid itself and report back.

I want two labels contained within a ListView DataTemplate Cell to split evenly horizontally across the screen.From my understanding, if you use a Grid and set the two ColumnDefinitions to 1* it should work. I tried this and it does not display as expected.
I use your code in ListView datetemplate, and don't use widthrequest, I get the following result. Xamarin.Form version is 3.4.0.1008975.
Here is the code:
<ContentPage.Content>
<ListView ItemsSource="{Binding models}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Label
Grid.Row="0"
Grid.Column="0"
BackgroundColor="Blue"
FontAttributes="Bold"
FontSize="Small"
Text="{Binding str1}" />
<!-- WidthRequest is a hack to force the width to be equal across the screen. -->
<Label
Grid.Row="0"
Grid.Column="1"
BackgroundColor="Yellow"
FontSize="Small">
<Label.FormattedText>
<FormattedString>
<Span Text="Modified: " />
<Span Text="{Binding str2}" />
</FormattedString>
</Label.FormattedText>
</Label>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage.Content>

Related

Xamarin Forms Label & Entry on one line using XAML

I am trying to flatten the area in my ListView so that the Label & Entry appear next to each other. I've tried many approaches unsuccessfully.
Can someone show me the XAML for this?
THE XAML:
Using the following XAML...
<telerikDataControls:RadListView x:Name="listSeals" ItemsSource="{ Binding Seals }" IsVisible="True">
<telerikDataControls:RadListView.ItemTemplate>
<DataTemplate>
<telerikListView:ListViewTemplateCell>
<telerikListView:ListViewTemplateCell.View>
<Grid BackgroundColor="{Binding rowID, Converter={ StaticResource ListViewRowBackgroundColorConverter }}">
<Grid.RowDefinitions>
<RowDefinition Height="150"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Label Text="{Binding CategoryName}" />
</Grid>
<Grid Grid.Column="1">
<StackLayout>
<Label Text="Off" />
<Entry x:Name="txtOff" Text="{Binding OffItem.SamplePotSealCode}" TextChanged="TxtOff_TextChanged" Style="{StaticResource FormEntryStyle}" HorizontalOptions="FillAndExpand"></Entry>
<Label Text="On" />
<Entry x:Name="txtOn" Text="{Binding OnItem.SamplePotSealCode}" TextChanged="TxtOn_TextChanged" Style="{StaticResource FormEntryStyle}" HorizontalOptions="FillAndExpand"></Entry>
</StackLayout>
</Grid>
</Grid>
</telerikListView:ListViewTemplateCell.View>
</telerikListView:ListViewTemplateCell>
</DataTemplate>
</telerikDataControls:RadListView.ItemTemplate>
</telerikDataControls:RadListView>
THE CURRENT LAYOUT:
Notice how the OFF & ON labels "stack"...
THE DESIRED LAYOUT:
I want the the OFF & ON labels "lay next to" the Entry...
You can achieve the layout you're trying to with a Grid layout with 3 column definitions and 2 row definitions.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Text="{Binding CategoryName}" />
<Label Grid.Row="0" Grid.Column="1" Text = "Off" />
<Label Grid.Row="1" Grid.Column="1" Text="On" />
<Entry Grid.Row="0" Grid.Column="2" Text="{Binding OffItem.SamplePotSealCode}" />
<Entry Grid.Row="1" Grid.Column="2" Text="{Binding OnItem.SamplePotSealCode}" />
</Grid>
You may need to play with Horizontal- and VerticalOptions to make it display exactly how you want. This should give an idea of how to structure it into a single Grid layout.
You need a nested stack layout with horizontal orientation:
<telerikDataControls:RadListView x:Name="listSeals"
ItemsSource="{ Binding Seals }"
IsVisible="True">
<telerikDataControls:RadListView.ItemTemplate>
<DataTemplate>
<telerikListView:ListViewTemplateCell>
<telerikListView:ListViewTemplateCell.View>
<!-- Previous Code -->
<Grid Grid.Column="1">
<StackLayout>
<StackLayout Orientation="Horizontal">
<Label Text="Off" />
<Entry x:Name="txtOff"
Text="{Binding OffItem.SamplePotSealCode}"
TextChanged="TxtOff_TextChanged"
Style="{StaticResource FormEntryStyle}"
HorizontalOptions="StartAndExpand">
</Entry>
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label Text="On" />
<Entry x:Name="txtOn"
Text="{Binding OnItem.SamplePotSealCode}"
TextChanged="TxtOn_TextChanged"
Style="{StaticResource FormEntryStyle}"
HorizontalOptions="StartAndExpand">
</Entry>
</StackLayout>
</StackLayout>
</Grid>
</Grid>
</telerikListView:ListViewTemplateCell.View>
</telerikListView:ListViewTemplateCell>
</DataTemplate>
</telerikDataControls:RadListView.ItemTemplate>
You may also need to mess with the Horizontal options to get the correct spacing/layout.

Xamarin margins are different between two resolutions (devices)

I have a page in xamarin with a couple of frames, all with an image (color) and text. However, i'm facing the problem that the margins of the images (colors) look different on different phones (resolutions). As you can see on the image below, the images are in the right position on the Galaxy S8 (resolution 1440x2960) and at the wrong position on the Galaxy S10e (resolution 1080 x 2280).
I am using the following code for the frames:
<Grid ColumnSpacing="12.5" RowSpacing="12.5" Padding="10" HeightRequest="500">
<Grid.RowDefinitions>
<RowDefinition Height="0.8*" />
<RowDefinition Height="4.5*" />
<RowDefinition Height="1.5*" />
<RowDefinition Height="1.5*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Frame x:Name="frame_Sport" Grid.Row="2" Grid.Column="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="Sport_Clicked"/>
</Frame.GestureRecognizers>
<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand">
<StackLayout Orientation="Horizontal" >
<Label Text=" Sport" FontSize="18"/>
</StackLayout>
<StackLayout Orientation="Vertical" >
<Label x:Name="txt_Sport" FontSize="18"/>
</StackLayout>
<Image Source="mark_green.png" Scale="0.17" Margin="-110,-137,0,0"/>
</StackLayout>
</Frame>
<Frame x:Name="frame_Voeding" Grid.Row="2" Grid.RowSpan="2" Grid.Column="1" >
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="Voeding_Clicked"/>
</Frame.GestureRecognizers>
<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
<Label Text=" Voeding" FontSize="18" />
<Label x:Name="txt_Voeding1" FontSize="18" Margin="0,-0.6"/>
<Label x:Name="txt_Voeding2" FontSize="18" Margin="0,-0.6"/>
<Label x:Name="txt_Voeding3" FontSize="18" Margin="0,-0.6"/>
<Label x:Name="txt_Voeding4" FontSize="18" Margin="0,-0.6"/>
<Label x:Name="txt_Voeding5" FontSize="18" Margin="0,-0.6"/>
<Label x:Name="txt_Voeding6" FontSize="18" Margin="0,-0.6"/>
<Image Source="mark_red.png" Scale="0.17" Margin="-110,-280,0,0"/>
</StackLayout>
</Frame>
<Frame x:Name="frame_Slaap" Grid.Row="3" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="Slaap_Clicked"/>
</Frame.GestureRecognizers>
<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand">
<StackLayout Orientation="Horizontal" >
<Label Text=" Slaap" FontSize="18" />
</StackLayout>
<StackLayout Orientation="Vertical">
<Label x:Name="txt_Slaap" FontSize="18" />
</StackLayout>
<Image Source="mark_blue.png" Scale="0.17" Margin="-110,-137,0,0"/>
</StackLayout>
</Frame>
</Grid>
Why are the images (colors) looking different on both phones, how do I fix this?
The values for Margin are in absolute units (pixels).
The Frame which contains the StackLayout has a different absolute width on every device. Therefore your positioning of the icon will differ if the resolution or dpi differs.
In your case I would create a Horizontal Stacklayout with the Image and the label like that:
<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
<StackLayout Orientation="Horizontal">
<Image Source="mark_red.png" Scale="0.17"/>
<Label Text="Voeding" FontSize="18" />
</StackLayout>
<Label x:Name="txt_Voeding1" FontSize="18" Margin="0,-0.6"/>
...
</StackLayout>
I have a page in xamarin with a couple of frames, all with an image (color) and text. However, I'm facing the problem that the margins of the images (colors) look different on different phones (resolutions). As you can see on the image below, the images are in the right position on the Galaxy S8 (resolution 1440x2960) and at the wrong position on the Galaxy S10e (resolution 1080 x 2280).
The reason this is happening is that different devices have a different density. When it comes to Margin it is a double value and Xamarin Forms converts this double values into platform specific types (for eg Dp's, Points) respectively. Hence every device responds to the same margin in a different way based on its own size and density.
In the same way, density also affects the colour. The human perception for colour changes if the device has a denser pixels even though it is the same color but it looks a little different to us! Basically, The denser the pixels are in your device the more vivid the colour is to the naked eye.
Now coming back to the issue the reason your Margin is looking different is the same reason I explained above, Now to overcome this issue you might want to either remove the StackLayout use Grid instead and define a proper Column definition in a way that they align properly.
<Grid>
<Grid.ColumnDefinitions> <--<Define these as they suit you>-->
.
.
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="mark_red.png" Scale="0.17"/>
<Label Grid.Column="1" Text="Voeding" FontSize="18" />
</Grid>
Or Increase the Spacing property of the StackLayout so it adds a little extra space between the Image and the Label:
<StackLayout Orientation="Horizontal" Spacing="10"> <--<Default spacing is 6>-->
<Image Source="mark_red.png" Scale="0.17"/>
<Label Text="Voeding" FontSize="18" />
</StackLayout>
Update:
Your XAML should look like this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="mark_red.png" Scale="0.17"/>
<Label Grid.Column="1" Text="Voeding" FontSize="18" />
<StackLayout Grid.Row="1" Grid.ColumnSpan="2" >
<Label x:Name="txt_Voeding1" FontSize="18" Margin="0,-3"/>
<Label x:Name="txt_Voeding2" FontSize="18" Margin="0,-3"/>
<Label x:Name="txt_Voeding3" FontSize="18" Margin="0,-3"/>
<Label x:Name="txt_Voeding4" FontSize="18" Margin="0,-3"/>
<Label x:Name="txt_Voeding5" FontSize="18" Margin="0,-3"/>
<Label x:Name="txt_Voeding6" FontSize="18" Margin="0,-3"/>
</StackLayout>
</Grid>

Xamarin Editor Padding

In my xaml I'm trying to put padding between my background and my labels/editor and datepicker, but I can't get it right. I've attempted putting the grid inside a grid and put padding or margin on that one. I've tried putting the labels/editors inside a grid/stacklayout, I've even tried negative padding and margin on them.
This is how it looks like without the padding
https://gyazo.com/3809306e3b5a27a5f10058bbc17c295a
But whenever I try to add padding or margin anywhere the editors gets too small and gets clipped on the inside like this:
https://gyazo.com/46f25b9c44e1717bf1fa124eb2b10068
This is how I want it to look like, but I can't get rid of that damn clipping on the editors, why does the editors get clipped but not the label?
I've tried setting margin 0 and padding 0 on the editors specifically, didn't help either.
<!-- Bottom Command Bar -->
<Grid Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="8" BackgroundColor="LightGray" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Padding="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="1.5*"/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" BackgroundColor="White" Text="{Binding QuoteNumber}" TextColor="Black" VerticalOptions="Fill" HorizontalOptions="Fill" />
<Editor Grid.Row="0" Grid.Column="1" BackgroundColor="White" Placeholder="PO Number" TextColor="Black" Text="{Binding PoNumber}" VerticalOptions="Fill" HorizontalOptions="Fill" />
<Editor Grid.Row="0" Grid.Column="2" BackgroundColor="White" Placeholder="Drop Date" TextColor="Black" Text="{Binding DropDate}" VerticalOptions="Fill" HorizontalOptions="Fill" />
<DatePicker Grid.Row="0" Grid.Column="2" MinimumDate="{Binding MinimumDate}" MaximumDate="{Binding MaximumDate}" Date="{Binding DropDate}" BackgroundColor="{StaticResource ThemeBkColor}" TextColor="White"/>
<Editor Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" BackgroundColor="White" Placeholder="Comment" TextColor="Black" Text="{Binding Comment}" VerticalOptions="Fill" HorizontalOptions="Fill"/>
<Label Grid.Row="0" Grid.Column="3" VerticalOptions="Center" HorizontalOptions="Center" FontSize="32" Text="{Binding TotalOrderValue, StringFormat='{0:C2}'}"/>
<Button Grid.Row="1" Grid.Column="3" Margin="10,0,10,2" VerticalOptions="Fill" HorizontalOptions="Fill" Text="SUBMIT PART ORDER" Command="{Binding SubmitJourneyCommand}" BackgroundColor="{StaticResource ThemeBkColor}" TextColor="White" />
</Grid>
Within your Change the value from * to AUTO
From there you can use 'padding' or 'margin' on either the main Grid control or the individual Row elements and controls within them.

Xamarin forms - unwanted extra space under TableView

I am creating my first Android app. I want to show TableView with some input fields and then a button to process the inputs.
I don't know why but there is extra space under TableView or the button is aligned to the bottom but it is opposite to the settings.
Can you help me fix it?
<StackLayout Orientation="Vertical" VerticalOptions="Start" Padding="20,15,20,0" Spacing="0">
<Label Text="This is TableView"></Label>
<TableView Intent="Settings" VerticalOptions="Start">
<TableRoot>
<TableSection>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="item 1"/>
<Entry></Entry>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="item 2"/>
<Entry></Entry>
</StackLayout>
</ViewCell>
</TableSection>
</TableRoot>
</TableView>
<Label Text="TableView - END"></Label>
<Button Text="My button" TextColor="DodgerBlue" VerticalOptions="Start" HorizontalOptions="Fill" Margin="40, 10, 40, 10"/>
<Frame VerticalOptions="StartAndExpand" BackgroundColor="Transparent" BorderColor="Black">
<StackLayout Orientation="Vertical">
<StackLayout Orientation="Horizontal" HorizontalOptions="Fill">
<Label Text="aaaa" HorizontalOptions="StartAndExpand"></Label>
<Label Text="value" HorizontalOptions="End"></Label>
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label Text="aaaa"></Label>
<Label Text="value"></Label>
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label Text="aaaa"></Label>
<Label Text="value"></Label>
</StackLayout>
</StackLayout>
</Frame>
</StackLayout>
Your best option is to define the RowHeight for each cell, and then specify the HeightRequest for the tableview. this way you can define the space it will occupy
<TableView Margin="0" Intent="Settings" HeightRequest="120" RowHeight="60" VerticalOptions="Start">
Unfortunately, this is how Xamarin.Forms TableView/ListView works. It is not expected to have anything below it. If you need something below you can either set the height of TableView manually or to put the content in the last cell, neither thing is perfect but in any case you need to look for some workaround as this is behavior by design (it would be a bit easier if you could use the ListView instead of TableView).
As you were asking what you can do besides using a TableView, of course a Grid would be possible, please see the following example:
<Grid VerticalOptions="StartAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" /> <!-- for the label -->
<ColumnDefinition Width="*" />
<Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="1" /> <!-- For the separator, you might have to experiment with the height -->
<RowDefinition Height="*" />
<RowDefinition Height="1" />
</Grid.RowDefinitions>
<Label Text="Item 1" />
<Entry Grid.Row="0" Grid.Column="1" />
<BoxView BackgroundColor="Black"
HeightRequest="1"
Grid.Row="1"
Grid.Column="0"
Grid.ColumnSpan="2" /> <!-- The separator -->
<Label Grid.Row="2" Grid.Column="0" Text="Item 2" />
<Entry Grid.Row="2" Grid.Column="1" />
<BoxView BackgroundColor="Black"
HeightRequest="1"
Grid.Row="3"
Grid.Column="0"
Grid.ColumnSpan="2" /> <!-- The separator -->
</Grid>
I am using BoxViews with a black background color and a HeightRequest of 1 for the separator. You might have to experiment with the color and the height to get the results you want. Values below 1 are possible and result in finer lines. In a real world example I've used .5.
Anyway, this makes the XAML way more cluttered. Grid-designs (while I am using them myself) tend to get quite unwieldy.
I am not sure if this what you are looking for but my understanding of the question tells me you are talking about the label Value being away from the rest.
if you check the code for this label :
<Label Text="value" HorizontalOptions="End"></Label>
the HorizontalOptions is set to "End" which is causing this changing it to start will fix your problem
Feel free to revert in case if I missed anything
Goodluck

ViewCell not align correctly and cut part of content - Xamarin Forms

I have a ListView in Xamarin Forms XAML, in this ListView I want to draw a Grid with 4 labels and 1 Entry. My problem is that, when I try to display the ListView, its rows are superimposed and not all the content of the ViewCell, into the DataTemplate, is displayed.
I don't know what is my error.
Here my code:
<?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="iGuideTest.ExhibitionsPage"
Title = "{Binding titleMenu}">
<ContentPage.Content>
<StackLayout VerticalOptions="Center" HorizontalOptions="Center">
<Label Text="You are in the Exhibitions page" />
<Button Text="Return to LoginPage" Command="{Binding BackCommand}" />
<Label Text="{Binding exhibitionsList.Count}" />
<Button Grid.Row="2" Grid.Column="0" Text="{Binding surname}" Command="{Binding Edit}" />
<ListView x:Name="ListViewCouchbase" ItemsSource="{Binding exhibitionsList}"
>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" TextColor="#05199C" Text="{Binding title}" />
<Label Grid.Row="0" Grid.Column="1" TextColor="#008000" Text="{Binding userId}" />
<Label Grid.Row="1" Grid.Column="1" TextColor="Maroon" Text="{Binding LastUpdated}" />
<Label Grid.Row="1" Grid.Column="0" TextColor="Purple" Text="{Binding surname}" />
<Entry Grid.Row="2" Grid.Column="0" TextColor="Blue" Text="{Binding Id}" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage.Content>
Thanks in advance.
Try to use HasUnevenRows property:
<ListView HasUnevenRows="True">
...
</ListView>
Since you are using a Grid and you have Auto in RowHeight you will be better of setting HasUnevenRows property to true.
Also your grid is of dynamic size on its own, you can set its VerticalOptions to Fill.
Yes, i've been there :)
just set ListView RowHeight="xx" where xx is some double indicating the height.