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
Related
I am working on a design for Dotnet Maui but not able to achieve the depth as per design.
I have tried box frame but was not been able to achieve the top shadow and circle cut. I have also created this as a floating button.
ContentPage
Grid ->
<HorizontalStackLayout VerticalOptions="End" Margin="0,0,0,10">
<Grid RowDefinitions="22,15" HorizontalOptions="Center" Margin="28,20,10,0">
<ImageButton Source="homeicon.svg"
WidthRequest="20"
HeightRequest="22"
HorizontalOptions="Center"
VerticalOptions="Center"
Grid.Row="0"
/>
<Label Grid.Row="1" Text="Home"
FontFamily="WorkSansRegular"
FontSize="12"
/>
</Grid>
<Grid RowDefinitions="22,15" HorizontalOptions="Center" Margin="28,20,10,0">
<ImageButton Source="wallet.svg"
WidthRequest="20"
HeightRequest="22"
HorizontalOptions="Center"
VerticalOptions="Center"
Grid.Row="0"
/>
<Label Grid.Row="1" Text="Wallet"
FontFamily="WorkSansRegular"
FontSize="12"
/>
</Grid>
<Ellipse Margin="16,-15,0,0"
Fill="#AFAFAF"
StrokeThickness="4"
WidthRequest="70"
HeightRequest="70"
HorizontalOptions="Start"
VerticalOptions="Start"
/>
<ImageButton Source="centericon.svg"
WidthRequest="60"
HeightRequest="62"
HorizontalOptions="Center"
VerticalOptions="Center"
Margin="-65,-15,0,0"
/>
<Grid RowDefinitions="22,15" HorizontalOptions="Center" Margin="28,20,0,0">
<ImageButton Source="activityicon.svg"
WidthRequest="20"
HeightRequest="22"
HorizontalOptions="Center"
VerticalOptions="Center"
Grid.Row="0"
/>
<Label Grid.Row="1" Text="Activity" FontFamily="WorkSansRegular"
FontSize="12"
/>
</Grid>
<Grid RowDefinitions="22,15" HorizontalOptions="Center" Margin="28,20,0,0">
<ImageButton Source="profileicon.svg"
WidthRequest="20"
HeightRequest="22"
HorizontalOptions="Center"
VerticalOptions="Center"
Grid.Row="0"
/>
<Label Grid.Row="1" Text="Profile" FontFamily="WorkSansRegular"
FontSize="12"
/>
</Grid>
</HorizontalStackLayout>
this part of the code is under
<ContentPage -> Grid ->
I'm creating an app using MAUI and I'm trying to make it so an ImageButton and SearchBar nested in a VerticalStackLayout move positioning based on the dynamically created CollectionView.
This is the code for the UI:
<Grid>
<FlexLayout VerticalOptions="Center" HorizontalOptions="Center">
<StackLayout>
<CollectionView x:Name="taskList">
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="models:Task">
<VerticalStackLayout Margin="15">
<Entry Text="{Binding name}" IsReadOnly="True" />
<Entry Text="{Binding departmentsString}" IsReadOnly="True"/>
<HorizontalStackLayout>
<Entry Text="{Binding status}" IsReadOnly="True"/>
<Entry Text="{Binding deadline}" IsReadOnly="True" />
<Entry Text="{Binding author.fullName}" IsReadOnly="True"/>
</HorizontalStackLayout>
<Entry Text="{Binding description}" IsReadOnly="True" />
</VerticalStackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
<VerticalStackLayout Margin="15">
<Entry Placeholder="Name" x:Name="nameTxt"/>
<Entry Placeholder="Department" x:Name="departTxt"/>
<HorizontalStackLayout>
<inputs:SfComboBox x:Name="statusTxt" Placeholder="Status" BackgroundColor="Black" TextColor="Green" DropDownIconColor="Green"/>
<Entry Placeholder="deadline" x:Name="deadlineTxt"/>
<Entry Placeholder="Author" x:Name="authorTxt"/>
</HorizontalStackLayout>
<Entry Placeholder="Description" x:Name="descTxt"/>
</VerticalStackLayout>
</FlexLayout>
<VerticalStackLayout VerticalOptions="Center" >
<SearchBar Placeholder="Search" x:Name="searchBar" TextChanged="searchBar_TextChanged" MaxLength="30" MaximumWidthRequest="200"/>
<ImageButton Aspect="AspectFill" x:Name="addBtn" Source="plus.png" BackgroundColor="Black" Clicked="addBtn_Clicked" HeightRequest="64" WidthRequest="64"/>
</VerticalStackLayout>
</Grid>
I have tried every different type of Layout but nothing works.
What should I do?
I am trying to make a frame a specific size but the frame seems to only match the size with components inside of the frame.
I tried finding solutions but couldn't find anything, perhaps I am searching for the wrong things.
The XAML:
<ScrollView>
<VerticalStackLayout
Spacing="25"
Padding="30,0"
VerticalOptions="Center">
<Frame BackgroundColor="#303030"
Padding="8" CornerRadius="5"
HeightRequest="500" WidthRequest="500">
<StackLayout Spacing="10">
<Label Text="Login" FontSize="Medium" FontAttributes="Bold" />
<BoxView Color="{DynamicResource Primary}" HeightRequest="2" HorizontalOptions="Fill" />
<Entry Placeholder="Username" />
<Entry Placeholder="Password" IsPassword="True" />
<Button Text="Login" BackgroundColor="{DynamicResource Primary}" TextColor="{DynamicResource White}" />
</StackLayout>
</Frame>
</VerticalStackLayout>
</ScrollView>
What it looks like:
What I want it to look like:
View toolmakersteve's response if you have this "issue" too!
Code:
<ScrollView>
<VerticalStackLayout
Spacing="25"
Padding="30,0"
VerticalOptions="Center"
WidthRequest="400"
HeightRequest="400">
<Border BackgroundColor="#303030"
Padding="8">
<StackLayout Spacing="10">
<Label Text="Login" FontSize="Medium" FontAttributes="Bold" />
<BoxView Color="{DynamicResource Primary}" HeightRequest="2" HorizontalOptions="Fill" />
<Entry Placeholder="Username" />
<Entry Placeholder="Password" IsPassword="True" />
<Button Text="Login" BackgroundColor="{DynamicResource Primary}" TextColor="{DynamicResource White}" Clicked="LoginClick" />
</StackLayout>
</Border>
</VerticalStackLayout>
</ScrollView>
Result:
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>
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>