How to bind nested listview within listitem of parent list, after applying grouping? - xaml

How to bind nested listview within listitem of parent list.
I followed below posts, and now need help to bind ItemSource of a nested listview present within listitem data template.
https://montemagno.com/enhancing-xamarin-forms-listview-with-grouping/
how to bind list inside litview in xamarin.forms
Some thing like below-
Group Header 1
Item 1
Listitem 1
Listitem 2
Item 2
Listitem 1
Listitem 2
Group Header 2
Item 1
Listitem 1
Item 2
Listitem 1
Listitem 2
Listitem 3
My Code-
<ContentPage.Content>
<StackLayout Spacing="0">
<StackLayout HeightRequest="5" HorizontalOptions="CenterAndExpand" BackgroundColor="{StaticResource Key=primary-back-title-color}">
<Label HeightRequest="5" WidthRequest="800" HorizontalOptions="FillAndExpand" BackgroundColor="{StaticResource Key=primary-back-title-color}" />
</StackLayout>
<StackLayout HeightRequest="40" BackgroundColor="{StaticResource Key=page-name-background-color}" Orientation="Vertical">
<Label VerticalOptions="CenterAndExpand" Margin="10,0,0,0" FontAttributes="Bold" TextColor="White" Text="My Cart" />
</StackLayout>
<ListView ItemsSource="{Binding VendorProduct}" HasUnevenRows="true" SeparatorVisibility="None" SelectedItem="none" IsGroupingEnabled="true" x:Name="CartProductListView" ItemSelected="Handle_ItemSelected">
<ListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell Height="20">
<Grid BackgroundColor="White" HeightRequest="25" Margin="0,0,0,5">
<Label Margin="10,1,0,1" FontSize="14" VerticalOptions="CenterAndExpand" FontAttributes="Bold" TextColor="{StaticResource Key=page-name-background-color}" Text="{Binding VendorName}">
</Label>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.GroupHeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="15" />
<RowDefinition Height="15" />
</Grid.RowDefinitions>
<StackLayout Margin="5,0,0,0" Grid.Row="0" Orientation="Horizontal">
<Label FontSize="14" Text="DC-Customer Name: ">
</Label>
<Label FontSize="14" TextColor="#AD2C2C" Text="ABC-123456">
</Label>
</StackLayout>
<StackLayout Margin="5,0,0,0" Grid.Row="1" Orientation="Horizontal">
<Label FontSize="14" Text="Zone Price: ">
</Label>
<Label FontSize="14" TextColor="#AD2C2C" Text="$4.21">
</Label>
</StackLayout>
</Grid>
<Grid Margin="10,10,0,0" ColumnSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<RelativeLayout HeightRequest="94" Grid.Column="0" WidthRequest="{Binding DealsHeight}">
<ListView ItemsSource="{Binding Deals}" Rotation="270" RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width,Factor=0.5,Constant=-47}" RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width,Factor=-0.5,Constant=47}" RelativeLayout.WidthConstraint="{ConstraintExpression Type=Constant,Constant=94}" RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width,Factor=1}" RowHeight="94" SeparatorVisibility="None" HasUnevenRows="true" BackgroundColor="White">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Grid BackgroundColor="#BCD153" RowSpacing="1" Padding="1" Rotation="90" HeightRequest="94">
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<StackLayout BackgroundColor="White" Grid.Row="0" Padding="5">
<Label Text="{Binding BookCode}" FontSize="13" />
</StackLayout>
<StackLayout BackgroundColor="White" Grid.Row="1" Padding="5">
<Label Text="{Binding Amount, StringFormat='${0} OFF'}" FontSize="13" />
</StackLayout>
<StackLayout BackgroundColor="White" Grid.Row="2">
<Entry Keyboard="Numeric" IsEnabled="{Binding IsQuantityEditable}" Text="{Binding Quantity}">
<Entry.Behaviors>
<converters:NumericMaxLengthBehavior x:Name="PhoneNumberValidator" />
</Entry.Behaviors>
</Entry>
</StackLayout>
</Grid>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</RelativeLayout>
<StackLayout Grid.Column="1">
<Label Text="Month" VerticalOptions="CenterAndExpand" TextColor="Silver" FontSize="12" HeightRequest="30" />
<Label Text="Discount" VerticalOptions="CenterAndExpand" TextColor="Silver" FontSize="12" HeightRequest="30" />
<Label Text="Quantity" VerticalOptions="CenterAndExpand" TextColor="Silver" FontSize="12" HeightRequest="30" />
</StackLayout>
</Grid>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Button Margin="0,20,0,0" Text="Propose Order" Command="{Binding ShowOrdersCommand}" BackgroundColor="{StaticResource Key=primary-back-title-color}" TextColor="White" VerticalOptions="Center" HorizontalOptions="Center" WidthRequest="200">
</Button>
</StackLayout>
</ContentPage.Content>

