How to design the following grid view in Xamarin form in Xamarin iOS,Android - xaml

Needed same design of the form. My coding is this Xamarin form, Xamarin iOS, Android
<Frame Grid.Row="0" Grid.Column="0">
<Image
HeightRequest="50"
Source="Dash01.png"
WidthRequest="50" />
<Label Text="Cow Milk"/>
</Frame>
<BoxView
HeightRequest="3"
HorizontalOptions="Fill"
VerticalOptions="Start"
Color="DimGray" Grid.Row="1" Grid.Column="0" />


Try this Code
<StackLayout
Padding="0,10"
BackgroundColor="#e8f5e4"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<CollectionView
x:Name="foodList"
Grid.Row="1"
Margin="12,0"
HorizontalOptions="FillAndExpand"
ItemSizingStrategy="MeasureAllItems"
SelectionMode="Single"
VerticalOptions="FillAndExpand">
<CollectionView.ItemsLayout>
<GridItemsLayout
HorizontalItemSpacing="5"
Orientation="Vertical"
Span="2"
VerticalItemSpacing="5" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<Frame
Margin="5"
Padding="0"
BackgroundColor="Pink"
CornerRadius="10"
HorizontalOptions="FillAndExpand"
VerticalOptions="Fill">
<StackLayout
Margin="0,0,0,10"
Padding="10"
BackgroundColor="White"
HorizontalOptions="FillAndExpand"
VerticalOptions="Fill">
<Image
Aspect="AspectFit"
HeightRequest="50"
HorizontalOptions="Center"
Source="star.png" />
<Label
FontSize="18"
HorizontalOptions="Center"
HorizontalTextAlignment="Center"
Text="{Binding}" />
</StackLayout>
</Frame>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>

Related

Fit Image inside the frame XAML

I do have the following XAML code. And the output is as shown below in the picture. How can I achieve to fill the image within its grid in the frame? Thank you for your help.
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="10,20,10,0">
<Frame
Margin="5"
BackgroundColor="AntiqueWhite"
CornerRadius="20"
HasShadow="True"
HeightRequest="200"
HorizontalOptions="FillAndExpand">
<Grid RowDefinitions="7*,3*">
<Image
Grid.Row="0"
x:DataType="products:PopularProduct"
Aspect="AspectFill"
HorizontalOptions="FillAndExpand"
Source="{Binding FullImageUrl}"
VerticalOptions="FillAndExpand" />
</Grid>
</Frame>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>

I would make use of StackLayout with something like this
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout
HorizontalOptions="FillAndExpand"
Orientation="Horizontal"
VerticalOptions="FillAndExpand">
<Frame
Margin="10,20,10,20"
Padding="0"
BackgroundColor="AntiqueWhite"
HasShadow="False"
HeightRequest="200"
HorizontalOptions="FillAndExpand">
<StackLayout Orientation="Vertical">
<Frame
Padding="0"
CornerRadius="20"
HasShadow="True"
IsClippedToBounds="True">
<Grid RowDefinitions="7*,3*">
<Image
Grid.Row="0"
x:DataType="products:PopularProduct"
Aspect="AspectFill"
HorizontalOptions="FillAndExpand"
Source="{Binding FullImageUrl}"
VerticalOptions="FillAndExpand" />
<StackLayout
Grid.Row="1"
Margin="10"
Orientation="Vertical">
<Label Text="Any label if you want here" />
</StackLayout>
</Grid>
</Frame>
</StackLayout>
</Frame>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>

StackLayout Tableview cuts off half screen, but only on release mode

