I have a Grid where I have defined the Height as 50, and then displaying a bunch of labels bound to a List. How can I overflow the Labels from row to row instead of what's happening now which is squeezing the Labels vertically?
public List LabelList { get; set; } = new List
{
"Cat",
"Dog",
"Fox",
"Leopard",
"Bear",
"Monkey",
"Lion",
"Bison",
"Alpaca",
"Sheep",
"Ant",
"Fox",
"Tiger",
"Elephant",
"Mouse",
"Eagle",
"Coyote"
};
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="50" />
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" BackgroundColor="Aquamarine" />
<StackLayout
Grid.Row="1"
BackgroundColor="Beige"
BindableLayout.ItemsSource="{Binding LabelList}"
Orientation="Horizontal">
<Label
Padding="2"
BackgroundColor="Blue"
FontSize="Large"
Text="{Binding}" />
</StackLayout>
<StackLayout Grid.Row="2" BackgroundColor="Aquamarine" />
What is happening now:
What I want to achieve (this is photoshopped):
I had to use FlexLayout instead of StackLayout
<FlexLayout
Grid.Row="1"
BackgroundColor="Beige"
BindableLayout.ItemsSource="{Binding LabelList}"
Wrap="Wrap">
<Label
Padding="2"
BackgroundColor="Blue"
FontSize="Large"
HorizontalOptions="StartAndExpand"
Text="{Binding}" />
</FlexLayout>
Have you tried something like?:
<StackLayout
Grid.Row="1"
BackgroundColor="Beige"
BindableLayout.ItemsSource="{Binding LabelList}"
Orientation="Horizontal">
<Label
Padding="2"
BackgroundColor="Blue"
FontSize="Large"
HorizontalOptions="StartAndExpand"
Text="{Binding}" />
</StackLayout>
From what I gather, you haven't set your LayoutOptions for the labels you are trying to stack.
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/stack-layout
If you want to display UI like the screenshot, you can take a look the following code:
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="50" />
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" BackgroundColor="Aquamarine" />
<StackLayout
Grid.Row="1"
BackgroundColor="Beige"
BindableLayout.ItemsSource="{Binding LabelList}"
Orientation="Horizontal">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label Text="{Binding}" />
</Grid>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
<StackLayout Grid.Row="2" BackgroundColor="Aquamarine" />
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.
I have the following image below which I have tried to design in XAML- Xamarin forms.
The xaml code is as follows:
<ListView x:Name="myList" HasUnevenRows="true" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Frame Padding="0,0,0,8" BackgroundColor="#edeeef" BorderColor="#edeeef">
<Frame.Content>
<Frame OutlineColor="Transparent" BackgroundColor="White">
<Frame.Content>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="7*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<StackLayout Orientation="Vertical" Grid.Row="0" Grid.Column="0">
<Label Text="{Binding ItemName}"
TextColor="Black"
FontFamily="OpenSans-Light"
FontSize="16"
HorizontalOptions="FillAndExpand"/>
<Label Text="Engine coolant temperature sesnor 1 circuit intermittent (DTC Confirmed)" FontSize="11" HorizontalOptions="StartAndExpand"/>
<StackLayout Orientation="Horizontal">
<Button Text="OBD" />
<Button Text="CUS" />
</StackLayout>
</StackLayout>
<BoxView
VerticalOptions="Fill"
HorizontalOptions="End"
WidthRequest="1"
HeightRequest="5"
Color="Blue"
Grid.Row="0"
Grid.Column="1"/>
<ffsvg:SvgCachedImage
Aspect="AspectFit"
VerticalOptions="Center"
Source="Bin.png"
Grid.Column="2"
Grid.Row="0"
/>
</Grid>
</Frame.Content>
</Frame>
</Frame.Content>
</Frame>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
The issue that I am having is that I am unable to draw the vertical right line separating the content and the square red box on the right.
When I am adding the image, it is adding extra padding on the bottom.
Can someone please help me to align the components properly as in the image above in XamarinForms? Thanks.
Your design is quite messed up and should be cleaned up
Within the ViewCell, you have two nested Frames, which causes the main issue: There is a padding on the inner Frame that and on the outer one, which prevent the separator to take the full height
A nested Grid and StackLayout is most likely not necessary and definitely detrimental for your performance
Suggestions:
Remove the outer Frame and add a Margin to the inner one
Set the Padding of the inner frame to 0
Remove the StackLayout wrapped in the Grid and add the controls to the Grid
Add the Grid.RowSpan and Grid.ColumnSpan for controls that take more height/width in the Grid
Your XAML within the ViewCell will look like this:
<Frame Padding="0"
Margin="5"
BorderColor="Transparent"
BackgroundColor="White"
CornerRadius="10">
<Grid ColumnSpacing="0" RowSpacing="5" Padding="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label Text="ItemName"
TextColor="Black"
FontFamily="OpenSans-Light"
FontSize="16"
HorizontalOptions="FillAndExpand"
VerticalOptions="End"
Grid.Column="0"
Grid.Row="0"
Grid.ColumnSpan="2"
Margin="10,10,10,0" />
<Label Grid.Column="0"
Grid.Row="1"
Grid.ColumnSpan="2"
Text="Engine coolant temperature sesnor 1 circuit intermittent (DTC Confirmed)"
FontSize="11"
HorizontalOptions="StartAndExpand"
Margin="10,0,0,0" />
<Button Text="OBD"
VerticalOptions="End"
HorizontalOptions="Start"
Grid.Row="2"
Grid.Column="0"
Margin="10,0,5,10" />
<Button Text="CUS"
VerticalOptions="End"
HorizontalOptions="Start"
Grid.Row="2"
Grid.Column="1"
Margin="0,0,10,10" />
<BoxView VerticalOptions="Fill"
HorizontalOptions="End"
WidthRequest="1"
Color="LightPink"
Margin="0"
Grid.Row="0"
Grid.Column="2"
Grid.RowSpan="3" />
<Image Aspect="AspectFit"
VerticalOptions="Center"
HorizontalOptions="End"
Source="http://lorempixel.com/output/abstract-q-c-200-200.jpg"
Grid.Column="3"
Grid.Row="0"
Grid.RowSpan="3"
Margin="10"/>
</Grid>
</Frame>
And eventually the design looks like that (There is still space for tweaking, but basically that's it. I've changed the colors a bit for better visibility):
Follow this Code.
<Grid Grid.Row="3" Padding="{StaticResource Padding15050}">
<ListView x:Name="ListViewFood" ItemsSource="{Binding FoodList}" HasUnevenRows="True" ItemSelected="OnSelection" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="{StaticResource Padding510}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="0.5*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Controls:Label x:Name="LabelName" Grid.Row="0" Text = "{Binding Name}" Font="17" TextColor="{StaticResource Black}"/>
<Controls:Label x:Name="LabelDescription" Grid.Row="1" Text = "{Binding Description}" Font="15" />
<Controls:Label x:Name="LabelPrice" Grid.Row="2" Text = "{Binding Price}" Font="15" TextColor="{StaticResource YetiBlue}"/>
</Grid>
<Grid Grid.Column="1">
<Controls:RectangleButton Text="Add" Font="Bold,15" VerticalOptions="Start" HorizontalOptions="EndAndExpand" CommandParameter="{Binding Id}" Clicked="RectangleButton_Clicked"/>
</Grid>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
Design like this.
If you want to add a separate line, you just need to add a BoxView in your xaml with WidthRequest=1.
I always use this solution for separating content.
In your case I would suggest to delete HeightRequest in your BoxView.
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.
Can you please recommend me some sample code to create framed lines as shown in the picture. As you can see in the image, for example for the first row, M should be in one frame and all the other 3 items in that row should be in another row.
Below please see my code, any help is appreciated.
<?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="XYZclass.Views.Exams.ExamsPage"
Title="{Binding PageTitle}">
<StackLayout VerticalOptions="FillAndExpand">
<Image Source="XYZclassHeader.png" Aspect="AspectFit" />
<Grid BackgroundColor="#0075c1">
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="1" Text="" TextColor="White" HorizontalOptions="Center"/>
<Label Grid.Row="0" Grid.Column="2" Text="Type:" TextColor="White" HorizontalOptions="Center"/>
<Label Grid.Row="0" Grid.Column="3" Text="Created:" TextColor="White" HorizontalOptions="Center"/>
<Label Grid.Row="0" Grid.Column="4" Text="Finished:" TextColor="White" HorizontalOptions="Center"/>
</Grid>
<ListView Grid.Row="1" Grid.Column="0" ItemsSource="{Binding Exams}" HorizontalOptions="Center">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Frame OutlineColor="Accent" Grid.Row="0" Grid.Column="1" HorizontalOptions="Center">
<Frame.Content>
<Label Text="{Binding DisplayName}" />
</Frame.Content>
</Frame>
<Label Grid.Row="0" Grid.Column="2" Text="{Binding Type}" HorizontalOptions="Center"/>
<Label Grid.Row="0" Grid.Column="3" Text="{Binding CreationDate}" HorizontalOptions="Center"/>
<Label Grid.Row="0" Grid.Column="4" Text="{Binding CompletionDateInfo}" HorizontalOptions="Center"/>
</Grid>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<StackLayout BackgroundColor="#0075c1" VerticalOptions="FillAndExpand">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding DeleteSelectedExamsCommand}"/>
</StackLayout.GestureRecognizers>
<Label Text="Delete Selected(3) "
TextColor="White" />
<Label Text=""
TextColor="White"
FontSize="Large" />
</StackLayout>
<StackLayout BackgroundColor="#0075c1" VerticalOptions="FillAndExpand">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding CreateNewExamCommand}"/>
</StackLayout.GestureRecognizers>
<Label Text="Create New Exam "
TextColor="White"/>
<Label Text=""
TextColor="White"
FontSize="Large"
FontFamily="FontAwesome"/>
<!--Note about FontAwesome for iOS: The FontFamily reference is for iOS. On android it will be ignored-->
</StackLayout>
</StackLayout>
</ContentPage>
Thanks for your answers but this is I have implemented it, I mostly used Grid control, I am sharing it here in case you need a similar screen:
<?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="XYZclass.Views.Exams.ExamsPage"
BackgroundColor="White"
xmlns:controls="clr-namespace:XYZclass.Controls">
<ContentPage.Padding>
<OnPlatform x:TypeArguments="Thickness"
iOS="10, 20, 10, 10"
Android="0,0,0,10"/>
</ContentPage.Padding>
<ContentPage.Resources>
<ResourceDictionary>
<Style x:Key="LabelStyle" TargetType="Label">
<Setter Property="TextColor" Value="White"/>
<Setter Property="Font" Value="Medium"/>
<Setter Property="VerticalOptions" Value="Center"/>
<Setter Property="HorizontalOptions" Value="Center"/>
</Style>
<Style x:Key="LabelStyleSmall" TargetType="Label">
<Setter Property="TextColor" Value="#41a4dc"/>
<Setter Property="Font" Value="Small"/>
<Setter Property="VerticalOptions" Value="Center"/>
<Setter Property="HorizontalOptions" Value="Center"/>
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="10*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<controls:Navigation/>
</Grid>
<Grid RowSpacing="0" Grid.Row="1" Padding="10,10,10,0">
<Grid.RowDefinitions>
<RowDefinition Height="145*" />
<RowDefinition Height="415*" />
<RowDefinition Height="2*" />
<RowDefinition Height="88*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" RowSpacing="10" BackgroundColor="#ed004a">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" BackgroundColor="#ed004a" Padding="30,0,0,0">
<Label Text="Your personal exam history information"
Style="{StaticResource LabelStyle}"
HorizontalOptions="StartAndExpand"/>
</Grid>
<Grid Grid.Row="1"
BackgroundColor="#0075c1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0"
Text=""
Style="{StaticResource LabelStyle}"/>
<Label Grid.Column="1"
Text="Type:"
Style="{StaticResource LabelStyle}"/>
<Label Grid.Column="2"
Text="Created:"
Style="{StaticResource LabelStyle}"/>
<Label Grid.Column="3"
Text="Finished:"
Style="{StaticResource LabelStyle}"/>
</Grid>
</Grid>
<ScrollView Grid.Row="1">
<ListView x:Name="ExamList"
ItemsSource="{Binding Exams}"
HorizontalOptions="Center"
RowHeight="70">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="4*"/>
</Grid.ColumnDefinitions>
<Frame OutlineColor="#ed004a" Grid.Column="0">
<Frame.Content>
<Label Text="{Binding Name}"
Font="Large"
Style="{StaticResource LabelStyle}"
TextColor="#ed004a"
FontAttributes="Bold"/>
</Frame.Content>
</Frame>
<Frame OutlineColor="#ed004a" Grid.Column="1">
<Frame.Content>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0"
Text="{Binding Type}"
Style="{StaticResource LabelStyleSmall}"/>
<Label Grid.Column="1"
Text="{Binding StartDateText}"
Style="{StaticResource LabelStyleSmall}"/>
<Label Grid.Column="2"
Text="{Binding FinishedDateText}"
Style="{StaticResource LabelStyleSmall}"/>
</Grid>
</Frame.Content>
</Frame>
</Grid>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ScrollView>
<BoxView Grid.Row="2" Color="#0075c1" WidthRequest="100" HeightRequest="2"/>
<Grid Grid.Row="3">
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="40*" />
</Grid.RowDefinitions>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0"
BackgroundColor="{Binding DeleteButtonBackgroundColor}"
Padding="30,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0"
x:Name="LabelDeleteSelectedExamsPartOne"
Text="{Binding DeleteButtonText}"
Style="{StaticResource LabelStyle}"/>
<Label Grid.Column="1"
x:Name="LabelDeleteSelectedExamsPartTwo"
Text=""
Style="{StaticResource LabelStyle}"
Font="Large"/>
<Grid.GestureRecognizers IsEnabled="{Binding DeleteButtonIsEnabled}">
<TapGestureRecognizer
Command="{Binding DeleteSelectedExamsCommand}"/>
</Grid.GestureRecognizers>
</Grid>
<Grid Grid.Column="2"
BackgroundColor="#0075c1"
Padding="30,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0"
x:Name="LabelCreateNewExamPartOne"
Text="Create New Exam "
Style="{StaticResource LabelStyle}"/>
<Label Grid.Column="1"
x:Name="LabelCreateNewExamPartTwo"
Text=""
Style="{StaticResource LabelStyle}"
Font="Large"/>
<Grid.GestureRecognizers>
<TapGestureRecognizer
Command="{Binding CreateNewExamCommand}"/>
</Grid.GestureRecognizers>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
</ContentPage>
First of all, grid column indices start at '0'(i.e., if u have 4 columns, their indices will be [0,1,2,3]).
Back to the question:
Your approach seems very strange: you put 4 elements in 4 grid cells 'independently', but 3 of this elements have to be placed within common border. You may try to put this 3 elements in another container(for example, in stack layout), and then add a border to this container. Frame class itself is very poor, but here is some workaround using custom renderers.
Thus, listview cell may look like this:
<StackLayout Orientation="Horizontal">
<local:FrameWithBorder>
<Label Text="{Binding DisplayName}" />
</local:FrameWithBorder>
<local:FrameWithBorder HorizontalOptions="FillAndExpand">
<StackLayout Orientation="Horizontal">
<Label Text="{Binding Type}" />
<Label Text="{Binding CreationDate}" />
<Label Text="{Binding CompletionDateInfo}" />
</StackLayout>
</local:FrameWithBorder>
</StackLayout>
PS> I'm not much experienced in Xamarin, so, any suggestions and corrections would be greatly appreciated.
EDIT: do not put listview inside scrollview
Please ignore my previous answer, this is a much better answer to my own question: I have improved my code and now I create the items dynamically in the code behind, please use the following code if you need a similar screen:
Please see that I am creating "GridExams" dynamically in the code behind:
<?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="XYZProject.Views.Exams.ExamsPage"
BackgroundColor="White"
xmlns:controls="clr-namespace:XYZProject.Controls">
<ContentPage.Padding>
<OnPlatform x:TypeArguments="Thickness"
iOS="10, 20, 10, 10"
Android="0,0,0,0"/>
</ContentPage.Padding>
<ContentPage.Resources>
<ResourceDictionary>
<Style x:Key="LabelStyle" TargetType="Label">
<Setter Property="TextColor" Value="White"/>
<Setter Property="Font" Value="Medium"/>
<Setter Property="VerticalOptions" Value="Center"/>
<Setter Property="HorizontalOptions" Value="Center"/>
</Style>
<Style x:Key="LabelStyleSmall" TargetType="Label">
<Setter Property="TextColor" Value="#41a4dc"/>
<Setter Property="Font" Value="Small"/>
<Setter Property="VerticalOptions" Value="Center"/>
<Setter Property="HorizontalOptions" Value="Center"/>
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="10*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<controls:Navigation/>
</Grid>
<Grid RowSpacing="0" Grid.Row="1" Padding="10,10,10,0">
<Grid.RowDefinitions>
<RowDefinition Height="145*" />
<RowDefinition Height="415*" />
<RowDefinition Height="2*" />
<RowDefinition Height="88*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" RowSpacing="10" BackgroundColor="#ed004a">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" BackgroundColor="#ed004a" Padding="30,0,0,0">
<Label Text="Your personal exam history information"
Style="{StaticResource LabelStyle}"
HorizontalOptions="StartAndExpand"/>
</Grid>
<Grid Grid.Row="1"
BackgroundColor="#0075c1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0"
Text=""
Style="{StaticResource LabelStyle}"/>
<Label Grid.Column="1"
Text="Type:"
Style="{StaticResource LabelStyle}"/>
<Label Grid.Column="2"
Text="Created:"
Style="{StaticResource LabelStyle}"/>
<Label Grid.Column="3"
Text="Finished:"
Style="{StaticResource LabelStyle}"/>
</Grid>
</Grid>
<Grid Grid.Row="1">
<ScrollView>
<Grid x:Name="GridExams">
</Grid>
</ScrollView>
</Grid>
<BoxView Grid.Row="2" Color="#0075c1" WidthRequest="100" HeightRequest="2"/>
<Grid Grid.Row="3" Padding="0,0,0,10">
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="40*" />
</Grid.RowDefinitions>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0"
BackgroundColor="{Binding DeleteButtonBackgroundColor}"
Padding="30,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0"
x:Name="LabelDeleteSelectedExamsPartOne"
Text="{Binding DeleteButtonText}"
Style="{StaticResource LabelStyle}"/>
<Label Grid.Column="1"
x:Name="LabelDeleteSelectedExamsPartTwo"
Text=""
Style="{StaticResource LabelStyle}"
Font="Large"/>
<Grid.GestureRecognizers IsEnabled="{Binding DeleteButtonIsEnabled}">
<TapGestureRecognizer
Command="{Binding DeleteSelectedExamsCommand}"/>
</Grid.GestureRecognizers>
</Grid>
<Grid Grid.Column="2"
BackgroundColor="#0075c1"
Padding="30,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0"
x:Name="LabelCreateNewExamPartOne"
Text="Create New Exam "
Style="{StaticResource LabelStyle}"/>
<Label Grid.Column="1"
x:Name="LabelCreateNewExamPartTwo"
Text=""
Style="{StaticResource LabelStyle}"
Font="Large"/>
<Grid.GestureRecognizers>
<TapGestureRecognizer
Command="{Binding CreateNewExamCommand}"/>
</Grid.GestureRecognizers>
</Grid>
</Grid>
</Grid>
</Grid>
<Grid Grid.Row="1"
IsVisible="{Binding IsLoading}"
BackgroundColor="Black"
Opacity="0.25">
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<ActivityIndicator Grid.Row="0"
IsVisible="{Binding IsLoading}"
IsRunning="{Binding IsLoading}"
VerticalOptions="End"
HorizontalOptions="Center"/>
<Label Grid.Row="1"
Text="Please wait..."
TextColor="White"
VerticalOptions="Start"
HorizontalOptions="Center"/>
</Grid>
</Grid>
</ContentPage>
Method details that creates the grid dynamically:
private void CrateExamsGridDynamically()
{
GridExams.RowDefinitions = new RowDefinitionCollection();
GridExams.BackgroundColor = Color.White;
GridExams.Padding = new Thickness(0, 5, 0, 5);
Grid childContainer = new Grid();
childContainer.HorizontalOptions = LayoutOptions.CenterAndExpand;
childContainer.VerticalOptions = LayoutOptions.CenterAndExpand;
childContainer.BackgroundColor = Color.White;
childContainer.RowDefinitions = new RowDefinitionCollection();
childContainer.ColumnDefinitions = new ColumnDefinitionCollection()
{
new ColumnDefinition
{
Width =new GridLength(1, GridUnitType.Star)
},
new ColumnDefinition
{
Width=new GridLength(4, GridUnitType.Star)
}
};
GridExams.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
List<Exam> exams = App.ExamService.GetExams();
int top = 0;
foreach (var exam in exams)
{
childContainer.RowDefinitions.Add(new RowDefinition
{
Height = new GridLength(60, GridUnitType.Absolute)
});
exam.StartDateText = exam.StartDate.HasValue ? exam.StartDate.Value.ToString("dd/MM/yy") : string.Empty;
exam.FinishedDateText = exam.FinishedDate.HasValue ? exam.FinishedDate.Value.ToString("dd/MM/yy") : "In Progress >";
string examType = string.Empty;
switch (exam.Type)
{
case ExamTypes.Undefined:
break;
case ExamTypes.Part1:
examType = "Part 1";
break;
case ExamTypes.Part2:
examType = "Part 2";
break;
case ExamTypes.Both:
break;
default:
break;
}
#region [ Left Grandchild Container ]
Grid grandChildContainerLeft = new Grid();
grandChildContainerLeft.BackgroundColor = Constants.CustomColour.RcpPurple;
grandChildContainerLeft.Padding = new Thickness(1, 1, 1, 1);
#region [ Left Great Grandchild Container ]
Grid greatGrandChildContainerLeft = new Grid();
// TapGestureRecognizer for Left Container
var grandChildContainerLeftTapGestureRecognizer = new TapGestureRecognizer();
grandChildContainerLeftTapGestureRecognizer.Tapped += GrandChildContainerLeftTapGestureRecognizer_Tapped;
greatGrandChildContainerLeft.GestureRecognizers.Add(grandChildContainerLeftTapGestureRecognizer);
greatGrandChildContainerLeft.BackgroundColor = Color.White;
greatGrandChildContainerLeft.Children.Add(new Label
{
Text = exam.Name,
TextColor = Constants.CustomColour.RcpPurple,
FontAttributes = FontAttributes.Bold,
BackgroundColor = Color.White,
HorizontalOptions = LayoutOptions.CenterAndExpand,
VerticalOptions = LayoutOptions.CenterAndExpand
}, 0, 0);
// This is to carry exam id
greatGrandChildContainerLeft.Children.Add(new Label
{
Text = exam.Id.ToString(),
IsVisible = false
}, 0, 0);
#endregion
grandChildContainerLeft.Children.Add(greatGrandChildContainerLeft, 0, 0);
#endregion
#region [ Right Grandchild Container ]
Grid grandChildContainerRight = new Grid();
grandChildContainerRight.BackgroundColor = Constants.CustomColour.RcpBlue;
grandChildContainerRight.Padding = new Thickness(1, 1, 1, 1);
#region [ Right Great Grandchild Container ]
Grid greatGrandChildContainerRight = new Grid();
// TapGestureRecognizer for Right Container
var grandChildContainerRightTapGestureRecognizer = new TapGestureRecognizer();
grandChildContainerRightTapGestureRecognizer.Tapped += GrandChildContainerRightTapGestureRecognizer_Tapped;
greatGrandChildContainerRight.GestureRecognizers.Add(grandChildContainerRightTapGestureRecognizer);
greatGrandChildContainerRight.BackgroundColor = Color.White;
// We need three columns for each child grid
greatGrandChildContainerRight.ColumnDefinitions = new ColumnDefinitionCollection()
{
new ColumnDefinition
{
Width =new GridLength(1, GridUnitType.Star)
},
new ColumnDefinition
{
Width=new GridLength(1, GridUnitType.Star)
},
new ColumnDefinition
{
Width=new GridLength(2, GridUnitType.Star)
}
};
// This is for type
greatGrandChildContainerRight.Children.Add(new Label
{
Text = examType,
TextColor = Constants.CustomColour.RcpBlue,
BackgroundColor = Color.White,
HorizontalOptions = LayoutOptions.CenterAndExpand,
VerticalOptions = LayoutOptions.CenterAndExpand,
}, 0, 0); // Exam type: the first column
// This is to carry exam id
greatGrandChildContainerRight.Children.Add(new Label
{
Text = exam.Id.ToString(),
IsVisible = false
}, 0, 0);
// This is for created date
greatGrandChildContainerRight.Children.Add(new Label
{
Text = exam.StartDateText,
TextColor = Constants.CustomColour.RcpBlue,
BackgroundColor = Color.White,
HorizontalOptions = LayoutOptions.CenterAndExpand,
VerticalOptions = LayoutOptions.CenterAndExpand,
}, 1, 0); // Created: the second column
// This is for finished date
greatGrandChildContainerRight.Children.Add(new Label
{
Text = exam.FinishedDateText,
TextColor = Constants.CustomColour.RcpBlue,
BackgroundColor = Color.White,
HorizontalOptions = LayoutOptions.CenterAndExpand,
VerticalOptions = LayoutOptions.CenterAndExpand,
}, 2, 0); // Finished: the third column
#endregion
grandChildContainerRight.Children.Add(greatGrandChildContainerRight, 0, 0);
#endregion
childContainer.Children.Add(grandChildContainerLeft, 0, top); // First Column for grandChildContainerLeft
childContainer.Children.Add(grandChildContainerRight, 1, top); // Second Column for grandChildContainerRight
top++;
}
GridExams.Children.Add(childContainer, 0, 0);
}