Related

Xamarin Listview cannot scroll to bottm

I modify the sample https://learn.microsoft.com/zh-tw/samples/xamarin/xamarin-forms-samples/userinterface-xaminals/ ,
replace the collectionview with listview . after replacing I found the listview cannot scroll to bottom (there are total 17 items , but only show 6 items)
This error only happen on Android,but it works well on IOS.
How to solve this problem?
<?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:controls="clr-namespace:Xaminals.Controls"
xmlns:data="clr-namespace:Xaminals.Data"
x:Class="Xaminals.Views.MonkeysPage"
Title="Monkeys">
<RelativeLayout
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<StackLayout Orientation="Vertical"
VerticalOptions="FillAndExpand"
Padding="10">
<ListView ItemsSource="{x:Static data:MonkeyData.Monkeys}"
x:Name="CollectionView1"
RowHeight="100">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid VerticalOptions="CenterAndExpand" Padding = "20, 0" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Image
Grid.RowSpan="2"
Aspect="AspectFill"
HeightRequest="60"
Source="{Binding ImageUrl}"
WidthRequest="60" />
<Label
Grid.Row="0"
Grid.Column="1"
FontAttributes="Bold"
Text="{Binding Name}" />
<Label
Grid.Row="1"
Grid.Column="1"
FontAttributes="Italic"
Text="{Binding Price}"
VerticalOptions="End" />
<Image Grid.Row="2" Grid.Column="0" Source="bear.png" HeightRequest="25" WidthRequest="25">
<Image.GestureRecognizers>
<TapGestureRecognizer
NumberOfTapsRequired="1" />
</Image.GestureRecognizers>
</Image>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
<ActivityIndicator x:Name="activityIndicator" Color="Red" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.33}" RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height,Factor=0.33}" />
</RelativeLayout>
</ContentPage>
The solution is change the RelativeLayout to Stacklayout:
<StackLayout
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<StackLayout Orientation="Vertical"
VerticalOptions="FillAndExpand"
Padding="10">
<ListView ItemsSource="{x:Static data:MonkeyData.Monkeys}"
x:Name="CollectionView1"
RowHeight="100">
.....
</ListView>
</StackLayout>
</StackLayout>
If you want to use RelativeLayout, you need to use XConstraint, YConstraint,WidthConstraint,HeightConstraint to layout the child view instead of VerticalOptions="FillAndExpand", HorizontalOptions="FillAndExpand".

Free space using FillAndExpand