I am having some weird issues with my Tableview.
It cuts off half screen, but when I go on Debug mode it works fine.
I am using AbsoluteLayout but I am filling in the entire screen, at least what I think I am.
Only on this page though, all other pages look fine. This is the only page I am using a Tableview not sure if this is related. Only happen on iOS, and it affects when I download it from visual studio directly and also when I distribute it through App center so in this case I don't think it is the simulator or Visual studio. Any thoughts?
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Example123.MoreContentPage"
xmlns:local="clr-namespace:Example123.MarkupExtensions"
Title="More Settings">
<ContentPage.Content>
<AbsoluteLayout>
<StackLayout Padding="5" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All">
<TableView x:Name="MoreTable"
HasUnevenRows="True"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<TableRoot>
<TableSection>
<ViewCell>
<StackLayout Orientation="Horizontal"
BackgroundColor="#f7f7fb">
<Label Text="Preferences"
VerticalOptions="Center"
Margin="15,0,5,5"
FontSize="17"
Padding="10"
TextColor="#000"
FontAttributes="Bold"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="OpenFontSizing">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="settings.png"
Margin="10,10,0,10"
WidthRequest="23"/>
<Label Text="App Settings - Adjust text Size"
VerticalTextAlignment="Center"
Margin="15,5,10,5"
Padding="2"
x:Name="label1"/>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="Terms of Use"
VerticalOptions="Center"
Margin="15,0,5,5"
FontSize="17"
Padding="10"
TextColor="#000"
FontAttributes="Bold"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="OpenTermsandConditions">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="accept.png" WidthRequest="23" Margin="10,10,0,10"/>
<Label Text="Terms of Use"
Margin="15,5,10,5"
Padding="2"
VerticalTextAlignment="Center"
FontSize="{Binding H2Font}"
TextColor="#5e5e5e"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="DownloadRedirect">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="download.png" Margin="10,10,0,10" WidthRequest="23"/>
<Label Text="Download our App!"
VerticalOptions="CenterAndExpand"
Margin="15,5,10,5"
Padding="2"
VerticalTextAlignment="Center"
LineBreakMode="WordWrap"
x:Name="label2"/>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="Contact Specialty"
VerticalOptions="Center"
Margin="15,0,5,5"
Padding="10"
FontSize="17"
TextColor="#000"
FontAttributes="Bold"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="SendEmail">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="envelope.png" Margin="10,10,0,10" WidthRequest="23"/>
<Label Text="Feedback or Questions"
VerticalOptions="Center"
Margin="15,5,10,5"
VerticalTextAlignment="Center"
Padding="2"
x:Name="label3"/>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="News"
VerticalOptions="Center"
Margin="15,0,5,5"
Padding="10"
FontSize="17"
TextColor="#000"
FontAttributes="Bold"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="TWRedirect">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="twitterFinal.png" Margin="10,10,0,10"
WidthRequest="23" />
<Label Text="Product News"
VerticalOptions="Center"
Margin="15,5,10,5"
VerticalTextAlignment="Center"
Padding="2"
x:Name="label4"/>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="Share Market®"
VerticalOptions="Center"
Margin="15,0,5,5"
FontSize="17"
Padding="10"
TextColor="#000"
FontAttributes="Bold"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="SeasonalRedirect">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="search_share.png" Margin="10,10,0,10"
WidthRequest="23" />
<Label Text="In Season Now! List"
VerticalOptions="Center"
Margin="15,5,10,5"
VerticalTextAlignment="Center"
Padding="2"
x:Name="label5"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="SMRedirect">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="add.png" Margin="10,10,0,10" WidthRequest="23" />
<Label Text="Sign up for Share Market® HIghlights Newsletter"
VerticalOptions="Center"
Margin="15,5,10,5"
VerticalTextAlignment="Center"
Padding="2"
x:Name="label6"/>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="Social Networks"
VerticalOptions="Center"
Margin="15,5,10,5"
Padding="10"
FontSize="17"
TextColor="#000"
FontAttributes="Bold"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="FBRedirect" >
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="facebook.png" Margin="10,10,0,10" WidthRequest="23" />
<Label Text="Facebook"
VerticalOptions="Center"
Margin="15,0,5,0"
VerticalTextAlignment="Center"
Padding="2"
x:Name="label7"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="IGRedirect">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="instagram.png" Margin="10,10,0,10" WidthRequest="23"/>
<Label Text="Instagram"
VerticalOptions="Center"
Margin="15,0,5,0"
VerticalTextAlignment="Center"
Padding="2"
x:Name="label8"/>
</StackLayout>
</ViewCell>
</TableSection>
</TableRoot>
</TableView>
</StackLayout>
</AbsoluteLayout>

