I am unable to use a grid within a DataTemplate.
Specifically, text does not get rendered when using a grid.
<ListView ItemsSource="{Binding Services}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.ColumnSpan="2" Text="{Binding Name}" />
<Label Grid.Row="1" Grid.Column="0" Text="Labor:" />
<Label Grid.Row="1" Grid.Column="1" Text="{Binding LaborCost}" />
<Label Grid.Row="2" Grid.Column="0" Text="Materials:" />
<Label Grid.Row="2" Grid.Column="1" Text="{Binding Materials, Converter={StaticResource MaterialsToCostConverter}}" />
<Label Grid.Row="3" Grid.ColumnSpan="2" Text="{Binding Description}" />
</Grid>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Any suggestions?
Related
In my Xamarin Forms view, when one row in a grid has a word wrap, it's increasing the row height for all other rows as well. What property can I change to ensure only the affected row has increased row height?
Normal styling:
Styling after wrap on 'Location':
XAML:
<ScrollView>
<StackLayout Padding="10" x:DataType="auctions:VehicleViewModel">
<ActivityIndicator x:Name="ActivitySpinner" IsRunning="True" IsVisible="{Binding IsBusy}" />
<Label Text="{Binding Error}" StyleClass="Error" IsVisible="{Binding ErrorVisible}" />
<Label Text="Basic Details" StyleClass="HeaderGreen" IsVisible="{Binding IsNotBusy}" />
<Grid IsVisible="{Binding IsNotBusy}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Label Text="Model" StyleClass="Label" Grid.Column="0" Grid.Row="0" />
<Label Text="{Binding Vehicle.VehicleModel}" Grid.Column="1" Grid.Row="0" />
<Label Text="Registration" StyleClass="Label" Grid.Column="0" Grid.Row="1" />
<Label Text="{Binding Vehicle.Registration}" Grid.Column="1" Grid.Row="1" />
<Label Text="Year" StyleClass="Label" Grid.Column="0" Grid.Row="2" />
<Label Text="{Binding Vehicle.Year}" Grid.Column="1" Grid.Row="2" />
<Label Text="Mileage (Kms)" StyleClass="Label" Grid.Column="0" Grid.Row="3" />
<Label Text="{Binding Vehicle.Odometer}" Grid.Column="1" Grid.Row="3" />
<Label Text="Supplier" StyleClass="Label" Grid.Column="0" Grid.Row="4" />
<Label Text="{Binding Vehicle.Supplier}" Grid.Column="1" Grid.Row="4" />
<Label Text="Location" StyleClass="Label" Grid.Column="0" Grid.Row="5" />
<Label Text="{Binding Vehicle.Location}" Grid.Column="1" Grid.Row="5" />
<Label Text="Gearbox" StyleClass="Label" Grid.Column="0" Grid.Row="6" />
<Label Text="{Binding Vehicle.GearboxType}" Grid.Column="1" Grid.Row="6" />
<Label Text="Colour" StyleClass="Label" Grid.Column="0" Grid.Row="7" />
<Label Text="{Binding Vehicle.Colour}" Grid.Column="1" Grid.Row="7" />
<Label Text="Interior Colour" StyleClass="Label" Grid.Column="0" Grid.Row="8" />
<Label Text="{Binding Vehicle.InteriorColour}" Grid.Column="1" Grid.Row="8" />
<Label Text="Financed By" StyleClass="Label" Grid.Column="0" Grid.Row="9" />
<Label Text="{Binding Vehicle.FinancedBy}" Grid.Column="1" Grid.Row="9" />
<Label Text="Trade Price" StyleClass="Label" Grid.Column="0" Grid.Row="10" />
<Label Text="{Binding Vehicle.TradePrice, Converter={StaticResource Currency}}" Grid.Column="1" Grid.Row="10" />
<Label Text="Retail Price" StyleClass="Label" Grid.Column="0" Grid.Row="11" />
<Label Text="{Binding Vehicle.RetailPrice, Converter={StaticResource Currency}}" Grid.Column="1" Grid.Row="11" />
<Label Text="New Price" StyleClass="Label" Grid.Column="0" Grid.Row="12" />
<Label Text="{Binding Vehicle.NewPrice, Converter={StaticResource Currency}}" Grid.Column="1" Grid.Row="12" />
</Grid>
Try with defining Auto height:
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
Here's the docs for Xamarin.Forms Grid, check the Rows and columns paragraph.
As stated in the docs, you shold try to ensure that as few rows as possible are set to Auto size. So, use this only for the affected rows.
Hello friends how are you?
I have a problem with a listview and a scroll. It turns out that when I move the scroll up and the list is lost I can no longer return the list down. I really don't know how to explain the problem more clearly, so I uploaded a video that might clarify it a bit more. Thank you for your help and have a great day.
Thanks for the help
Scroll error
Here my code:
<ContentPage x:Name="QuoteDetailContentPage" Title="Detalle cotización" >
<Grid Padding="3" Margin="3">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<ScrollView>
<StackLayout Grid.Row="0" BindingContext="{Binding OpportunityDetailViewModel}">
<ListView
x:Name="QuoteDetailListView"
SeparatorVisibility="Default"
ItemsSource="{Binding OpportunityDetailView}"
IsRefreshing="{Binding IsRefreshing}"
ItemTapped="QuoteDetailListView_ItemTapped"
SelectionMode="None">
<ListView.Header>
<Frame>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Grid.Row="0" Grid.Column="0" Margin="0" Text="Nombre" HorizontalTextAlignment="Center" HorizontalOptions="FillAndExpand" />
<Label Grid.Row="0" Grid.Column="1" Margin="0" Text="Cant." HorizontalTextAlignment="Center" HorizontalOptions="FillAndExpand" />
<Label Grid.Row="0" Grid.Column="2" Margin="0" Text="Precio" HorizontalTextAlignment="Center" HorizontalOptions="FillAndExpand" />
<Label Grid.Row="0" Grid.Column="3" Margin="0" Text="Total" HorizontalTextAlignment="Center" HorizontalOptions="FillAndExpand" />
<!--<Label Grid.Row="0" Grid.Column="4" Margin="0" Text="Acción" HorizontalTextAlignment="Center" HorizontalOptions="Fill" />-->
<BoxView Grid.Row="1" Grid.ColumnSpan="4" HeightRequest="1" BackgroundColor="LightGray" HorizontalOptions="FillAndExpand"/>
</Grid>
</Frame>
</ListView.Header>
<ListView.ItemTemplate >
<DataTemplate >
<ViewCell >
<ViewCell.ContextActions>
<MenuItem x:Name="MenuItemEdit" Clicked="MenuItemEdit_Clicked" Text="Editar" CommandParameter="{Binding .}" IsEnabled="{Binding IsMenuEnabled}">
<!--<MenuItem.IconImageSource>
<FontImageSource Glyph="Aceptar" FontFamily="{StaticResource FontAwesomeSolid}" Color="#5694ff" />
</MenuItem.IconImageSource>-->
</MenuItem>
<MenuItem x:Name="MenuItemDelete" Clicked="MenuItemDelete_Clicked" Text="Eliminar" IsDestructive="True" CommandParameter="{Binding .}" 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="5*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Grid.Row="0" Grid.Column="0" Margin="0" Text="{Binding ItemName}" BackgroundColor="Transparent" VerticalTextAlignment="Center" HorizontalTextAlignment="Start" HorizontalOptions="FillAndExpand" LineBreakMode="CharacterWrap"/>
<Label Grid.Row="0" Grid.Column="1" Margin="0" Text="{Binding Quantity}" BackgroundColor="Transparent" VerticalTextAlignment="Center" HorizontalTextAlignment="End" HorizontalOptions="FillAndExpand"/>
<Label Grid.Row="0" Grid.Column="2" Margin="0" Text="{Binding Price,Converter={StaticResource CurrencyCultureConverter}}" BackgroundColor="Transparent" VerticalTextAlignment="Center" HorizontalTextAlignment="End" HorizontalOptions="FillAndExpand" />
<Label Grid.Row="0" Grid.Column="3" Margin="0" Text="{Binding Total,Converter={StaticResource CurrencyCultureConverter}}" BackgroundColor="Transparent" VerticalTextAlignment="Center" HorizontalTextAlignment="End" HorizontalOptions="FillAndExpand"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.Footer>
<StackLayout BindingContext="{Binding OpportunityDetailViewModel}">
<Grid BindingContext="{Binding OpportunityDetailViewModel}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="7*" />
<ColumnDefinition Width="3*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Grid.Row="0" Grid.Column="0" Margin="0" Text="Total" HorizontalTextAlignment="End" Style="{StaticResource labelTitleStyle}"/>
<Label x:Name="TotalLabel" Grid.Row="0" Grid.Column="1" Margin="0" Text="{Binding DetailTotal}" HorizontalTextAlignment="End" Style="{StaticResource labelTitleStyle}" />
</Grid>
</StackLayout>
</ListView.Footer>
</ListView>
</StackLayout>
</ScrollView>
<StackLayout Grid.Row="1">
<Button x:Name="AddItemButton" Text="Agregar item" Clicked="AddItemButton_Clicked" />
</StackLayout>
</Grid>
</ContentPage>
Simply - my binding data will dictate what col / row to put it in..
I dont want to write multiple frame layout code into XAML - but rather write the fame once in page level or app level resource, then generate an instance of this - populate it - and put into the grid specified in the binding.
The bit where it says TASK 1 is the repeating element frame.
<Grid Margin="0" Padding="0" ColumnSpacing="2" RowSpacing="2" IsVisible="true">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*" />
<ColumnDefinition Width="5*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- TASK 1-->
<Frame CornerRadius="5"
Grid.Row="0"
Grid.Column="0"
BackgroundColor="White"
HorizontalOptions="Fill" VerticalOptions="Fill"
HasShadow="True" Padding="0">
<Grid Margin="0" Padding="10" ColumnSpacing="0" RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*" />
<ColumnDefinition Width="5*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="1" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Image Source="tbt_logo.png"
WidthRequest="64" HeightRequest="64"
Grid.Row="0" Grid.RowSpan="2" Grid.Column="0"
HorizontalOptions="Start"
/>
<Label Text="16"
Grid.Row="0" Grid.Column="1"
TextColor="Green"
FontSize="42"
Margin="0,0,0,-20"
FontAttributes="Bold"
VerticalTextAlignment="Start"
HorizontalTextAlignment="End"
/>
<Label Text="Files sent"
Grid.Row="1" Grid.Column="1"
TextColor="Green"
FontSize="Small"
VerticalTextAlignment="Start"
HorizontalOptions="End"
VerticalOptions="End"
/>
<BoxView Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" BackgroundColor="DarkGray" Margin="0,10,0,-10"></BoxView>
<Label Text="View Info"
Grid.Row="3" Grid.Column="0"
TextColor="Green"
Margin="0,0"
FontSize="Small"
VerticalTextAlignment="End"
HorizontalOptions="Start"
/>
<Image Source="tbt_logo.png"
WidthRequest="16" HeightRequest="16"
HorizontalOptions="End"
VerticalOptions="End"
Grid.Row="3" Grid.Column="1"
/>
</Grid>
</Frame>
<!-- TASK 2 -->
<Frame CornerRadius="5"
Grid.Row="0"
Grid.Column="1"
BackgroundColor="LightBlue"
HorizontalOptions="Fill" VerticalOptions="Fill"
HasShadow="True" Padding="0">
<Grid Margin="0" Padding="10" ColumnSpacing="0" RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*" />
<ColumnDefinition Width="5*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="1" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Image Source="tbt_logo.png"
WidthRequest="64" HeightRequest="64"
Grid.Row="0" Grid.RowSpan="2" Grid.Column="0"
HorizontalOptions="Start"
/>
<Label Text="16"
Grid.Row="0" Grid.Column="1"
TextColor="Green"
FontSize="42"
Margin="0,0,0,-20"
FontAttributes="Bold"
VerticalTextAlignment="Start"
HorizontalTextAlignment="End"
/>
<Label Text="Files sent"
Grid.Row="1" Grid.Column="1"
TextColor="Green"
FontSize="Small"
VerticalTextAlignment="Start"
HorizontalOptions="End"
VerticalOptions="End"
/>
<BoxView Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" BackgroundColor="DarkGray" Margin="0,10,0,-10"></BoxView>
<Label Text="View Info"
Grid.Row="3" Grid.Column="0"
TextColor="Green"
Margin="0,0"
FontSize="Small"
VerticalTextAlignment="End"
HorizontalOptions="Start"
/>
<Image Source="tbt_logo.png"
WidthRequest="16" HeightRequest="16"
HorizontalOptions="End"
VerticalOptions="End"
Grid.Row="3" Grid.Column="1"
/>
</Grid>
</Frame>
</Grid>
</grid>
So, from the advisement of Sparsha Bhattarai, I created the frame template that i want to reuse.
FrameTemplate.Xaml
<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MMPTaskStats.Views.FrameTemplate">
<ContentView.Content>
<Frame CornerRadius="5" x:Name="task_color"
Grid.Row="0"
Grid.Column="0"
BackgroundColor="White"
HorizontalOptions="Fill" VerticalOptions="Fill"
HasShadow="True" Padding="0">
<Grid Margin="0" Padding="10" ColumnSpacing="0" RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="100*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="*" />
<RowDefinition Height="30" />
<RowDefinition Height="25" />
<RowDefinition Height="1" />
<RowDefinition Height="28" />
</Grid.RowDefinitions>
<Label Text="/ of 12"
x:Name="task_locale"
Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"
TextColor="White"
FontSize="Small"
VerticalTextAlignment="Start"
HorizontalOptions="Start"
VerticalOptions="Start" />
<Image x:Name="task_icon"
Source="tbt_logo.png"
HeightRequest="60" WidthRequest="50"
Grid.Row="1" Grid.RowSpan="3" Grid.Column="0"
VerticalOptions="Center" />
<Label Text="16"
x:Name="task_headline"
Grid.Row="1" Grid.Column="1"
TextColor="White"
FontSize="27"
Margin="0,0,0,-20"
FontAttributes="Bold"
VerticalTextAlignment="Start"
HorizontalTextAlignment="End" />
<Label Text="/ of 12"
x:Name="task_subline"
Grid.Row="2" Grid.Column="1"
TextColor="White"
FontSize="Small"
VerticalTextAlignment="End"
HorizontalOptions="End"
VerticalOptions="End" />
<Label Text="Files sent"
x:Name="task_status"
Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2"
TextColor="White"
FontSize="Small"
VerticalTextAlignment="Start"
HorizontalOptions="End"
VerticalOptions="End" />
<BoxView Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2" BackgroundColor="White" Margin="0,1,0,-1"></BoxView>
<Label Text="View Info"
Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="2"
TextColor="White"
Margin="0,0"
FontSize="Small"
VerticalTextAlignment="End"
VerticalOptions="End"
HorizontalOptions="Start"
/>
<Image Source="tbt_logo.png"
WidthRequest="16" HeightRequest="16"
HorizontalOptions="End"
VerticalOptions="End"
Grid.Row="5" Grid.Column="1"
/>
</Grid>
</Frame>
</ContentView.Content>
</ContentView>
Then the codeBehind for it looked like this.
namespace Project.Views
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class FrameTemplate : ContentView
{
public FrameTemplate(string locale,string headline, string subHeadline, string icon, Color bgcolor, string status) : this()
{
//Here i have initialized the view from constructor, but you can simply set the binding of the view and set the properties. Do look into it. You can just as easily use the view in xaml but it will require a parameterless constructor. So, binding is important.
task_locale.Text = locale;
task_headline.Text = headline;
task_subline.Text = subHeadline;
task_icon.Source = icon;
task_color.BackgroundColor = bgcolor;
task_status.Text = status;
}
public FrameTemplate()
{
InitializeComponent();
}
}
}
THEN, in the page / view I want this to appear
var frame = new FrameTemplate("UK TP Stats", "999999", "/ of 999999", "tick.png", Color.Green, "Sent");
Grid.SetColumn(frame, 0);
Grid.SetRow(frame, 0);
MainGrid.Children.Add(frame);
This worked for me, which was great, I can now replicate this to do similar layouts etc as needed.
My Xamarin.Forms project is a Master/Detail template too, just in case anybody wanted to know :)
I have a ListView that contains a grid with some Labels, I want to put a separating line between two labales, but in doing so I have to indicate to the BoxView in what row of the grid it should go, and in doing so, the BoxView covers the entire size of the grid. line, is there any way that only a thin line is drawn and not the thick blue line?
<?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:abstractions="clr-namespace:RoundedBoxView.Forms.Plugin.Abstractions;assembly=RoundedBoxView.Forms.Plugin.Abstractions"
x:Class="FortiaApp.Views.frmMovimientos">
<ContentPage.Content>
<StackLayout
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand">
<Image x:Name="imgFortia" Source="fortia" HeightRequest="40"></Image>
<AbsoluteLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Image AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" Source="Fondo1" Aspect="AspectFill"></Image>
<ScrollView AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
<ListView
BackgroundColor="Transparent"
HasUnevenRows="True"
x:Name="lsvTabla"
SeparatorVisibility="None"
>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Frame Padding="2" Margin="7,10,7,10" HeightRequest="100">
<StackLayout>
<Grid
BackgroundColor="Transparent"
>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label
Grid.Row="0"
Grid.Column="0"
TextColor="#969696"
FontAttributes="Bold"
HorizontalOptions="Center"
Text="{Binding Comercio}"
/>
<Label
Grid.Row="1"
Grid.Column="0"
Grid.ColumnSpan="2"
Grid.RowSpan="3"
TextColor="#969696"
FontAttributes="Bold"
HorizontalOptions="Center"
Text="{Binding DescripcionImporte}"
/>
<Label
Grid.Row="0"
Grid.Column="1"
TextColor="#969696"
FontAttributes="Bold"
HorizontalOptions="Center"
Text="{Binding CodigoAutorizacion}"
/>
<Label
Grid.Row="1"
Grid.Column="1"
TextColor="#969696"
FontSize="Large"
HorizontalOptions="Center"
Text="{Binding Importe}"
/>
<BoxView BackgroundColor="blue" HorizontalOptions="Fill" Grid.Row="3" Grid.ColumnSpan="2" HeightRequest="1"/>
<Label
Grid.Row="4"
Grid.Column="1"
TextColor="#005a9f"
FontSize="Small"
HorizontalOptions="Center"
Text="{Binding Fecha}"
/>
</Grid>
</StackLayout>
</Frame>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ScrollView>
</AbsoluteLayout>
</StackLayout>
</ContentPage.Content>
</ContentPage>
I need it to be a very thin line, but a rectangle is too wide, please, I hope someone can help me
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="5"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Label Grid.Row="0" Grid.Column="0" />
<Label Grid.Row="0" Grid.Column="1" />
<Label Grid.Row="1" Grid.Column="1" />
<BoxView Grid.Row="2" Grid.Columnspan="2"
HorizontalOptions="FillAndExpand" VerticallOptions="FillAndExpand" />
<Label Grid.Row="3" Grid.Column="1" />
</Grid>
I have different views along with ListView on my screen. ListView almost fills the screen and elements below the ListView are not visible. I have set HasUnEvenRows=True because each list item has different height.
<StackLayout Spacing="0">
<local:PageHeader></local:PageHeader>
<Grid Padding="25,15,25,10" Grid.RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Label Grid.Column="0" Grid.Row="0" VerticalOptions="CenterAndExpand" Grid.ColumnSpan="1" Text="{local:Translate FROM_COLON}" FontSize="18"></Label>
<StackLayout Orientation="Vertical" Grid.Column="1" Grid.Row="0" Grid.RowSpan="3" Grid.ColumnSpan="3">
<Label Text="{Binding Group}" TextColor="{x:Static local:ColorUtils.DarkBlue}" FontStyle="Bold" FontSize="18"></Label>
<Label Text="{Binding Sender, StringFormat='<{0}>'}" TextColor="{x:Static local:ColorUtils.DarkBlue}" FontSize="18"></Label>
</StackLayout>
<ContentView Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="3" Padding="0,15,0,0">
<Button Text="{Binding DetailsButtonTitle}" Clicked="OnDetailButtonClick" BackgroundColor="Transparent" TextColor="{x:Static local:ColorUtils.DarkBlue}" HorizontalOptions="Start" VerticalOptions="StartAndExpand" Padding="0"></Button>
</ContentView>
<Button Grid.Column="3" Grid.Row="1" Grid.RowSpan="{Binding ReplyButtonRowSpan}" Text="{local:Translate REPLY}" Image="reply_arrow_small" BackgroundColor="Transparent" TextColor="{x:Static local:ColorUtils.Gray}" HorizontalOptions="End" VerticalOptions="EndAndExpand" Padding="0" FontSize="13" WidthRequest="65" Clicked="OnReplyButtonClick"></Button>
<Label Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="3" IsVisible="{Binding IsDetailShown, Converter={local:NotConverter Convert}}" Text="{Binding HumanizedDateFormat}" TextColor="{x:Static local:ColorUtils.Gray}"></Label>
<ContentView Padding="0,0,0,5" Grid.Column="0" Grid.Row="2" IsVisible="{Binding IsDetailShown}" >
<Label Text="{local:Translate FROM_COLON}" TextColor="{x:Static local:ColorUtils.Gray}" FontStyle="Bold" />
</ContentView>
<StackLayout Orientation="Horizontal" Grid.Column="1" Grid.Row="2" Grid.RowSpan="2" Grid.ColumnSpan="3" IsVisible="{Binding IsDetailShown}">
<Label VerticalTextAlignment="Start" Text="{Binding Group}" TextColor="{x:Static local:ColorUtils.Gray}" FontStyle="Bold" />
<Label VerticalTextAlignment="Start" Text="{Binding Sender, StringFormat='<{0}>'}" TextColor="{x:Static local:ColorUtils.Gray}"></Label>
</StackLayout>
<Label Grid.Column="0" Grid.Row="4" Grid.RowSpan="1" IsVisible="{Binding IsDetailShown}" Text="{local:Translate TO_COLON}" TextColor="{x:Static local:ColorUtils.Gray}" FontStyle="Bold" />
<ListView x:Name="ListToAddresses" Grid.RowSpan="1" Grid.Column="1" Grid.Row="4" Grid.ColumnSpan="3" IsVisible="{Binding IsDetailShown}" HeightRequest="{Binding ListHeight}" VerticalOptions="Start" HasUnevenRows="True" CachingStrategy="RecycleElement" ItemsSource="{Binding Recipients}" SeparatorVisibility="None">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell IsEnabled="False">
<StackLayout VerticalOptions="Start" Padding="0,0,0,12" >
<Label Text="{Binding Path=Key}" VerticalTextAlignment="Start" TextColor="{x:Static local:ColorUtils.Gray}" FontStyle="Bold" VerticalOptions="Start" />
<Label Text="{Binding Path=Value}" VerticalTextAlignment="Start" TextColor="{x:Static local:ColorUtils.Gray}" VerticalOptions="Start" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ContentView Padding="0,5,0,0" Grid.Column="0" Grid.Row="5" IsVisible="{Binding IsDetailShown}">
<Label Text="{local:Translate DATE_COLON}" TextColor="{x:Static local:ColorUtils.Gray}" FontStyle="Bold" />
</ContentView>
<Label Grid.Column="1" Grid.Row="5" Grid.ColumnSpan="3" VerticalTextAlignment="End" IsVisible="{Binding IsDetailShown}" Text="{Binding LongDateFormat}" TextColor="{x:Static local:ColorUtils.Gray}"></Label>
</Grid>
<BoxView HeightRequest="1" BackgroundColor="{x:Static local:ColorUtils.LightGray}"></BoxView>
<ContentView Padding="25,15,25,0">
<Label Text="{Binding Description}" FontSize="18"></Label>
</ContentView>
</StackLayout>