Im' working on XAML view and I want to create simple view with left side bar and the content with Grid and inside grid I have some buttons, that I want to achieve is to fill all form
Code:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:App.ViewModels"
mc:Ignorable="d"
x:Class="App.Views.UserSelectionPage">
<ContentPage.Content>
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<StackLayout Orientation="Vertical">
<StackLayout Orientation="Vertical" BackgroundColor="#093145" HorizontalOptions="Start" VerticalOptions="FillAndExpand" >
<Label Text="AppName"
Grid.Row="0"
Grid.Column="1"
HorizontalOptions="Center"
VerticalOptions="Center"
FontSize="Header"
TextColor="White"
Margin="15,0,10,15" />
</StackLayout>
<StackLayout Orientation="Vertical" VerticalOptions="End" BackgroundColor="#093145">
<Image Source="Assets/LargeTitle.scale-100.png"
Grid.Row="0"
Grid.Column="0"
HorizontalOptions="Center"
WidthRequest="90"
HeightRequest="90"
Margin="15,0,10,15"
VerticalOptions="Center"/>
</StackLayout>
</StackLayout>
<Grid BackgroundColor="AliceBlue">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!--<BoxView Color="#505CA9" Grid.Row="0" Grid.ColumnSpan="3" />-->
<Button Text="Use username instead"
Command="{Binding ToggleNewUserCommand}"
Grid.Row="0"
Grid.Column="2"
VerticalOptions="Center"
HorizontalOptions="End"
BackgroundColor="Transparent"
FontSize="Title"
TextColor="White"
Margin="15,0,10,15"/>
<Button x:Name="userOne"
d:Text="GQ"
Text="{Binding UserSelectionList[0].Abbreviation}"
Command="{Binding ButtonSelectedCommand}"
CommandParameter="{x:Reference userOne}"
TextColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
BorderWidth="1"
FontSize="92"
CornerRadius="160"
HeightRequest="320"
WidthRequest="320"
Margin="0,40,0,40"
Grid.Row="1"
Grid.Column="0"
BackgroundColor="{Binding UserSelectionList[0].BackgroundColor}"
d:BackgroundColor="#093145"/>
<Button x:Name="userTwo"
d:Text="LR"
Text="{Binding UserSelectionList[1].Abbreviation}"
Command="{Binding ButtonSelectedCommand}"
CommandParameter="{x:Reference userTwo}"
TextColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
BorderWidth="1"
FontSize="92"
CornerRadius="160"
HeightRequest="320"
WidthRequest="320"
Margin="0,40,0,40"
Grid.Row="1"
Grid.Column="1"
BackgroundColor="{Binding UserSelectionList[1].BackgroundColor}"
d:BackgroundColor="#107896" />
<Button x:Name="userThree"
d:Text="AR"
Text="{Binding UserSelectionList[2].Abbreviation}"
Command="{Binding ButtonSelectedCommand}"
CommandParameter="{x:Reference userThree}"
TextColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
BorderWidth="1"
FontSize="92"
CornerRadius="160"
HeightRequest="320"
WidthRequest="320"
Margin="0,40,0,40"
Grid.Row="1"
Grid.Column="2"
BackgroundColor="{Binding UserSelectionList[2].BackgroundColor}"
d:BackgroundColor="#829356" />
<Button x:Name="userFour"
d:Text="RR"
Text="{Binding UserSelectionList[3].Abbreviation}"
Command="{Binding ButtonSelectedCommand}"
CommandParameter="{x:Reference userFour}"
TextColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
BorderWidth="1"
FontSize="92"
CornerRadius="160"
HeightRequest="320"
WidthRequest="320"
Grid.Row="2"
Grid.Column="0"
BackgroundColor="{Binding UserSelectionList[3].BackgroundColor}"
d:BackgroundColor="#EBC944" />
<Button x:Name="userFive"
d:Text="GQ"
Text="{Binding UserSelectionList[4].Abbreviation}"
Command="{Binding ButtonSelectedCommand}"
CommandParameter="{x:Reference userFive}"
TextColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
BorderWidth="1"
FontSize="92"
CornerRadius="160"
HeightRequest="320"
WidthRequest="320"
Grid.Row="2"
Grid.Column="1"
BackgroundColor="{Binding UserSelectionList[4].BackgroundColor}"
d:BackgroundColor="#F26D21" />
<Button x:Name="userSix"
d:Text="GQ"
Text="{Binding UserSelectionList[5].Abbreviation}"
CommandParameter="{x:Reference userSix}"
Command="{Binding ButtonSelectedCommand}"
TextColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
BorderWidth="1"
FontSize="92"
CornerRadius="160"
HeightRequest="320"
WidthRequest="320"
Grid.Row="2"
Grid.Column="2"
BackgroundColor="{Binding UserSelectionList[5].BackgroundColor}"
d:BackgroundColor="#C02F1D" />
</Grid>
</StackLayout>
</ContentPage.Content>
Problem is for some reason it has free space inclusive if I use FillAndExpand on main StackLayout
I read about that but people just say that I missing FillAndExpand, I think problem is because I use Orientation="Horizontal" into first StackLayout, but that is the way I found to merge side bar with gridview. How can I achieve this? Regards
Add HorizontalOptions to the Grid itself:
<Grid HorizontalOptions="FillAndExpand" BackgroundColor="AliceBlue">

Xamarin aligning items in List View