I ended up removing the StackLayout and adding the Layout Flags and Bounds to the TableView.
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Example123.MoreContentPage"
xmlns:local="clr-namespace:Example123.MarkupExtensions"
Title="More Settings">
<ContentPage.Content>
<AbsoluteLayout>
<TableView x:Name="MoreTable"
HasUnevenRows="True"
AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All">
<TableRoot>
<TableSection>
<ViewCell>
<StackLayout Orientation="Horizontal"
BackgroundColor="#f7f7fb">
<Label Text="Preferences"
VerticalOptions="Center"
Margin="15,0,5,5"
FontSize="17"
Padding="10"
TextColor="#000"
FontAttributes="Bold"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="OpenFontSizing">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="settings.png"
Margin="10,10,0,10"
WidthRequest="23"/>
<Label Text="App Settings - Adjust text Size"
VerticalTextAlignment="Center"
Margin="15,5,10,5"
Padding="2"
x:Name="label1"/>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="Terms of Use"
VerticalOptions="Center"
Margin="15,0,5,5"
FontSize="17"
Padding="10"
TextColor="#000"
FontAttributes="Bold"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="OpenTermsandConditions">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="accept.png" WidthRequest="23" Margin="10,10,0,10"/>
<Label Text="Terms of Use"
Margin="15,5,10,5"
Padding="2"
VerticalTextAlignment="Center"
FontSize="{Binding H2Font}"
TextColor="#5e5e5e"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="DownloadRedirect">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="download.png" Margin="10,10,0,10" WidthRequest="23"/>
<Label Text="Download our App!"
VerticalOptions="CenterAndExpand"
Margin="15,5,10,5"
Padding="2"
VerticalTextAlignment="Center"
LineBreakMode="WordWrap"
x:Name="label2"/>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="Contact Specialty"
VerticalOptions="Center"
Margin="15,0,5,5"
Padding="10"
FontSize="17"
TextColor="#000"
FontAttributes="Bold"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="SendEmail">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="envelope.png" Margin="10,10,0,10" WidthRequest="23"/>
<Label Text="Feedback or Questions"
VerticalOptions="Center"
Margin="15,5,10,5"
VerticalTextAlignment="Center"
Padding="2"
x:Name="label3"/>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="News"
VerticalOptions="Center"
Margin="15,0,5,5"
Padding="10"
FontSize="17"
TextColor="#000"
FontAttributes="Bold"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="TWRedirect">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="twitterFinal.png" Margin="10,10,0,10"
WidthRequest="23" />
<Label Text="Product News"
VerticalOptions="Center"
Margin="15,5,10,5"
VerticalTextAlignment="Center"
Padding="2"
x:Name="label4"/>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="Share Market®"
VerticalOptions="Center"
Margin="15,0,5,5"
FontSize="17"
Padding="10"
TextColor="#000"
FontAttributes="Bold"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="SeasonalRedirect">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="search_share.png" Margin="10,10,0,10"
WidthRequest="23" />
<Label Text="In Season Now! List"
VerticalOptions="Center"
Margin="15,5,10,5"
VerticalTextAlignment="Center"
Padding="2"
x:Name="label5"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="SMRedirect">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="add.png" Margin="10,10,0,10" WidthRequest="23" />
<Label Text="Sign up for Share Market® HIghlights Newsletter"
VerticalOptions="Center"
Margin="15,5,10,5"
VerticalTextAlignment="Center"
Padding="2"
x:Name="label6"/>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="Social Networks"
VerticalOptions="Center"
Margin="15,5,10,5"
Padding="10"
FontSize="17"
TextColor="#000"
FontAttributes="Bold"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="FBRedirect" >
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="facebook.png" Margin="10,10,0,10" WidthRequest="23" />
<Label Text="Facebook"
VerticalOptions="Center"
Margin="15,0,5,0"
VerticalTextAlignment="Center"
Padding="2"
x:Name="label7"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="IGRedirect">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="instagram.png" Margin="10,10,0,10" WidthRequest="23"/>
<Label Text="Instagram"
VerticalOptions="Center"
Margin="15,0,5,0"
VerticalTextAlignment="Center"
Padding="2"
x:Name="label8"/>
</StackLayout>
</ViewCell>
</TableSection>
</TableRoot>
</TableView>
</AbsoluteLayout>

Xamarin Forms Right center checkbox

