issue with xaml alignment xamarin forms - xaml

I am working on Xamarin form cross app. I am using Navigation drawer where I need to show items/subitems . Single are showing properly but issue is with items and subitem.. in that case.. text is showing vertically.
This is screen shot of current code
Now you can see that text are appearing vertically and same for sub menu items..
I actually want to show like below
My xaml is as below
<MasterDetailPage.Master>
<ContentPage Title="Menu" BackgroundColor="{StaticResource WhiteColor}">
<ScrollView>
<StackLayout Orientation="Vertical">
<!--
This StackLayout you can use for other
data that you want to have in your menu drawer
-->
<StackLayout BackgroundColor="{StaticResource BlueColor}"
HeightRequest="75">
<Label Text="Menu"
FontSize="20"
VerticalOptions="CenterAndExpand"
TextColor="White"
HorizontalOptions="Center"/>
</StackLayout>
<StackLayout>
<!--DashBoard-->
<StackLayout VerticalOptions="CenterAndExpand"
Orientation="Horizontal"
Padding="20,10,0,0"
Spacing="20">
<Image Source="dashbaordmenuicon.png"
WidthRequest="30"
HeightRequest="30"
VerticalOptions="Center" />
<Label Text="Dashboards"
FontSize="18"
VerticalOptions="Center"
FontFamily="ProximaNova"
TextColor="#637188"/>
<StackLayout VerticalOptions="CenterAndExpand"
Orientation="Horizontal"
Padding="30,5,0,10"
Spacing="20">
<Image Source="summarymenuicon.png"
WidthRequest="30"
HeightRequest="30"
VerticalOptions="Center" />
<Label Text="Summary"
FontSize="15"
VerticalOptions="Center"
FontFamily="ProximaNova"
TextColor="#98a4b4"/>
</StackLayout>
<StackLayout VerticalOptions="CenterAndExpand"
Orientation="Horizontal"
Padding="30,5,0,10"
Spacing="20">
<Image Source="spendinghistoryicon.png"
WidthRequest="30"
HeightRequest="30"
VerticalOptions="Center" />
<Label Text="pending History"
FontSize="18"
VerticalOptions="Center"
FontFamily="ProximaNova"
TextColor="#98a4b4"/>
</StackLayout>
</StackLayout>
</StackLayout>
<!--Dreams-->
<StackLayout VerticalOptions="FillAndExpand"
Orientation="Horizontal"
Padding="20,10,0,0"
Spacing="20">
<Image Source="dreamsicon.png"
WidthRequest="30"
HeightRequest="30"
VerticalOptions="Center" />
<Label Text="Dreams"
FontSize="18"
VerticalOptions="Center"
FontFamily="ProximaNova"
TextColor="#637188"/>
<StackLayout VerticalOptions="FillAndExpand"
Orientation="Horizontal"
Padding="30,5,0,10"
Spacing="20">
<Image Source="adddreamicon.png"
WidthRequest="30"
HeightRequest="30"
VerticalOptions="Center" />
<Label Text="Add Dream"
FontSize="15"
VerticalOptions="Center"
FontFamily="ProximaNova"
TextColor="#98a4b4"/>
</StackLayout>
</StackLayout>
<!--Financial Management-->
<StackLayout VerticalOptions="FillAndExpand"
Orientation="Horizontal"
Padding="20,10,0,0"
Spacing="20">
<Image Source="financialmanagementicon.png"
WidthRequest="30"
HeightRequest="30"
VerticalOptions="Center" />
<Label Text="Financial Management"
FontSize="18"
VerticalOptions="Center"
FontFamily="ProximaNova"
TextColor="#637188"/>
<StackLayout VerticalOptions="FillAndExpand"
Orientation="Horizontal"
Padding="30,5,0,10"
Spacing="20">
<Image Source="addicon.png"
WidthRequest="30"
HeightRequest="30"
VerticalOptions="Center" />
<Label Text="Add Income"
FontSize="15"
VerticalOptions="Center"
FontFamily="ProximaNova"
TextColor="#98a4b4"/>
</StackLayout>
<StackLayout VerticalOptions="FillAndExpand"
Orientation="Horizontal"
Padding="30,5,0,10"
Spacing="20">
<Image Source="addicon.png"
WidthRequest="30"
HeightRequest="30"
VerticalOptions="Center" />
<Label Text="Add Expense"
FontSize="15"
VerticalOptions="Center"
FontFamily="ProximaNova"
TextColor="#98a4b4"/>
</StackLayout>
<StackLayout VerticalOptions="FillAndExpand"
Orientation="Horizontal"
Padding="30,5,0,10"
Spacing="20">
<Image Source="addicon.png"
WidthRequest="30"
HeightRequest="30"
VerticalOptions="Center" />
<Label Text="Add Virtual Account"
FontSize="15"
VerticalOptions="Center"
FontFamily="ProximaNova"
TextColor="#98a4b4"/>
</StackLayout>
<StackLayout VerticalOptions="FillAndExpand"
Orientation="Horizontal"
Padding="30,5,0,10"
Spacing="20">
<Image Source="linkaccounticon.png"
WidthRequest="30"
HeightRequest="30"
VerticalOptions="Center" />
<Label Text="Link Account"
FontSize="15"
VerticalOptions="Center"
FontFamily="ProximaNova"
TextColor="#98a4b4"/>
</StackLayout>
<StackLayout VerticalOptions="FillAndExpand"
Orientation="Horizontal"
Padding="30,5,0,10"
Spacing="20">
<Image Source="budgeticon.png"
WidthRequest="29"
HeightRequest="30"
VerticalOptions="Center" />
<Label Text="Budget"
FontSize="15"
VerticalOptions="Center"
FontFamily="ProximaNova"
TextColor="#98a4b4"/>
</StackLayout>
</StackLayout>
<!--Settings-->
<StackLayout VerticalOptions="FillAndExpand"
Orientation="Horizontal"
Padding="20,10,0,0"
Spacing="20">
<Image Source="settingsicon.png"
WidthRequest="30"
HeightRequest="30"
VerticalOptions="Center" />
<Label Text="Settings"
FontSize="18"
VerticalOptions="Center"
FontFamily="ProximaNova"
TextColor="#637188"/>
</StackLayout>
<!--Subcription-->
<StackLayout VerticalOptions="FillAndExpand"
Orientation="Horizontal"
Padding="20,10,0,0"
Spacing="20">
<Image Source="subscriptionicon.png"
WidthRequest="30"
HeightRequest="30"
VerticalOptions="Center" />
<Label Text="Subcription"
FontSize="18"
VerticalOptions="Center"
FontFamily="ProximaNova"
TextColor="#637188"/>
</StackLayout>
<!--Feedback-->
<StackLayout VerticalOptions="FillAndExpand"
Orientation="Horizontal"
Padding="20,10,0,0"
Spacing="20">
<Image Source="feedbackicon.png"
WidthRequest="30"
HeightRequest="30"
VerticalOptions="Center" />
<Label Text="Feedback"
FontSize="18"
VerticalOptions="Center"
FontFamily="ProximaNova"
TextColor="#637188"/>
</StackLayout>
</StackLayout>
</ScrollView>
</ContentPage>
</MasterDetailPage.Master>