I am using the following xaml in xamrin forms to create an order details page with the list of orders in a sub list-view however I am having a biit of difficulty in aligning the list view items.
<ContentPage.Content>
<ScrollView>
<StackLayout Spacing="2">
<Label Text="Order Number:"></Label>
<Label Text="{Binding Item.SopOrderNumber}"
LineBreakMode="NoWrap"
FontSize="20" />
<Label Text="Phone Number:" FontSize="20" ></Label>
<Label Text="{Binding Item.TelephoneNumber}"/>
<Button Command="{Binding SubmitCommand}" Text="Click To Call" TextColor="White"
FontAttributes="Bold" FontSize="Large" HorizontalOptions="FillAndExpand"
BackgroundColor="#088da5" />
<Label Text="{Binding Item.CustomerName}"
LineBreakMode="NoWrap"
FontSize="20" />
<Label Text="Order Status"
HorizontalOptions="StartAndExpand" />
<Picker x:Name="picker" Title="Order Status">
<Picker.ItemsSource >
<x:Array Type="{x:Type x:String}">
<x:String>Delivered</x:String>
<x:String>Damaged</x:String>
<x:String>Missing</x:String>
</x:Array>
</Picker.ItemsSource>
</Picker>
<Label Text="Order Details" FontSize="Large"></Label>
<ListView x:Name="DeliveryItemsList" HeightRequest="80" HasUnevenRows="True" >
<ListView.ItemTemplate >
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal">
<StackLayout Orientation="Horizontal" Padding="10" Spacing="15">
<Label Text="{Binding ItemNumber}" FontSize="20" ></Label>
<Label Text="{Binding StockCode}" FontSize="20" TextColor="Gray"></Label>
<Label Text="{Binding StockDescription}" FontSize="20" TextColor="Gray"></Label>
<Label Text="{Binding Price}" TextColor="Gray" FontSize="20" ></Label>
<Label Text="{Binding Qty}" TextColor="Gray" FontSize="20" ></Label>
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Label Text="Notes"
HorizontalOptions="StartAndExpand"
/>
<Editor x:Name="txtNotes"
VerticalOptions="FillAndExpand" HeightRequest="20"></Editor>
<Sig:SignaturePadView x:Name="signaturePad" />
<Image x:Name="PhotoSource" ></Image>
<Button Command="{Binding SubmitCommand}" Text="Take Picture of Delivery" x:Name="btnTakePhto" Clicked="BtnTakePhto_Clicked" TextColor="White"
FontAttributes="Bold" FontSize="Large" HorizontalOptions="FillAndExpand"
BackgroundColor="#088da5" />
<Button Text="Update Order" BackgroundColor="AliceBlue" Clicked="Update_Order_Clicked"></Button>
<Button Text="Update Order and Goto Next Job" BackgroundColor="AliceBlue" Clicked="Update_Order_Clicked"></Button>
</StackLayout>
</ScrollView>
</ContentPage.Content>
As you can see from the image the items in the Listview are not in line with each other how can i make them so aligned.
Edit 2
Hi Again I AM afraid I tried the below answer but it didn't work in end it looked sound.
<ListView x:Name="DeliveryItemsList" HeightRequest="80" HasUnevenRows="True" >
<ListView.ItemTemplate >
<DataTemplate>
<ViewCell>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
</Grid>
<Label Text="{Binding ItemNumber}" FontSize="20" ></Label>
<Label Text="{Binding StockCode}" FontSize="20" TextColor="Gray"></Label>
<Label Text="{Binding StockDescription}" FontSize="20" TextColor="Gray"></Label>
<Label Text="{Binding Price}" TextColor="Gray" FontSize="20" ></Label>
<Label Text="{Binding Qty}" TextColor="Gray" FontSize="20" ></Label>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
If you want things to align, StackLayout is probably not the way to do it. StackLayout allocates space to each child element based on how much it needs, so if each row in your list has differing width requirements for different elements, like price, you'll get the kind of layout you see.
A better approach would be Grid, which gives you explicit control over how wide each column is:
<ListView.ItemTemplate >
<DataTemplate>
<ViewCell>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
</Grid>
<Label Text="{Binding ItemNumber}" Grid.Column="0" FontSize="20" ></Label>
<Label Text="{Binding StockCode}" Grid.Column="1" FontSize="20" TextColor="Gray"></Label>
<Label Text="{Binding StockDescription}" Grid.Column="2" FontSize="20" TextColor="Gray"></Label>
<Label Text="{Binding Price}" Grid.Column="3" TextColor="Gray" FontSize="20" ></Label>
<Label Text="{Binding Qty}" Grid.Column="4" TextColor="Gray" FontSize="20" ></Label>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
In this example, each column is defined to have an equal width (dividing the available width evenly), but you can adjust as you see fit.
You could change one of the ColumnDefinitions to Width="1.5*" which would allocate 1.5 times the space to that column as it does to the other columns. Or could you define a column with Width="100" which would give it a fixed size regardless of the width of the screen.
There is also Width="Auto" which lets you set the width of the column based on the amount of space needed by the contents of that column, but since each row in your ListView is a different Grid, you'd end up with the same problem as you are having now with StackLayout.