Im making an Android application and Im trying to center right checkbox on all rows in the listview, but I cant do it.
I want do something like this. Thanks
https://imgur.com/FhecIT3
<StackLayout Orientation="Vertical">
<RelativeLayout>
<ListView ItemsSource="{Binding Funcionarios}"
HasUnevenRows="True"
Margin="20"
ItemTapped="ListView_ItemTapped">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal">
<image:CircleImage Source="{Binding Imagem}" Aspect="AspectFill" WidthRequest="60"
HeightRequest="60" BorderColor="Black" BorderThickness="2">
</image:CircleImage>
<StackLayout Orientation="Vertical">
<Label Text="{Binding Nome}" FontSize="Large"/>
<Label Text="{Binding Zona}"/>
<CheckBox IsChecked="False" />
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</RelativeLayout>
</StackLayout>

Try
<ViewCell>
<StackLayout Orientation="Horizontal">
<image:CircleImage Source="{Binding Imagem}" Aspect="AspectFill" WidthRequest="60" HeightRequest="60" BorderColor="Black" BorderThickness="2"> </image:CircleImage>
<StackLayout Orientation="Vertical">
<Label Text="{Binding Nome}" FontSize="Large"/>
<Label Text="{Binding Zona}"/>
</StackLayout>
<StackLayout Orientation="Vertical" HorizontalOptions="End">
<CheckBox IsChecked="False" VerticalOptions="Center"/>
</StackLayout>
</StackLayout>
</ViewCell>

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.

Height on Listview with imagecell inside a stacklayout

I am with a problem. I have a imagecell inside of a Listview, inside of a Frame and i put all inside a stacklayout.
My problem is that the height of the frame with the imagecell are too expensive. Now, i just have 2 items inside but the height is like the size of the page.
The XAML code:
<AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
<ScrollView>
<StackLayout Padding="10,20,10,10">
<Frame x:Name="frameOpcoes" OutlineColor="Gray" HasShadow="True" VerticalOptions="Fill" HorizontalOptions="FillAndExpand" BackgroundColor="White">
<StackLayout Padding="0,10,0,0" Orientation="Vertical">
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<StackLayout Orientation="Vertical" HorizontalOptions="Start">
<Label x:Name="lblOpcoes" Text="Placa: " TextColor="Gray" FontAttributes="Bold"/>
</StackLayout>
<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand">
<Entry x:Name="entryPlacaLetra" TextChanged="entryLetra_TextoAlterado" Keyboard="Text" TextColor="Black" BackgroundColor="#D3D3D3" />
</StackLayout>
<StackLayout Orientation="Vertical" HorizontalOptions="Fill">
<Label x:Name="lblTraco" Text="-" TextColor="Gray" FontAttributes="Bold"/>
</StackLayout>
<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand">
<Entry x:Name="entryPlacaNum" TextChanged="entryNum_textoAlterado" Keyboard="Numeric" TextColor="Black" BackgroundColor="#D3D3D3"/>
</StackLayout>
</StackLayout>
<StackLayout VerticalOptions="FillAndExpand">
<ListView x:Name="listView" HorizontalOptions="FillAndExpand" VerticalOptions="Start" HasUnevenRows="True" SeparatorVisibility="None">
<ListView.ItemTemplate>
<DataTemplate >
<ImageCell Text="{Binding Title}" Detail="{Binding Detail}" DetailColor="Gray" TextColor="Black" ImageSource="{Binding IconSource}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</StackLayout>
</Frame>
<StackLayout Padding="0,30,0,0" x:Name="stckCalculo" VerticalOptions="EndAndExpand">
<Button x:Name="btnCalcular" BorderColor="Silver" BackgroundColor="Red" TextColor="White" Text="Prosseguir" />
</StackLayout>
</StackLayout>
</ScrollView>
</StackLayout>
<StackLayout IsVisible="{Binding IsBusy}" Padding="12"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds="0.5,0.5,-1,-1">
<Frame Padding="50" OutlineColor="Black" HasShadow="true" AbsoluteLayout.LayoutFlags="PositionProportional" Opacity="0.8" BackgroundColor="Black" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
<ActivityIndicator IsRunning="{Binding IsBusy}" Color ="White"/>
<Label Text="Aguarde..." HorizontalOptions="Center" TextColor="White"/>
</Frame>
</StackLayout>
</AbsoluteLayout>

You can create a custom cell like this
<ListView x:Name="listView">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Image Source="{Binding image}" />
<Label Text="{Binding title}"
TextColor="#f35e20" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>