I am getting a strange error /bug. I have 2 buttons (Save and Clear) inside the grid and when user do not enter any data to fields then it shows the errors printed in labels which are in bottom of each controls.
I have used the scroll view and if design goes to the scrolling then my buttons inside the grid hides automatically. But when I select any picker or focus in any Entry then the Grid (Save and Clear) visible in Page.
I have not written any code in the picker selected Index change.
I am sharing me code. and attaching the screenShot of Page Thanks in advance.
<ContentPage.Content>
<ScrollView x:Name="MyScroll">
<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Padding="10">
<StackLayout>
<Entry Text="{Binding BindProductInvModel.ProductInvID}" Margin="0" FontSize="1" IsVisible="false" HorizontalOptions="FillAndExpand" />
<Label Text="Product Name" Margin="2,-2" FontAttributes="Bold" />
<Picker x:Name="ProductName" Margin="2,-10,2,5" HorizontalOptions="FillAndExpand"
ItemsSource="{Binding BindProductList}"
ItemDisplayBinding="{Binding ProductName}"
SelectedItem="{Binding BindSelectedProduct,Mode=TwoWay}"
Title="{Binding BindCommonDisplayName.PickerTitleDisplayName}"/>
<Label x:Name="ProductIDError" Margin="2,-10,2,5" TextColor="Red" IsVisible="false" FontAttributes="Italic" />
<Label Text="Quanity" Margin="2,-10" FontAttributes="Bold" />
<Entry x:Name="Quantity" Text="{Binding BindProductInvModel.Quantity}" Unfocused="Entry_Unfocused" Focused="Entry_Focused"
Margin="2,-5,2,5" WidthRequest="150" ReturnType="Next"
HorizontalOptions="FillAndExpand" Keyboard="Numeric" />
<Label x:Name="QuantityError" Margin="2,-10,2,5"
TextColor="Red" IsVisible="false" FontAttributes="Italic" />
<Label Text="Unit" Margin="2,-10" FontAttributes="Bold" />
<Entry x:Name="Unit" Text="{Binding BindProductInvModel.Unit}" IsReadOnly="True"
Margin="2,-5,2,5" WidthRequest="150" ReturnType="Next"
HorizontalOptions="FillAndExpand" Keyboard="Numeric" />
<Label x:Name="UnitError" Margin="2,-10,2,5" TextColor="Red" IsVisible="false" FontAttributes="Italic" />
<Label Text="Vendor Name" Margin="2,-10" FontAttributes="Bold" />
<Picker x:Name="VendorName" Margin="2,-5,2,5" ItemsSource="{Binding BindVendorList}"
ItemDisplayBinding="{Binding VendorName}"
SelectedItem="{Binding BindSelectedVendor,Mode=TwoWay}"
Title="{Binding BindCommonDisplayName.PickerTitleDisplayName}" HorizontalOptions="FillAndExpand" />
<Label x:Name="VendorIDError" Margin="2,-10,2,5" TextColor="Red" IsVisible="false" FontAttributes="Italic" />
<Label Text="Receiving Date" Margin="2,-12" FontAttributes="Bold" />
<DatePicker x:Name="PickerRecvDate" Margin="2,-5,2,5" Date="{Binding BindProductInvModel.ReceivingDate,Mode=TwoWay}"
HorizontalOptions="FillAndExpand" Format="dd-MM-yyyy" />
<Label Text="Price" Margin="2,-12" FontAttributes="Bold" />
<Entry x:Name="Price" Text="{Binding BindProductInvModel.Price}" Unfocused="Entry_Unfocused" Focused="Entry_Focused"
Margin="2,-5,2,5" WidthRequest="150" ReturnType="Next"
HorizontalOptions="FillAndExpand" Keyboard="Numeric" />
<Label x:Name="PriceError" Margin="2,-10,2,5"
TextColor="Red" IsVisible="false" FontAttributes="Italic" />
<Label Text="Fair" Margin="2,-12" FontAttributes="Bold" />
<Entry x:Name="Fair" Text="{Binding BindProductInvModel.Fair}" Unfocused="Entry_Unfocused" Focused="Entry_Focused"
Margin="2,-5,2,5" WidthRequest="150" ReturnType="Next"
HorizontalOptions="FillAndExpand" Keyboard="Numeric" />
<Label x:Name="FairError" Margin="2,-10,2,5"
TextColor="Red" IsVisible="false" FontAttributes="Italic" />
<Label Text="OtherCharges" Margin="2,-12" FontAttributes="Bold" />
<Entry x:Name="OtherCharges" Text="{Binding BindProductInvModel.OtherCharges}" Unfocused="Entry_Unfocused" Focused="Entry_Focused"
Margin="2,-5,2,5" WidthRequest="150" ReturnType="Next"
HorizontalOptions="FillAndExpand" Keyboard="Numeric" />
<Label x:Name="OtherChargesError" Margin="2,-10,2,5"
TextColor="Red" IsVisible="false" FontAttributes="Italic" />
<Label Text="Total"
Margin="2,-12" FontAttributes="Bold" />
<Entry Text="{Binding BindProductInvModel.Total}"
Margin="2,-5,2,5" WidthRequest="150" ReturnType="Next" IsEnabled="False"
HorizontalOptions="FillAndExpand" Keyboard="Numeric" />
<Label x:Name="TotalError" Margin="2,-10,2,5"
TextColor="Red" IsVisible="false" FontAttributes="Italic" />
</StackLayout>
<StackLayout>
<Grid HorizontalOptions="FillAndExpand" Margin="2,-12">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Button Text="Save" x:Name="BtnSave"
HorizontalOptions="FillAndExpand" CornerRadius="10"
BorderWidth="2" BackgroundColor="#ff6633" TextColor="#fff"
Margin="2" Grid.Column="0" Grid.Row="0" Command="{Binding SaveCommand}" />
<Button Text="Clear" x:Name="BtnClear" HorizontalOptions="FillAndExpand"
CornerRadius="10" BorderWidth="2" BackgroundColor="#bfbfbf"
TextColor="#fff" Margin="2" Grid.Column="1" Grid.Row="0" Command="{Binding ClearCommand}" />
</Grid>
</StackLayout>
</StackLayout>
</ScrollView>
</ContentPage.Content>
If you want to make the grid with buttons always visable when you scroll or select any picker, you could make the buttons outside the scrollview.
<StackLayout>
<ScrollView x:Name="MyScroll">
<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Padding="10">
<StackLayout>
<Entry Text="{Binding BindProductInvModel.ProductInvID}" Margin="0" FontSize="1" IsVisible="false" HorizontalOptions="FillAndExpand" />
<Label Text="Product Name" Margin="2,-2" FontAttributes="Bold" />
<Picker x:Name="ProductName" Margin="2,-10,2,5" HorizontalOptions="FillAndExpand"
ItemsSource="{Binding BindProductList}"
ItemDisplayBinding="{Binding ProductName}"
SelectedItem="{Binding BindSelectedProduct,Mode=TwoWay}"
Title="{Binding BindCommonDisplayName.PickerTitleDisplayName}"/>
<Label x:Name="ProductIDError" Margin="2,-10,2,5" TextColor="Red" IsVisible="false" FontAttributes="Italic" />
<Label Text="Quanity" Margin="2,-10" FontAttributes="Bold" />
<Entry x:Name="Quantity" Text="{Binding BindProductInvModel.Quantity}" Unfocused="Entry_Unfocused" Focused="Entry_Focused"
Margin="2,-5,2,5" WidthRequest="150" ReturnType="Next"
HorizontalOptions="FillAndExpand" Keyboard="Numeric" />
<Label x:Name="QuantityError" Margin="2,-10,2,5"
TextColor="Red" IsVisible="false" FontAttributes="Italic" />
<Label Text="Unit" Margin="2,-10" FontAttributes="Bold" />
<Entry x:Name="Unit" Text="{Binding BindProductInvModel.Unit}" IsReadOnly="True"
Margin="2,-5,2,5" WidthRequest="150" ReturnType="Next"
HorizontalOptions="FillAndExpand" Keyboard="Numeric" />
<Label x:Name="UnitError" Margin="2,-10,2,5" TextColor="Red" IsVisible="false" FontAttributes="Italic" />
<Label Text="Vendor Name" Margin="2,-10" FontAttributes="Bold" />
<Picker x:Name="VendorName" Margin="2,-5,2,5" ItemsSource="{Binding BindVendorList}"
ItemDisplayBinding="{Binding VendorName}"
SelectedItem="{Binding BindSelectedVendor,Mode=TwoWay}"
Title="{Binding BindCommonDisplayName.PickerTitleDisplayName}" HorizontalOptions="FillAndExpand" />
<Label x:Name="VendorIDError" Margin="2,-10,2,5" TextColor="Red" IsVisible="false" FontAttributes="Italic" />
<Label Text="Receiving Date" Margin="2,-12" FontAttributes="Bold" />
<DatePicker x:Name="PickerRecvDate" Margin="2,-5,2,5" Date="{Binding BindProductInvModel.ReceivingDate,Mode=TwoWay}"
HorizontalOptions="FillAndExpand" Format="dd-MM-yyyy" />
<Label Text="Price" Margin="2,-12" FontAttributes="Bold" />
<Entry x:Name="Price" Text="{Binding BindProductInvModel.Price}" Unfocused="Entry_Unfocused" Focused="Entry_Focused"
Margin="2,-5,2,5" WidthRequest="150" ReturnType="Next"
HorizontalOptions="FillAndExpand" Keyboard="Numeric" />
<Label x:Name="PriceError" Margin="2,-10,2,5"
TextColor="Red" IsVisible="false" FontAttributes="Italic" />
<Label Text="Fair" Margin="2,-12" FontAttributes="Bold" />
<Entry x:Name="Fair" Text="{Binding BindProductInvModel.Fair}" Unfocused="Entry_Unfocused" Focused="Entry_Focused"
Margin="2,-5,2,5" WidthRequest="150" ReturnType="Next"
HorizontalOptions="FillAndExpand" Keyboard="Numeric" />
<Label x:Name="FairError" Margin="2,-10,2,5"
TextColor="Red" IsVisible="false" FontAttributes="Italic" />
<Label Text="OtherCharges" Margin="2,-12" FontAttributes="Bold" />
<Entry x:Name="OtherCharges" Text="{Binding BindProductInvModel.OtherCharges}" Unfocused="Entry_Unfocused" Focused="Entry_Focused"
Margin="2,-5,2,5" WidthRequest="150" ReturnType="Next"
HorizontalOptions="FillAndExpand" Keyboard="Numeric" />
<Label x:Name="OtherChargesError" Margin="2,-10,2,5"
TextColor="Red" IsVisible="false" FontAttributes="Italic" />
<Label Text="Total"
Margin="2,-12" FontAttributes="Bold" />
<Entry Text="{Binding BindProductInvModel.Total}"
Margin="2,-5,2,5" WidthRequest="150" ReturnType="Next" IsEnabled="False"
HorizontalOptions="FillAndExpand" Keyboard="Numeric" />
<Label x:Name="TotalError" Margin="2,-10,2,5"
TextColor="Red" IsVisible="false" FontAttributes="Italic" />
</StackLayout>
</StackLayout>
</ScrollView>
<StackLayout>
<Grid HorizontalOptions="FillAndExpand" Margin="2,-12">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Button Text="Save" x:Name="BtnSave"
HorizontalOptions="FillAndExpand" CornerRadius="10"
BorderWidth="2" BackgroundColor="#ff6633" TextColor="#fff"
Margin="2" Grid.Column="0" Grid.Row="0" Command="{Binding SaveCommand}" />
<Button Text="Clear" x:Name="BtnClear" HorizontalOptions="FillAndExpand"
CornerRadius="10" BorderWidth="2" BackgroundColor="#bfbfbf"
TextColor="#fff" Margin="2" Grid.Column="1" Grid.Row="0" Command="{Binding ClearCommand}" />
</Grid>
</StackLayout>
</StackLayout>
It was a bug workaround:
Wrapping the ScrollView in a ContentView seems to be a good workaround.
<ContentPage.Content>
<ContentView>
<ScrollView VerticalOptions="FillAndExpand">
<StackLayout>
<!-- Content -->
</StackLayout>
</ScrollView>
</ContentView>
</ContentPage.Content>
https://github.com/xamarin/Xamarin.Forms/issues/13597
Title: app_nome -> TWW / SALDO - HOSPITAL... (Example)
Time: dt_cadastro_hora -> 08:56 (Example)
NotificationsPage.xaml
<RefreshView x:DataType="local:NotificacoesViewModel"
Command="{Binding LoadItemsCommand}"
IsRefreshing="{Binding IsBusy, Mode=TwoWay}"
Padding="0,15,0,0">
<CollectionView x:Name="ItemsListView"
ItemsSource="{Binding Notificacoes}"
SelectionMode="None"
ItemsUpdatingScrollMode="KeepItemsInView"
VerticalScrollBarVisibility="Never"
HorizontalScrollBarVisibility="Never"
IsGrouped="True">
<CollectionView.GroupHeaderTemplate>
<DataTemplate x:DataType="model:NotificacaoGrupoData">
<Label Text="{Binding Data_agrupada}"
FontSize="20"
FontAttributes="Bold"
HorizontalTextAlignment="Center"
Padding="0,15,0,15"
Style="{StaticResource LabelDataAgrupadaStyle}"/>
</DataTemplate>
</CollectionView.GroupHeaderTemplate>
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout x:DataType="model:Notificacao">
<StackLayout Orientation="Horizontal">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="1"
Command="{Binding Source={RelativeSource AncestorType={x:Type local:NotificacoesViewModel}},
Path=NotificacaoSelecionada}"
CommandParameter="{Binding .}"/>
</StackLayout.GestureRecognizers>
<Image Source="logo"
HeightRequest="40"
Margin="0,0,5,0"
VerticalOptions="CenterAndExpand"/>
<StackLayout VerticalOptions="CenterAndExpand"
Margin="0,0,10,0">
<FlexLayout JustifyContent="SpaceBetween"
AlignItems="Center">
<Label Text="{Binding app_nome}"
Style="{StaticResource LabelStyle}"
FontSize="20"
WidthRequest="230"
LineBreakMode="TailTruncation"
FontAttributes="Bold"/>
<Label Text="{Binding dt_cadastro_hora}"
Style="{StaticResource LabelStyle}"
FontSize="13"
LineBreakMode="NoWrap"
MinimumWidthRequest="50"
FontAttributes="Bold"/>
</FlexLayout>
<Label Text="{Binding mensagem}"
TextType="Html"
LineBreakMode="TailTruncation"
Style="{StaticResource LabelStyle}"/>
</StackLayout>
<Label Text=""
FontFamily="FontAwesomeBold"
TextColor="#ACACAC"
FontSize="24"
HorizontalOptions="EndAndExpand"
VerticalOptions="CenterAndExpand"
Style="{StaticResource LabelStyle}">
</Label>
</StackLayout>
<BoxView HeightRequest="1"
BackgroundColor="#DDDDDD"
Margin="0,5,0,5"/>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</RefreshView>
You can try replace
<FlexLayout JustifyContent="SpaceBetween"
AlignItems="Center">
<Label Text="{Binding app_nome}"
Style="{StaticResource LabelStyle}"
FontSize="20"
WidthRequest="230"
LineBreakMode="TailTruncation"
FontAttributes="Bold"/>
<Label Text="{Binding dt_cadastro_hora}"
Style="{StaticResource LabelStyle}"
FontSize="13"
LineBreakMode="NoWrap"
MinimumWidthRequest="50"
FontAttributes="Bold"/>
</FlexLayout>
By (notice the HorizontalOptions)
<StackLayout Orientation="Horizontal">
<Label Text="{Binding app_nome}"
Style="{StaticResource LabelStyle}"
HorizontalOptions="StartAndExpand"
FontSize="20"
WidthRequest="230"
LineBreakMode="TailTruncation"
FontAttributes="Bold"/>
<Label Text="{Binding dt_cadastro_hora}"
Style="{StaticResource LabelStyle}"
HorizontalOptions="End"
FontSize="13"
LineBreakMode="NoWrap"
MinimumWidthRequest="50"
FontAttributes="Bold"/>
</StackLayout>
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>
I have four frames, I want to enter in that number. When running on Windows, the numbers are fully visible, but when I run on Android, numbers are not visible or half appear.
I do not want to change outlines so that they get out of shape
And change their appearance
I'm beginner in xamarin
Please advise me to display the numbers correctly while running on Android without changing the appearance of my frames.
XAML:
<Style TargetType="Frame" >
<Setter Property="BackgroundColor" Value="White"/>
<Setter Property="CornerRadius" Value="15"/>
<Setter Property="HeightRequest" Value="30"/>
<Setter Property="BorderColor" Value="Blue"/>
<Setter Property="Margin" Value="3"/>
</Style>
</ContentPage.Resources>
<StackLayout BackgroundColor="White" Orientation="Vertical" >
<Image Source="d.png" WidthRequest="60" HeightRequest="60" Margin="0,5,0,5"/>
<BoxView WidthRequest="40" HeightRequest="60" BackgroundColor="Pink" HorizontalOptions="Center"/>
<Label Text="کد ارسال شده را اینجا وارد کنید" TextColor="Black" FontSize="15" HorizontalOptions="Center" Margin="0,5,0,0"
VerticalOptions="Center"/>
<StackLayout Orientation="Horizontal" HorizontalOptions="Center" Spacing="10" BackgroundColor="White">
<Frame WidthRequest="80" x:Name="frame1" >
<Entry Keyboard="Numeric" TextColor="Black" FontSize="20" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" MaxLength="1"
HorizontalTextAlignment="Center" Focused="Entry_Focused" Unfocused="Entry_unFocused" />
</Frame>
<Frame WidthRequest="80" x:Name="frame2" >
<Entry Keyboard="Numeric" TextColor="Black" FontSize="20" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
HorizontalTextAlignment="Center" MaxLength="1" Focused="Entry_Focused1" Unfocused="Entry_unFocused1" />
</Frame>
<Frame WidthRequest="80" x:Name="frame3" >
<Entry Keyboard="Numeric" TextColor="Black" FontSize="20" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
HorizontalTextAlignment="Center" Focused="Entry_Focused2" Unfocused="Entry_unFocused2" MaxLength="1" />
</Frame>
<Frame WidthRequest="80" x:Name="frame4"
>
<Entry Keyboard="Numeric" FontSize="20" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
MaxLength="1" HorizontalTextAlignment="Center" Focused="Entry_Focused3" Unfocused="Entry_unFocused3" />
</Frame>
</StackLayout>
<Button x:Name="Button" Text="تایید" TextColor="White" BackgroundColor="Green" HorizontalOptions="Center"
VerticalOptions="End" WidthRequest="340" HeightRequest="50" CornerRadius="5" Margin="0,10,0,10"/>
</StackLayout>
You can set the specific heightrequest for android in the Frame
Here is running screenshot in android.
Here is code.
<Frame x:Name="frame1" WidthRequest="80" >
<Entry Keyboard="Numeric" TextColor="Black" FontSize="20" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" MaxLength="1"
HorizontalTextAlignment="Center" Focused="Entry_Focused" Unfocused="Entry_Unfocused" >
</Entry>
<Frame.HeightRequest>
<OnPlatform Android="50" ></OnPlatform>
</Frame.HeightRequest>
</Frame>
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>