How to use Grid and create this?

i would like to create a view like this :
. Where Contact1, Contact2 are models and ListViewis a list of these models.
Now i have code like this but i dont get the desired output.
<?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="KiaiDay.Pages.ConviteEmailPage"
NavigationPage.TitleView="Convive por email"
NavigationPage.HasBackButton="True"
NavigationPage.BackButtonTitle="Voltar"
BackgroundColor="AliceBlue">
<ContentPage.Content>
<AbsoluteLayout>
<ActivityIndicator x:Name="indicador" AbsoluteLayout.LayoutBounds="0.5,0.5,100,100" AbsoluteLayout.LayoutFlags="PositionProportional" Color="Blue"/>
<StackLayout>
<ListView x:Name="ListaContactos">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout>
<Image Source="{Binding Imagem}"/>
<Label Text="{Binding Nome}"/>
<Label Text="{Binding Email}"/>
<Label Text="{Binding Numero}"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</AbsoluteLayout>
</ContentPage.Content>
</ContentPage>
As Jason said, you can use CollectionView to do it.However,you should note that:
The CollectionView is currently an early preview, and lacks much of its planned functionality. In addition, the API will change as the implementation is completed.
And CollectionView is available in Xamarin.Forms 4.0-pre1.
If no problem with version, using code as follow:(Update: Adding Frame to code)
<StackLayout Margin="20,35,20,20">
<CollectionView ItemsSource="{Binding Monkeys}" >
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical"
Span="2" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout Padding="10">
<Frame BackgroundColor="LightGray"
OutlineColor="Black"
CornerRadius="10">
<Grid Padding="5" WidthRequest="120" HeightRequest="120">
<Grid.RowDefinitions>
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0"
Text="{Binding Name}"
FontAttributes="Bold"
LineBreakMode="TailTruncation" />
<Image Grid.Row="1"
Source="{Binding ImageUrl}"
Aspect="AspectFill"
HeightRequest="60"
WidthRequest="60" />
<Label Grid.Row="2"
Text="{Binding Location}"
LineBreakMode="TailTruncation"
FontAttributes="Italic"
VerticalOptions="End" />
<Label Grid.Row="3"
Text="{Binding Details}"
LineBreakMode="TailTruncation"
FontAttributes="Italic"
VerticalOptions="End" />
</Grid>
</Frame>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
Refer to official sample , binding source:
BindingContext = new MonkeysViewModel();
Here is the capture image of app.

How to reuse the same view in Xamarin? XAML

