Bottom Navigation Bar Design in Dotnet Maui - xaml

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 ->

Related

ScrollView doesn't work in RefreshView .net Maui

I have a ScrollView in my .net Maui application. It contains a RefreshView with a CollectionView. It worked fine but yesterday it doesn't scroll anymore.
Here a video of the issue: https://de.files.fm/u/3rhsdu786
I tested the ScrollView with some Frames and it worked, so there must be a problem with the RefreshView or with the combination. I also tried to create a new page and inserted the old code but it also didn't work.
Here is my xaml code:
<ScrollView>
<StackLayout>
<!--Der Frame ist Visible, wenn für den Tag eine für den Schüler betreffende Nachricht existiert ansonsten bleibt diese Nachricht unsichtbar-->
<Button Text="Neue Nachrichten unter Aktuelles!" Command="{Binding OnMessage}" IsVisible="{Binding IsVisibleInfo}" CornerRadius="30" Margin="0,15,0,0" HorizontalOptions="Center"/>
<Frame IsVisible="{Binding IsVisibleNoAlert}" HorizontalOptions="Center" BackgroundColor="Transparent">
<StackLayout VerticalOptions="Start" HorizontalOptions="Center">
<Label Text="Keine Vertretung!" FontSize="Title" HorizontalTextAlignment="Center" VerticalOptions="Start" Margin="10"/>
<Label Text="Heute hast du keine Vertretung. Dein Tag findet ganz normal statt." HorizontalTextAlignment="Center"/>
<Label Text="{Binding Status}" HorizontalOptions="Center" Margin="20" TextColor="Gray" VerticalOptions="StartAndExpand" IsVisible="{Binding IsVisibleNoAlert}"/>
</StackLayout>
</Frame>
<RefreshView x:DataType="vm:TodayViewModel" Command="{Binding LoadStandInsCommand}" IsRefreshing="{Binding IsBusy, Mode=TwoWay}" IsEnabled="{Binding RefreshIsEnabled}" Margin="30,10,30,30">
<StackLayout Orientation="Vertical">
<Label Text="{Binding Status}" HorizontalOptions="Center" TextColor="Gray" VerticalOptions="StartAndExpand" IsVisible="{Binding IsVisibleView}"/>
<CollectionView ItemsSource="{Binding StandIns}" SelectionMode="None" IsVisible="{Binding IsVisibleView}">
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout x:DataType="model:StandIn" Margin="0,10,0,10">
<Frame HeightRequest="110" BackgroundColor="{AppThemeBinding Light={StaticResource WhiteMode2nd}, Dark={StaticResource DarkMode2nd}}" BorderColor="{Binding Color}" CornerRadius="10">
<StackLayout Margin="-20" Orientation="Horizontal">
<Line BackgroundColor="{Binding Color}" HeightRequest="170" WidthRequest="5" HorizontalOptions="Start"/>
<Grid HorizontalOptions="FillAndExpand" Margin="10,5,10,5">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="0.75*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.7*"/>
<ColumnDefinition Width="0.3*"/>
</Grid.ColumnDefinitions>
<Label Text="{Binding Stunde}" Style="{StaticResource LableStyleStandIn}" Margin="5,0,0,0"/>
<Label Text="{Binding Fach}" Style="{StaticResource LableStyleStandIn}" Grid.Row="1"/>
<Label Text="{Binding Art}" FontSize="17" Style="{StaticResource LableStyleStandIn}" Grid.Row="2"/>
<Label Text="{Binding Raum}" Style="{StaticResource LableStyleStandIn}" Grid.Column="1" Grid.Row="1"/>
<Label Text="{Binding Lehrer}" FontSize="17" Style="{StaticResource LableStyleStandIn}" Grid.Column="1" Grid.Row="2"/>
</Grid>
</StackLayout>
</Frame>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</RefreshView>
</StackLayout>
</ScrollView>
<!--Der Button um in die Refreshview entweder die Vertretung für heute oder morgen zu laden-->
<Frame Style="{StaticResource ButtonStyleSwitchDay}" >
<Grid Margin="-15">
<Button Command="{Binding ChangeSide}" Background="Transparent" BorderColor="Transparent"/>
<Image Source="{Binding ButtonImageDay}"/>
</Grid>
</Frame>
</Grid>
The ViewModel workes fine, so there is no problem with it.
Thanks for helping me.
Credits: ewerspej
RefreshView must be on the outside and ScrollView on the inside like below:
<RefreshView >
<ScrollView>
````
</ScrollView>
</RefreshView>
Ref: https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/refreshview?view=net-maui-7.0

Free space using FillAndExpand

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

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>

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.

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

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>