I have a Grid with 4 Columns. Column 1, 2, 4 are absolute. And I want column 3 to fill the space.
The problem I am having is: for some rows in the Grid, the column 3 data does not fill up the entire space, and so its column 4 is out of alignment with respect to the other rows. See image below for clarity:
Here is my code (newbie, trying to get a handle on the visual part of XAML).
<ListView x:Name="lstData" HasUnevenRows="True" VerticalOptions="StartAndExpand" HorizontalOptions="FillAndExpand">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="0, 5, 0, 5" HorizontalOptions="StartAndExpand" VerticalOptions="StartAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="45"></ColumnDefinition>
<ColumnDefinition Width="20"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="20"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Label Text="{Binding TimesheetDate}" Grid.Row="0" Grid.Column="0" HorizontalOptions="StartAndExpand" FontSize="Micro"></Label>
<Label Text="{Binding UserInitials}" Grid.Row="0" Grid.Column="1" HorizontalOptions="StartAndExpand" FontSize="Micro"></Label>
<Label Text="{Binding TaskSummary}" Grid.Row="0" Grid.Column="2" HorizontalOptions="FillAndExpand" LineBreakMode="WordWrap" FontSize="Micro"></Label>
<Label Text="{Binding TimesheetHours, StringFormat='{}{0:f2}'}" Grid.Row="0" Grid.Column="3" HorizontalOptions="EndAndExpand" FontSize="Micro"></Label>
<Label Text="{Binding TaskID}" Grid.Row="1" Grid.Column="0" VerticalOptions="Center" HorizontalOptions="CenterAndExpand" FontSize="Micro"></Label>
<Label Text="" Grid.Row="1" Grid.Column="1" FontSize="Micro" HorizontalOptions="CenterAndExpand"></Label>
<Label Text="{Binding UserComments}" Grid.Row="1" Grid.Column="2" LineBreakMode="WordWrap" HorizontalOptions="FillAndExpand" FontSize="Micro"></Label>
<Label Text="" Grid.Row="1" Grid.Column="3" FontSize="Micro" HorizontalOptions="EndAndExpand"></Label>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Thanks in advance,
Kris
you could change your HorizontalOptions of your Grid,
change
<Grid Padding="0, 5, 0, 5" HorizontalOptions="StartAndExpand" VerticalOptions="StartAndExpand">
to:
<Grid Padding="0, 5, 0, 5" HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand">
Related
I want to achieve a space between the different groupings in a listview like my picture.
How can I do this through xaml?
I have tried adding the some margin and padding to the GroupHeaderTemplate without any luck.
<ListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell>
<Frame Margin="0,20,0,0" Padding="0,0,0,0" BackgroundColor="#324458" >
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="7*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Label HorizontalOptions="StartAndExpand" VerticalOptions="CenterAndExpand" HorizontalTextAlignment="Start" VerticalTextAlignment="Center" TextColor="white" Grid.Row="0" Grid.Column="1" Text="{Binding Name}"/>
<Label HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" Grid.Row="0" Grid.Column="0" BackgroundColor="#2D3334" Margin="0,3,0,3" TextColor="#C4ced8" Text="LPic" />
<Label HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" BackgroundColor="#2D3334" Grid.Row="0" Grid.Column="2" TextColor="#C4ced8" Margin="0,3,0,3" Text="30. SEP" />
</Grid>
</Frame>
</ViewCell>
</DataTemplate>
</ListView.GroupHeaderTemplate>
You can put the Frame in another Frame and set the Padding of it
<ViewCell>
<Frame Margin="0" Padding="0,20,0,0" BackgroundColor="#324458" >
<Frame >
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="7*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Label HorizontalOptions="StartAndExpand" VerticalOptions="CenterAndExpand" HorizontalTextAlignment="Start" VerticalTextAlignment="Center" TextColor="white" Grid.Row="0" Grid.Column="1" Text="{Binding Name}"/>
<Label HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" Grid.Row="0" Grid.Column="0" BackgroundColor="#2D3334" Margin="0,3,0,3" TextColor="#C4ced8" Text="LPic" />
<Label HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" BackgroundColor="#2D3334" Grid.Row="0" Grid.Column="2" TextColor="#C4ced8" Margin="0,3,0,3" Text="30. SEP" />
</Grid>
</Frame>
</Frame>
</ViewCell>
You could try adding padding to the top and bottom of the Frame e.g. Padding="0,20,0,20"? play with the values for top and bottom padding until you get your ideal result.
If that doesn't work try adding the padding to the ViewCell.
What you can do is add another RowDefinition to the grid and give it some height saw 20 and make this new RowDefinition as the first row and existing row as the second row.
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 a flexlayout when a display some items in a frame, but all the items that have labels with text on 2 lines the icon gets pushed up and the label text do not align with each other. Any suggestions of what I am doing wrong?
my code
<Grid>
<ScrollView>
<FlexLayout
Padding="8"
AlignContent="Start"
AlignItems="Start"
BindableLayout.ItemsSource="{Binding MyItems}"
Direction="Row"
JustifyContent="Start"
Wrap="Wrap">
<BindableLayout.ItemTemplate>
<DataTemplate>
<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
Margin="4,4,4,4"
FlexLayout.AlignSelf="Start"
FlexLayout.Basis="{OnIdiom Phone='50%',
Tablet='33%'}">
<Frame
Margin="0"
Padding="0"
BorderColor="DarkGray"
CornerRadius="10"
HeightRequest="130"
HasShadow="True">
<StackLayout VerticalOptions="Center" HorizontalOptions="Center">
<Image Aspect="AspectFit" Source="PhotoIcon.png"
Margin="0,20,0,0" WidthRequest="50" HeightRequest="50"/>
<Label Text="{Binding Name}" Margin="0,10,0,10" />
</StackLayout>
</Frame>
</StackLayout>
</DataTemplate>
</BindableLayout.ItemTemplate>
</FlexLayout>
</ScrollView>
</Grid>
Improve your code
<Label Text="{Binding Name}" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Margin="0,10,0,10" />
Update:
Because StackLayout will not fit the size of its child elements ,so I suggest you can use Grid instead of it.
<Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="0.5*" />
<RowDefinition Height="0.5*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
</Grid.ColumnDefinitions>
<Image Grid.Row="0" Aspect="AspectFit" Source="PhotoIcon.png" Margin="0,20,0,0" WidthRequest="50" HeightRequest="50"/>
<Label Grid.Row="1" Text="{Binding Name}" Margin="0,10,0,10" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>
</Grid>
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>