So I got this code that I need to re-use on more or less all my pages, but I'm getting kinda tired of changing one page and having to do the same thing in 10 or more places, are there any better way to do this?
Using Xamarin.Forms. Maybe it is possible to do this with a custom controller or some other way with markup extension to inside a stacklayout do a x:static reference to it?
<!--#region BOTTOM Navigation Bar-->
<!-- Theme Colored bar-->
<StackLayout Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3" Padding="0,0,0,0" Spacing="0" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Orientation="Horizontal" BackgroundColor="{StaticResource ThemeBkColor}" >
</StackLayout>
<!-- Bottom Menu bar -->
<StackLayout Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3" Padding="0,3,0,3" Spacing="0" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Orientation="Horizontal" BackgroundColor="{StaticResource ThemeBkColorBottomBar}" >
<!-- Left -->
<StackLayout Padding="15,0,0,0" Spacing="10" VerticalOptions="FillAndExpand" HorizontalOptions="StartAndExpand" Orientation="Horizontal" >
<StackLayout Orientation="Vertical" VerticalOptions="Center" HorizontalOptions="CenterAndExpand" Spacing="2">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding CmdGoToCheckUpdates}" NumberOfTapsRequired="1"/>
</StackLayout.GestureRecognizers>
<Image Source="updates.png" HeightRequest="35" WidthRequest="35" HorizontalOptions="Center" />
<Label Text="Updates" HorizontalOptions="Center" Style="{StaticResource BottomMenuBtnText}" />
</StackLayout>
</StackLayout>
<!-- Center -->
<StackLayout Padding="0,0,0,0" Orientation="Horizontal" Spacing="0" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" >
<Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Padding="0,0,0,0" RowSpacing="0" ColumnSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Row="0" Grid.Column="0" Orientation="Vertical" VerticalOptions="Center" HorizontalOptions="FillAndExpand" Spacing="2" >
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding CmdGoToCatalog}" NumberOfTapsRequired="1"/>
</StackLayout.GestureRecognizers>
<Image Source="catalogues.png" HeightRequest="35" WidthRequest="35" HorizontalOptions="Center">
</Image>
<Label Text="Catalog" HorizontalOptions="Center" Style="{StaticResource BottomMenuBtnText}" />
</StackLayout>
<StackLayout Grid.Row="0" Grid.Column="1" Orientation="Vertical" VerticalOptions="Center" HorizontalOptions="FillAndExpand" Spacing="2">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding CmdGoToPresentation}" NumberOfTapsRequired="1"/>
</StackLayout.GestureRecognizers>
<Image Source="display.png" HeightRequest="35" WidthRequest="35" HorizontalOptions="Center" >
</Image>
<Label Text="Presentations" HorizontalOptions="Center" Style="{StaticResource BottomMenuBtnText}" />
</StackLayout>
<StackLayout Grid.Row="0" Grid.Column="2" Orientation="Vertical" VerticalOptions="Center" HorizontalOptions="FillAndExpand" Spacing="2">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding CmdGoToScan}" NumberOfTapsRequired="1"/>
</StackLayout.GestureRecognizers>
<Image Source="scan.png" HeightRequest="35" WidthRequest="35" HorizontalOptions="Center">
</Image>
<Label Text="Scanner" HorizontalOptions="Center" Style="{StaticResource BottomMenuBtnText}" />
</StackLayout>
<StackLayout Grid.Row="0" Grid.Column="3" Orientation="Vertical" VerticalOptions="Center" HorizontalOptions="FillAndExpand" Spacing="2">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding CmdGoToSearch}" NumberOfTapsRequired="1"/>
</StackLayout.GestureRecognizers>
<Image Source="Search.png" HeightRequest="35" WidthRequest="35" HorizontalOptions="Center">
</Image>
<Label Text="Search" HorizontalOptions="Center" Style="{StaticResource BottomMenuBtnText}" />
</StackLayout>
</Grid>
</StackLayout>
<!-- Right -->
<StackLayout Padding="0,0,15,0" Spacing="10" VerticalOptions="FillAndExpand" HorizontalOptions="EndAndExpand" Orientation="Horizontal" >
<StackLayout Orientation="Vertical" VerticalOptions="Center" HorizontalOptions="CenterAndExpand" Spacing="2">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding CmdGoToLoginLogout}" NumberOfTapsRequired="1"/>
</StackLayout.GestureRecognizers>
<Image Source="logout.png" HeightRequest="35" WidthRequest="35" >
</Image>
<Label Text="Settings" HorizontalOptions="Center" Style="{StaticResource BottomMenuBtnText}" />
</StackLayout>
</StackLayout>
</StackLayout>
<!--#endregion-->
You can create a CustomView and then include that in your Pages.
In order to Achieve that, you create a a YourCustomView.xaml,
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="YourProject.YourCustomView">
</ContentView>
And, in your Page.xaml you include it
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:views="clr-namespace:YourProject;assembly=YourProject"
x:Class="YourProject.YourPage">
<views:YourCustomView/>
</ContentPage>
The next step is about Binding the properties that you need, for that, you need to create BindableProperties in your CustomView. You can reuse this in all pages that you want.