I have xamarin forms app.I have a screen which looks nice on iphone 6.But in Iphone 5 , it look like compressed.How to solve this design issue? In bigger devices the design works fine.
My XAML
<Grid RowSpacing="1" x:Name="DetailsCardview" IsVisible="False">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="0.7*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Frame HorizontalOptions="FillAndExpand" HasShadow="False" CornerRadius="7" BackgroundColor="#4D2F4F4F" BorderColor="#772F4F4F" Margin="10,2,10,2">
<StackLayout Orientation="Vertical" Padding="0">
<StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand" Padding="0" Margin="0,0,0,10">
<Image Source="invoiceby.png" HeightRequest="25" VerticalOptions="Center"></Image>
<Label Text="Invoice Details" TextColor="LightGreen" VerticalTextAlignment="Center">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="iOS" Value="Montserrat-Bold" />
<On Platform="Android" Value="Montserrat-Bold.ttf#Montserrat-Bold" />
</OnPlatform>
</Label.FontFamily>
</Label>
</StackLayout>
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackLayout Grid.Row="0" Grid.Column="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand" >
<Label FontSize="Micro" Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
<Label Text="Invoice No" TextColor="LightBlue" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="0" Grid.Column="1" >
<Label Text=":" TextColor="White" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="0" Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0">
<Label x:Name="InvoiceNumber" Text="-" MaxLines="1" TextColor="White" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand">
</Label>
</StackLayout>
<StackLayout Grid.Row="1" Grid.Column="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Label FontSize="Micro" Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
<Label Text="Customer" TextColor="LightBlue" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="1" Grid.Column="1" >
<Label Text=":" TextColor="White" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="1" Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0">
<Label x:Name="CustomerName" Text="-" MaxLines="1" TextColor="White" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand">
</Label>
</StackLayout>
<StackLayout Grid.Row="2" Grid.Column="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Label FontSize="Micro" Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
<Label Text="Sold By" TextColor="LightBlue" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="2" Grid.Column="1">
<Label Text=":" TextColor="White" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="2" Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0">
<Label x:Name="SoldBy" Text="-" MaxLines="1" TextColor="White" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand">
</Label>
</StackLayout>
<StackLayout Grid.Row="3" Grid.Column="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Label FontSize="Micro" Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
<Label Text="Sold On" TextColor="LightBlue" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="3" Grid.Column="1">
<Label Text=":" TextColor="White" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="3" Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0" >
<Label Text="-" x:Name="SoldOn" MaxLines="2" TextColor="White" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand">
</Label>
</StackLayout>
<StackLayout Grid.Row="4" Grid.Column="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Label FontSize="Micro" Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
<Label Text="Invoiced By" TextColor="LightBlue" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="4" Grid.Column="1">
<Label Text=":" TextColor="White" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="4" Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0">
<Label Text="-" x:Name="InvoicedBy" MaxLines="1" TextColor="White" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand">
</Label>
</StackLayout>
<StackLayout Grid.Row="5" Grid.Column="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand"
<Label FontSize="Micro" Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
<Label Text="Referred By" TextColor="LightBlue" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="5" Grid.Column="1">
<Label Text=":" TextColor="White" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="5" Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0" >
<Label Text="-" x:Name="ReferredBy" MaxLines="1" TextColor="White" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand">
</Label>
</StackLayout>
<StackLayout Grid.Row="6" Grid.Column="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Label FontSize="Micro" Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
<Label Text="Current Carrier" TextColor="LightBlue" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="6" Grid.Column="1">
<Label Text=":" TextColor="White" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="6" Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0">
<Label Text="-" x:Name="CurrentCarrier" MaxLines="1" TextColor="White" VerticalOptions="Center" HorizontalOptions="StartAndExpand">
</Label>
</StackLayout>
</Grid>
</StackLayout>
</Frame>
</Grid>
<Grid Grid.Row="1">
<Frame HorizontalOptions="FillAndExpand" HasShadow="False" CornerRadius="7" BackgroundColor="#4D2F4F4F" BorderColor="#772F4F4F" Margin="10,2,10,7">
<StackLayout Orientation="Vertical" Padding="0">
<StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand" Padding="0" Margin="0,0,0,10">
<Image Source="tracking.png" HeightRequest="25" VerticalOptions="Center"></Image>
<Label Text="Tracking Details" TextColor="LightGreen" VerticalTextAlignment="Center">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="iOS" Value="Montserrat-Bold" />
<On Platform="Android" Value="Montserrat-Bold.ttf#Montserrat-Bold" />
</OnPlatform>
</Label.FontFamily>
</Label>
</StackLayout>
<Grid >
<Grid.RowDefinitions >
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackLayout Grid.Row="0" Grid.Column="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Label FontSize="Micro" Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
<Label Text="Tracking No" TextColor="LightBlue" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="0" Grid.Column="1" >
<Label Text=":" TextColor="White" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="0" Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0">
<Label Text="{Binding TrackingNo}" x:Name="TrackingNo" TextColor="White" MaxLines="1" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand">
</Label>
</StackLayout>
<StackLayout Grid.Row="1" Grid.Column="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Label FontSize="Micro" Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
<Label Text="Product Name" TextColor="LightBlue" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="1" Grid.Column="1" >
<Label Text=":" TextColor="White" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="1" Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0">
<Label Text="{Binding ProductName}" x:Name="ProductName" MaxLines="2" TextColor="White" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand">
</Label>
</StackLayout>
<StackLayout Grid.Column="0" Grid.Row="2" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Label FontSize="Micro" Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
<Label Text="Comments" TextColor="LightBlue" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Column="1" Grid.Row="2" >
<Label Text=":" TextColor="White" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="2" Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0">
<Label Text="{Binding InvoiceComments}" x:Name="Comments" MaxLines="1" TextColor="White" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand">
</Label>
</StackLayout>
<StackLayout Grid.Column="0" Grid.Row="3" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Label FontSize="Micro" Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
<Label Text="Refund" TextColor="LightBlue" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Column="1" Grid.Row="3" >
<Label Text=":" TextColor="White" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="3" Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0">
<Label Text="{Binding Refund}" x:Name="Refund" TextColor="White" MaxLines="1" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand">
</Label>
</StackLayout>
<StackLayout Grid.Column="0" Grid.Row="4" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Label FontSize="Micro" Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
<Label Text="Quantity" TextColor="LightBlue" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Column="1" Grid.Row="4" >
<Label Text=":" TextColor="White" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="4" Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0">
<Label Text="{Binding Qty}" x:Name="Quantity" TextColor="White" VerticalTextAlignment="Center" MaxLines="1" HorizontalOptions="StartAndExpand">
</Label>
</StackLayout>
</Grid>
</StackLayout>
</Frame>
</Grid>
<Frame Grid.Row="2" HorizontalOptions="FillAndExpand" IsClippedToBounds="True" HasShadow="False" CornerRadius="7" BackgroundColor="Transparent" BorderColor="Transparent" Margin="10,2,10,2" Padding="5">
<Frame BackgroundColor="Transparent" HasShadow="False" HorizontalOptions="FillAndExpand" BorderColor="Green" IsClippedToBounds="True" Padding="0" Margin="10,0,10,0">
<Frame.CornerRadius>
<OnPlatform x:TypeArguments="x:Single">
<On Platform="iOS" Value="35" />
<On Platform="Android" Value="40" />
</OnPlatform>
</Frame.CornerRadius>
<Grid >
<Image Source="dialerbg2.png" Aspect="AspectFill" HeightRequest="30"></Image>
<Grid BackgroundColor="Transparent" Padding="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="60"/>
</Grid.ColumnDefinitions>
<StackLayout Grid.Column="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand" BackgroundColor="Transparent">
<Image Source="cellphone.png" HorizontalOptions="Start" HeightRequest="25" VerticalOptions="Center"></Image>
<Label Grid.Column="0" Text="Phone" HorizontalTextAlignment="Start" VerticalTextAlignment="Center" TextColor="LightBlue" >
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="iOS" Value="Montserrat-Regular" />
<On Platform="Android" Value="Montserrat-Regular.ttf#Montserrat-Regular" />
</OnPlatform>
</Label.FontFamily>
</Label>
</StackLayout>
<Label Grid.Column="1" Text=":" VerticalTextAlignment="Center" TextColor="White" FontSize="Small">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="iOS" Value="Montserrat-Regular" />
<On Platform="Android" Value="Montserrat-Regular.ttf#Montserrat-Regular" />
</OnPlatform>
</Label.FontFamily>
</Label>
<Label x:Name="PhoneNumber" Grid.Column="2" Text="+919605209575" VerticalTextAlignment="Center" TextColor="White" >
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="iOS" Value="Montserrat-Regular" />
<On Platform="Android" Value="Montserrat-Regular.ttf#Montserrat-Regular" />
</OnPlatform>
</Label.FontFamily>
</Label>
<Image Source="caller.png" HorizontalOptions="EndAndExpand" Grid.Column="3"></Image>
</Grid>
</Grid>
</Frame>
</Frame>
</Grid>
How to make this similar on every screen size? Should I add scrollview? Iam bit confused. Any help is appreciated.
You should wrap your design within a ScrollView.
In smaller devices your list will not have sufficient space to display all elements, so it will resize and adjust to fill the available space.
can you give me some guidlines about setting diffrent text sizes
according to device screen size? I think that will solve my problem
For example:
nfloat screenSize = UIScreen.MainScreen.Bounds.Size.Height;
// 5, 5s, SE, 5C 320 * 568
nfloat iphone5sHeight = 568;
if (screenSize <= iphone5sHeight)
{
//set the fontSize
}
else {
//set the fontSize for higher screen
}
You can have a look at these two threads for more idea: different-uifont-sizes-for-different-ios-devices-in-swift and how-to-ios-item-and-font-sizes-scaling-as-screen-size
Related
Im unable to navigate the content page when i click on button using xamarin forms. It is working on Android but not working in IOS.
Kindly check the below code.
ButtonClick Event
Navigation.PushAsync(new LeaveRequestAddEdit("insert"));
The xaml code is
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
<ContentPage.Content>
<StackLayout>
<Frame Padding="5" Margin="5,5,5,5" CornerRadius="10" HasShadow="True" BackgroundColor="White" BorderColor="LightBlue">
<Grid BackgroundColor="White" x:Name="LeaveRequestContainer">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Row="0" Grid.Column="0" Orientation="Horizontal">
<RadioButton x:Name="OnedayRadioBtn" Clicked="OnedayRadioBtn_Clicked" />
<Label Text="One Day" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>
</StackLayout>
<StackLayout Grid.Row="0" Grid.Column="1" Orientation="Horizontal">
<RadioButton x:Name="MultipledaysRadioBtn" Clicked="MultipledaysRadioBtn_Clicked"/>
<Label Text="Multiple Days" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>
</StackLayout>
<Label x:Name="selectlable" Text="Select :" Margin="50,0,0,0" IsVisible="False" Grid.Row="1" Grid.Column="0" HorizontalOptions="StartAndExpand" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
<DatePicker x:Name="selectdate" IsVisible="False" Date="{Binding FromDate,Mode=TwoWay}" Format="dd/MM/yyy" Grid.Row="1" Grid.Column="1" HorizontalOptions="StartAndExpand" />
<Label x:Name="fromdatelabel" Text="From Date :" IsVisible="False" Margin="50,0,0,0" Grid.Row="1" Grid.Column="0" HorizontalOptions="StartAndExpand" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
<DatePicker x:Name="fromdate" IsVisible="False" DateSelected="fromdate_DateSelected" Date="{Binding FromDate,Mode=TwoWay}" Format="dd/MM/yyy" Grid.Row="1" Grid.Column="1" HorizontalOptions="StartAndExpand"/>
<Label x:Name="todatelable" Text="To Date :" IsVisible="False" Margin="50,0,0,0" Grid.Row="2" Grid.Column="0" HorizontalOptions="StartAndExpand" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
<DatePicker x:Name="Todate" IsVisible="False" Date="{Binding ToDate,Mode=TwoWay}" Format="dd/MM/yyy" Grid.Row="2" Grid.Column="1" HorizontalOptions="StartAndExpand"/>
<Frame CornerRadius="10" Margin="0" Padding="0" BorderColor="LightBlue" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" >
<local1:ExtendedEditorControl x:Name="Reason" Placeholder="Enter Reason Here" IsExpandable="True" Text="{Binding ReasonForLeave,Mode=TwoWay}" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" MaxLength="250" />
</Frame>
<StackLayout Orientation="Vertical" x:Name="ActionNoteStack" IsVisible="False" Grid.Row="4" Grid.ColumnSpan="2" Grid.RowSpan="2">
<Label x:Name="title" IsVisible="False" Text="Action Notes :" TextColor="Black" HorizontalOptions="Start" VerticalOptions="Center" />
<!--<Label Text="Action Notes :" WidthRequest="400" VerticalTextAlignment="Center" HorizontalOptions="FillAndExpand" TextColor="Blue"/>-->
<Frame x:Name="actionframe" IsVisible="False" CornerRadius="10" Margin="0" BorderColor="LightBlue" Padding="0">
<Label x:Name="actionNote" IsVisible="False" Text="{Binding ActionNotes,Mode=TwoWay}" Margin="5" VerticalOptions="Center" HorizontalOptions="FillAndExpand" />
</Frame>
</StackLayout>
</Grid>
</Frame>
<StackLayout Margin="5,0,5,5" Orientation="Horizontal" VerticalOptions="End">
<Button Text="Save" x:Name="btnSave" BackgroundColor="#6559D8" CornerRadius="10" TextColor="White" HorizontalOptions="FillAndExpand" Clicked="btnSave_Clicked"/>
<Button Text="Cancel" x:Name="btnCancel" Clicked="btnCancel_Clicked" BackgroundColor="Gray" CornerRadius="10" TextColor="White" HorizontalOptions="FillAndExpand"/>
</StackLayout>
</StackLayout>
</ContentPage.Content>
</ContentPage>
Kindly help on this. I'm new to Xamarin forms
You can replace the Clicked event in the RadioButton with the CheckedChanged event to make it work.
I have a bug in the page display using a listview so I started migrating from listview to collectionview, but...
This is the XAML code with the collection View, I dont know why when the ItemSource dont have any data, the empty view is not shown.
<StackLayout Style="{StaticResource PageLayout}">
<StackLayout VerticalOptions="CenterAndExpand" IsVisible="{Binding LoadingIndicator}">
<ActivityIndicator IsRunning="True" VerticalOptions="Center" HorizontalOptions="Center"/>
</StackLayout>
<StackLayout VerticalOptions="FillAndExpand" IsVisible="{Binding ShowContent}">
<CollectionView ItemsSource="{Binding Items}" VerticalOptions="FillAndExpand" SelectionMode="Single" SelectionChanged="CollectionView_SelectionChanged" Style="{StaticResource CollectionViewChecklistDefault}">
<CollectionView.Header>
<StackLayout HeightRequest="5">
</StackLayout>
</CollectionView.Header>
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid ColumnSpacing="0" RowSpacing="0" Margin="0" Padding="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="25" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="40" />
<RowDefinition Height="10" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="37*" />
<ColumnDefinition Width="33*" />
<ColumnDefinition Width="30*" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="1" Text="{Binding APP_ID}" IsVisible="False"/>
<BoxView Grid.Row="0" Grid.Column="0" Grid.RowSpan="8" Grid.ColumnSpan="3" Style="{StaticResource ListBox}"/>
<Image Grid.Row="0" Grid.Column="0" Aspect="AspectFit" Style="{StaticResource ListImage}">
<Image.Source>
<FontImageSource Glyph="" FontFamily="FontAwesomeSolid" Color="#343a40"></FontImageSource>
</Image.Source>
</Image>
<Label Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Text="{Binding OBSERVATION_TYPE_NAME}" Style="{StaticResource ListLabelBold}"/>
<Label Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" Style="{StaticResource PreviewLabel}">
<Label.FormattedText>
<FormattedString>
<Span Text="{Binding Traductions[DATE], Source={RelativeSource AncestorType={x:Type viewModel:ObservationCloseListViewModel}}, StringFormat='\{0}:'}" FontAttributes="Bold" TextTransform="Uppercase" TextColor="DarkGray"/>
<Span Text="{Binding OBSERVATION_DATE, StringFormat=' \{0:dd MMM yyyy}'}"/>
</FormattedString>
</Label.FormattedText>
</Label>
<Label Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3" Style="{StaticResource PreviewLabel}">
<Label.FormattedText>
<FormattedString>
<Span Text="{Binding Traductions[COMPANY], Source={RelativeSource AncestorType={x:Type viewModel:ObservationCloseListViewModel}}, StringFormat='\{0}: '}" FontAttributes="Bold" TextTransform="Uppercase" TextColor="DarkGray"/>
<Span Text="{Binding COMPANY_NAME, StringFormat=' \{0}'}"/>
</FormattedString>
</Label.FormattedText>
</Label>
<Label Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3" Style="{StaticResource PreviewLabel}">
<Label.FormattedText>
<FormattedString>
<Span Text="{Binding Traductions[WORKPLACE], Source={RelativeSource AncestorType={x:Type viewModel:ObservationCloseListViewModel}}, StringFormat='\{0}: '}" FontAttributes="Bold" TextTransform="Uppercase" TextColor="DarkGray"/>
<Span Text="{Binding WORKPLACE_NAME, StringFormat=' \{0}'}"/>
</FormattedString>
</Label.FormattedText>
</Label>
<Label Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="3" Style="{StaticResource PreviewLabel}">
<Label.FormattedText>
<FormattedString>
<Span Text="{Binding Traductions[SECTOR], Source={RelativeSource AncestorType={x:Type viewModel:ObservationCloseListViewModel}}, StringFormat='\{0}: '}" FontAttributes="Bold" TextTransform="Uppercase" TextColor="DarkGray"/>
<Span Text="{Binding SECTOR_NAME, StringFormat=' \{0}'}"/>
</FormattedString>
</Label.FormattedText>
</Label>
<Label Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="3" Style="{StaticResource PreviewLabel}">
<Label.FormattedText>
<FormattedString>
<Span Text="{Binding Traductions[FOLLOW_UP_DEPARTMENT], Source={RelativeSource AncestorType={x:Type viewModel:ObservationCloseListViewModel}}, StringFormat='\{0}: '}" FontAttributes="Bold" TextTransform="Uppercase" TextColor="DarkGray"/>
<Span Text="{Binding FOLLOW_DEPARTMENT_NAME, StringFormat=' \{0}'}"/>
</FormattedString>
</Label.FormattedText>
</Label>
<Label Grid.Row="6" Grid.Column="0" Grid.ColumnSpan="3" Style="{StaticResource PreviewLabel}">
<Label.FormattedText>
<FormattedString>
<Span Text="{Binding Traductions[DESCRIPTION], Source={RelativeSource AncestorType={x:Type viewModel:ObservationCloseListViewModel}}, StringFormat='\{0}: '}" FontAttributes="Bold" TextTransform="Uppercase" TextColor="DarkGray"/>
<Span Text="{Binding OBSERVATION_DESCRIPTION, StringFormat=' \{0}'}"/>
</FormattedString>
</Label.FormattedText>
</Label>
<Label Grid.Row="7" Grid.Column="0" Grid.ColumnSpan="3" Text="{Binding Traductions[CLOSE_OBSERVATION], Source={RelativeSource AncestorType={x:Type viewModel:ObservationCloseListViewModel}}}" Style="{StaticResource ListValueGreenEnd}" />
<Image Grid.Row="7" Grid.Column="2" Aspect="AspectFit" Style="{StaticResource ListImageArrow}">
<Image.Source>
<FontImageSource Glyph="" FontFamily="FontAwesomeSolid" Color="#7ca04b"></FontImageSource>
</Image.Source>
</Image>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
<CollectionView.EmptyView>
<StackLayout VerticalOptions="CenterAndExpand">
<Label Text="{Binding Traductions[THERE_ARE_NO_OBSERVATIONS], Source={RelativeSource AncestorType={x:Type viewModel:ObservationCloseListViewModel}}}" Style="{StaticResource ListNotItemsFound}"/>
<Label Text="TEST"/>
</StackLayout>
</CollectionView.EmptyView>
</CollectionView>
</StackLayout>
</StackLayout>
This is how it shows with collection view (empty). I put an extra label with TEST
This is how it has to be
The root cause of the issue you faced lays in usage of CollectionView.Header. But that's not your mistake. It is a bug of CollectionView: EmptyView does not appear when Header is used.
It had been already reported to Xamarin.Forms developers. You can track the progress here.
I did some experiments. The only way I can get this symptom to happen is if {Binding ShowContent} fails to return True.
I believe the problem isn't the CollectionView. Its the visibility of the surrounding StackLayout.
To verify:
Replace IsVisible="{Binding ShowContent}" with IsVisible="True".
If that makes EmptyView show up, then check these possible causes:
BindingContext. (In a comment, you show what looks like correct code. Double-check.)
Proper declaration of ShowContent, to inform XAML of changes:
// Start "true", so InitializeComponent will begin with it there.
private bool _showContent = true;
public bool ShowContent {
get => _showContent;
set {
_showContent = value;
OnPropertyChanged();
}
}
If you have code that sets ShowContent, verify that you have set it to true.
I'm currently have this list that shows the title on the left and the information on the right of the list and i have a total of 4 columns going ("title" "info" "title" "info"). However I want only ONE row of the info to span from the second column to the fourth column but doing Grid.Columnspan="3" on that particular row did not work as it messed up the grid. Any fix for this?
Code:
<Grid Grid.Column="0"
ColumnDefinitions="0.6*,0.7*,0.5*,0.5*">
<!--Title-->
<Grid Grid.Column="0"
RowDefinitions="0.5*,0.5*,0.5*,0.5*,0.5*,0.5*,0.5*,0.5*,0.5*,1.3*,1.3*">
<Label Grid.Row="0" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="SYMPTOM"/>
<Label Grid.Row="1" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="CONTACT NAME"/>
<Label Grid.Row="2" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="CONTACT NO"/>
<Label Grid.Row="3" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="MACHINE NO"/>
<Label Grid.Row="4" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="SERIAL NO"/>
<Label Grid.Row="5" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="CUSTOMER NO"/>
<Label Grid.Row="6" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="VESSEL 1"/>
<Label Grid.Row="7" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="ADD ADDRESS"/>
<Label Grid.Row="8" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="NOTE"/>
<Label Grid.Row="9" HorizontalOptions="StartAndExpand" VerticalOptions="Center" Text="RECEIVE BY"/>
<Label Grid.Row="10" HorizontalOptions="StartAndExpand" VerticalOptions="Center" Text="CONTACT NO"/>
</Grid>
<!--info-->
<Grid Grid.Column="1"
RowDefinitions="0.5*,0.5*,0.5*,0.5*,0.5*,0.5*,0.5*,0.5*,0.5*,1.3*,1.3*">
<Label Grid.Row="0" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="HOUSE LEAKING"/>
<Label Grid.Row="1" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="JORDAN"/>
<Label Grid.Row="2" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="019886933"/>
<Label Grid.Row="3" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="MACHINE AB"/>
<Label Grid.Row="4" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="SN0000-002"/>
<Label Grid.Row="5" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="P02000054"/>
<Label Grid.Row="6" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="VESSEL NOTE 1"/>
<Label Grid.Row="7" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text=""/>
<!--Span Grid.Row="8" row to the 4th col-->
<Label Grid.Row="8" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="THIS IS FOR TESTING MC ONLY"/>
<Frame Grid.Row="9" Style="{StaticResource FrameStyleBlack2}">
<OnPlatform x:TypeArguments="View">
<OnPlatform.Android>
<customstyle:EntryBorderless Style="{StaticResource EntryStyle}" Text="SITI"/>
</OnPlatform.Android>
</OnPlatform>
</Frame>
<Frame Grid.Row="10" Style="{StaticResource FrameStyleBlack2}">
<OnPlatform x:TypeArguments="View">
<OnPlatform.Android>
<customstyle:EntryBorderless Style="{StaticResource EntryStyle}" Text="0163456789"/>
</OnPlatform.Android>
</OnPlatform>
</Frame>
</Grid>
<Grid Grid.Column="2"
RowDefinitions="0.5*,0.5*,0.5*,0.5*,0.5*,0.5*,0.5*,0.5*,0.5*,1.3*,1.3*">
<Label Grid.Row="6" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="VESSEL 2"/>
<Label Text="CURRENCY SIGN" Grid.Row="9" HorizontalOptions="StartAndExpand" VerticalOptions="Center"/>
</Grid>
<Grid Grid.Column="3"
RowDefinitions="0.5*,0.5*,0.5*,0.5*,0.5*,0.5*,0.5*,0.5*,0.5*,1.3*,1.3*">
<Label Grid.Row="6" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="VESSEL NOTE 2"/>
<Frame Grid.Row="9" Style="{StaticResource FrameStyleBlack2}">
<OnPlatform x:TypeArguments="View">
<OnPlatform.Android>
<customstyle:EntryBorderless Style="{StaticResource EntryStyle}" Text="$" />
</OnPlatform.Android>
</OnPlatform>
</Frame>
</Grid>
</Grid>
You've defined "a grid inside a grid". The OUTER grid has columns. The INNER grid has rows. Then you tried to make an INNER ROW span COLUMNS. This won't work, because the INNER grid doesn't have columns.
What you want instead is a SINGLE grid, that is two-dimensional (has rows and columns):
<Grid ColumnDefinitions="0.6*,0.7*,0.5*,0.5*" RowDefinitions="0.5*,0.5*,0.5*,0.5*,0.5*,0.5*,0.5*,0.5*,0.5*,1.3*,1.3*">
<!--Title-->
<Label Grid.Column="0" Grid.Row="0" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="SYMPTOM"/>
<Label Grid.Column="0" Grid.Row="1" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="CONTACT NAME"/>
<Label Grid.Column="0" Grid.Row="2" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="CONTACT NO"/>
<!--info-->
<Label Grid.Column="1" Grid.Row="0" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="HOUSE LEAKING"/>
<Label Grid.Column="1" Grid.Row="1" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="JORDAN"/>
<Label Grid.Column="1" Grid.Row="2" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="019886933"/>
</Grid>
Now you can use Grid.ColumnSpan on a single row.
NOTE: Given that you are using ColumnSpan, on certain row(s), it MIGHT be sensible to organize the lines of XAML differently. This will have the exact same result, it just may make it easier to see what is happening in each row:
<Grid ColumnDefinitions="0.6*,0.7*,0.5*,0.5*" RowDefinitions="0.5*,0.5*,0.5*,0.5*,0.5*,0.5*,0.5*,0.5*,0.5*,1.3*,1.3*">
<Label Grid.Row="0" Grid.Column="0" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="SYMPTOM"/>
<Label Grid.Row="0" Grid.Column="1" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="HOUSE LEAKING"/>
<Label Grid.Row="1" Grid.Column="0" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="CONTACT NAME"/>
<Label Grid.Row="1" Grid.Column="1" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="JORDAN"/>
<Label Grid.Row="2" Grid.Column="0" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="CONTACT NO"/>
<Label Grid.Row="2" Grid.Column="1" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Text="019886933"/>
</Grid>
Entirely up to you which arrangement makes more sense.
I am trying to create a UI like below:
My Code:
<RelativeLayout>
<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="33.3*" />
<ColumnDefinition Width="33.4*" />
<ColumnDefinition Width="33.3*" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Column="0" HorizontalOptions="FillAndExpand" Orientation="Vertical" HeightRequest="40" BackgroundColor="#F0BB1D" Margin="-10">
<Label Text="Daily Readings" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>
</StackLayout>
<StackLayout Grid.Column="1" HorizontalOptions="FillAndExpand" HeightRequest="40" Orientation="Vertical" BackgroundColor="#FD728B" Margin="-10">
<Label Text="Saint of the Day" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>
</StackLayout>
<StackLayout Grid.Column="2" HorizontalOptions="FillAndExpand" Orientation="Vertical" HeightRequest="40" BackgroundColor="#1FB5D6" Margin="-10">
<Label Text="Quiz of the Day" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>
</StackLayout>
</Grid>
</StackLayout>
<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="33.3*" />
<ColumnDefinition Width="33.4*" />
<ColumnDefinition Width="33.3*" />
</Grid.ColumnDefinitions>
<Image Source="ic_daily_reading_icon_xx.png" WidthRequest="30" HeightRequest="30" Grid.Column="0" />
<Image Source="ic_saint_icon_xx.png" WidthRequest="30" HeightRequest="30" Grid.Column="1" />
<Image Source="ic_quiz_icon_xx.png" WidthRequest="30" HeightRequest="30" Grid.Column="2"/>
</Grid>
</StackLayout>
</RelativeLayout>
Current Output:
How can I create a layout like the top? What property of relative layout needs to use to achieve this?
In fact it's pretty simple, use the TranslationY property on your images view:
<Image Grid.Column="0"
TranslationY="-20"
Source="ic_daily_reading_icon_xx.png"
WidthRequest="30"
HeightRequest="30" />
Agree with #Roubachof. Or you can put the stacklayouts in the same grid cell .
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="EndAndExpand">
<Grid HeightRequest="30">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="33.3*" />
<ColumnDefinition Width="33.4*" />
<ColumnDefinition Width="33.3*" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Column="0" HorizontalOptions="FillAndExpand" Orientation="Vertical" HeightRequest="40" BackgroundColor="#F0BB1D" >
<Label Text="Daily Readings" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>
</StackLayout>
<StackLayout Grid.Column="1" HorizontalOptions="FillAndExpand" HeightRequest="40" Orientation="Vertical" BackgroundColor="#FD728B" >
<Label Text="Saint of the Day" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>
</StackLayout>
<StackLayout Grid.Column="2" HorizontalOptions="FillAndExpand" Orientation="Vertical" HeightRequest="40" BackgroundColor="#1FB5D6" >
<Label Text="Quiz of the Day" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>
</StackLayout>
</Grid>
</StackLayout>
<StackLayout Grid.Row="0" Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand" >
<Grid HeightRequest="30">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="33.3*" />
<ColumnDefinition Width="33.4*" />
<ColumnDefinition Width="33.3*" />
</Grid.ColumnDefinitions>
<Image BackgroundColor="Red" WidthRequest="30" HeightRequest="30" Grid.Column="0" />
<Image BackgroundColor="Red" WidthRequest="30" HeightRequest="30" Grid.Column="1" />
<Image BackgroundColor="Red" WidthRequest="30" HeightRequest="30" Grid.Column="2"/>
</Grid>
</StackLayout>
</Grid>
You can do it this way:
<Grid>
<Button HeightRequest="50" WidthRequest="100" HorizontalOptions="Start" VerticalOptions="Start" BackgroundColor="Red"/>
<Button HeightRequest="100" WidthRequest="50" HorizontalOptions="Start" VerticalOptions="Start" BackgroundColor="Green"/>
</Grid>
Pay attention to HorizontalOptions and VerticalOptions properties, these specify how controls are placed. (In my case the objects are anchored to top left corner)
And controls order matter. You can see that green button is on top of the red one, it's because in the code it's placed after the red one.
Just to supplement the solution by Alex Logvin, I was able to superimpose images and text with transparency over a photo in my gammaDog application:
<Grid>
<ffimageloading:CachedImage
x:Name="MyImage"
Source="{Binding MyImage}" >
</ffimageloading:CachedImage>
<Image HorizontalOptions="Center"
VerticalOptions="Center"
Rotation="{Binding Heading}"
Source="arrow.png"
Margin="75"
x:Name="ImageArrow"/>
<Image HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Rotation="{Binding HeadingCompass}"
Source="compass.png"/>
<Label Text="{Binding MyTitle, StringFormat='{0}'}"
FontSize="Large" TextColor="Red"
HorizontalTextAlignment="Center"></Label>
<Label Text="{Binding MyNote, StringFormat='{0}'}"
FontSize="Large" TextColor="Red"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Bottom"></Label>
</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>