You need to add parent stack layout like :
<StackLayout>
<StackLayout VerticalOptions="CenterAndExpand"
Orientation="Horizontal"
Padding="20,10,0,0"
Spacing="20">
<Image Source="dashbaordmenuicon.png"
WidthRequest="40"
HeightRequest="40"
VerticalOptions="Center" />
<Label Text="Dashboards"
FontSize="18"
VerticalOptions="Center"
FontFamily="ProximaNova"
TextColor="#637188"/>
</StackLayout>
<StackLayout VerticalOptions="CenterAndExpand"
Orientation="Horizontal"
Padding="30,5,0,10"
Spacing="20">
<Image Source="summarymenuicon.png"
WidthRequest="40"
HeightRequest="40"
VerticalOptions="Center" />
<Label Text="Summary"
FontSize="15"
VerticalOptions="Center"
FontFamily="ProximaNova"
TextColor="#98a4b4"/>
</StackLayout>
<StackLayout VerticalOptions="CenterAndExpand"
Orientation="Horizontal"
Padding="30,5,0,10"
Spacing="20">
<Image Source="spendinghistoryicon.png"
WidthRequest="40"
HeightRequest="40"
VerticalOptions="Center" />
<Label Text="pending History"
FontSize="18"
VerticalOptions="Center"
FontFamily="ProximaNova"
TextColor="#98a4b4"/>
</StackLayout>
</StackLayout>

Related

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>

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

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>

Build a frame with pointer

I want to to build a frame like the below one with a pointer, in this case the triangle on the right:
How can this be done?

Create two stacked BoxViews using a Grid, and rotate the top one by 45 degrees:
<StackLayout>
<Grid HorizontalOptions="Center" VerticalOptions="CenterAndExpand" WidthRequest="100" HeightRequest="100">
<BoxView HorizontalOptions="Center" VerticalOptions="CenterAndExpand" WidthRequest="100" HeightRequest="80" BackgroundColor="Red"/>
<BoxView HorizontalOptions="End" VerticalOptions="CenterAndExpand"
WidthRequest="50" HeightRequest="50" BackgroundColor="Red" Rotation="45"/>
<StackLayout VerticalOptions="Center" HorizontalOptions="Center" Spacing="0">
<Label HorizontalTextAlignment="Center" CharacterSpacing="2" FontSize="13" TextColor="White" Text="DECEMBER"/>
<Label HorizontalTextAlignment="Center" FontAttributes="Bold" FontSize="22" TextColor="White" Text="25"/>
<Label HorizontalTextAlignment="Center" CharacterSpacing="2" FontSize="13" TextColor="White" Text="WEDNESDAY"/>
</StackLayout>
</Grid>
</StackLayout>

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>