Xamarin.Forms how to bind data in code to swipe view (working in xaml) - xamarin.forms

I have a swipeview from xml like this:
</swipeCardView:SwipeCardView.ItemTemplate>
<swipecardview:swipecardview.itemssource>
<x:array type="{x:type x:string}">
<x:string>card 1</x:string>
<x:string>card 2</x:string>
<x:string>card 3</x:string>
<x:string>card 4</x:string>
<x:string>card 5</x:string>
<x:string>card 6</x:string>
</x:array>
</swipecardview:swipecardview.itemssource>
</swipeCardView:SwipeCardView>
If I add this to the xaml, I get 6 elements, all showing my layout (which is good).
But I need to be able to set the amount of layouts programatically.
How do I bind it like it is done here only from code?
(Sorry, I am very new to this...)
: This is the full layout:
<swipeCardView:SwipeCardView
Grid.Row="0"
ItemsSource="{Binding CardItems}"
Grid.Column="1"
VerticalOptions="FillAndExpand">
<swipeCardView:SwipeCardView.ItemTemplate>
<DataTemplate>
<!--Content of Swipe. Just remove wrapping to get layout to render-->
<Grid RowSpacing="0" BackgroundColor="White">
<Grid.RowDefinitions>
<RowDefinition Height="1.5*" />
<RowDefinition Height="0.5*" />
<RowDefinition Height="1.5*" />
<RowDefinition Height="0.5*" />
</Grid.RowDefinitions>
<!--Titel-->
<Grid Grid.Row="1" BackgroundColor="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label
Grid.Column="1"
FontFamily="arial"
TextColor="#272727"
Text="Anzeigentitel"
FontAttributes="Bold"
FontSize="20"
HorizontalOptions="Center"
VerticalOptions="Center"/>
</Grid>
<!--Beschreibung-->
<Grid Grid.Row="2" BackgroundColor="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label
Grid.Column="1"
FontFamily="arial"
TextColor="#272727"
HorizontalTextAlignment="Center"
Text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores."
FontSize="12"
HorizontalOptions="Center"
VerticalOptions="Center"/>
</Grid>
<!--Bottom-->
<Grid Grid.Row="3" BackgroundColor="White">
<Grid.RowDefinitions>
<RowDefinition Height="0.5*" />
<RowDefinition Height="1.5*" />
<RowDefinition Height="1.4*" />
<RowDefinition Height="0.5*" />
</Grid.RowDefinitions>
<Label
Grid.Row="1"
FontFamily="arial"
TextColor="#272727"
Text="id #00000000"
FontSize="10"
HorizontalOptions="Center"
VerticalOptions="Center"/>
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label
Grid.Column="1"
FontFamily="arial"
TextColor="#272727"
Text="99"
VerticalOptions="FillAndExpand"
FontSize="9"
HorizontalOptions="Start" />
<ImageButton
Grid.Column="0"
Aspect="AspectFit"
BackgroundColor="#00000000"
HorizontalOptions="End"
Source="btn_star_small.png" VerticalOptions="Center" />
</Grid>
</Grid>
</Grid>
</DataTemplate>

you can just assign the ItemsSource in code, or bind it to a model
List<string> data = new List<string>() { "a", "b", "c" };
mySwipeView.ItemsSource = data;

Related

Xamarin Forms - grid height does not adjust with label wrapping

I have a grid with a label in it. The label has a text with a length larger than the width of the grid, hence it is wrapped. The grid however does not change its height based on the wrapped text, causing only the first line to be visible. I have set the grid rowheight to Auto.
Any other ideas?
EDIT: the code (a label in a grid)
<Grid RowSpacing="20">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="80*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Label x:Name="This is a label which is wrapped" Grid.Row="0" Grid.Column="1" HorizontalOptions="CenterAndExpand" VerticalOptions="Start" FontSize="16"/>
</Grid>
EDIT: image result
I tested your code and it works, my workload is Android11, API30.
<Grid RowSpacing="20">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="80*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Label x:Name="label"
Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis nulla eu felis fringilla vulputate. Nullam porta eleifend lacinia. Donec at iaculis tellus."
Grid.Row="0"
Grid.Column="1"
HorizontalOptions="CenterAndExpand"
VerticalOptions="Start"
FontSize="16"/>
</Grid>

Move buttons on the bottom and give more space for editor

I am struggling with two things in xamarin forms layout. As shown on the picture i need to make more space for edidor control (highlited as 1) as this will be the place for user's comment. I would like to extend it to the right (max width). Second thing is i need to move buttons to the bottom which i thought i could solve that by settiung VerticalOptions="End" in the <Grid Grid.Row ="4" (higlighted as 2). How can i solve both things up? Below also full xaml code.
Xaml:
<?xml version="1.0" encoding="utf-8" ?>
<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"
mc:Ignorable="d"
x:Class="MobileAppXamarinForms.Views.Order.OrderHatModifyPage"
Title="{Binding SelectedHatOrder.OrderId, StringFormat='Numer zamówienia: {0}'}">
<ContentPage.Content>
<StackLayout Orientation="Vertical">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row ="0" HorizontalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label
Grid.Column="0"
Padding="30,1,1,1"
FontAttributes="None"
FontSize="16"
HorizontalOptions="FillAndExpand"
Text="{Binding SelectedHatOrder.OrderId, StringFormat='NUMER ZAMÓWIENIA: {0}'}"
TextColor="Gray"
VerticalOptions="Center" />
<Label
Grid.Column="1"
HorizontalOptions="FillAndExpand"
Text=" " />
<Label
Grid.Column="2"
FontSize="15"
HorizontalOptions="Start"
Text="KLIENT:"
VerticalOptions="Center" />
<Label
Grid.Column="3"
Padding="5,1,1,1"
FontAttributes="None"
FontSize="16"
HorizontalOptions="FillAndExpand"
Text="{Binding SelectedClient.Value, StringFormat='{0}'}"
TextColor="Gray"
VerticalOptions="Center" />
<Label
Grid.Column="4"
HorizontalOptions="StartAndExpand"
Text="NA DZIEŃ:"
VerticalOptions="Center" />
<DatePicker
Grid.Column="5"
Date="{Binding SelectedTargetDate, Mode=TwoWay}"
Format="dd.MM.yyyy"
HorizontalOptions="StartAndExpand" />
</Grid>
<Grid Grid.Row ="1" Margin="5" HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="200" />
<!--szerokosc, aby zmiescila sie nazwa butli-->
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label
Grid.Column="0"
Padding="30,1,1,1"
FontAttributes="None"
FontSize="15"
HorizontalOptions="FillAndExpand"
Text="KWOTA:"
TextColor="Gray"
VerticalOptions="Center" />
<Entry
Grid.Column="1"
HorizontalOptions="Start"
Keyboard="Numeric"
MaxLength="5"
Placeholder="Kwota"
Text="{Binding SelectedPrice, Mode=TwoWay}" />
<Label
Grid.Column="2"
HorizontalOptions="FillAndExpand"
Text=" " />
<Label
Grid.Column="3"
FontSize="15"
HorizontalOptions="Start"
Text="ILOŚĆ:"
VerticalOptions="Center" />
<Entry
Grid.Column="4"
HorizontalOptions="Start"
Keyboard="Numeric"
MaxLength="5"
Placeholder="Ilość"
Text="{Binding SelectedAmount, Mode=TwoWay}" />
</Grid>
<Grid Grid.Row ="2" >
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" VerticalOptions="Start">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="200" />
</Grid.ColumnDefinitions>
<Label
Grid.Column="0"
Padding="30,1,1,1"
FontAttributes="None"
FontSize="15"
HorizontalOptions="FillAndExpand"
Text="Komentarz:"
TextColor="Gray"
VerticalOptions="Center" />
<Editor
Grid.Column="1"
HorizontalOptions="CenterAndExpand"
Keyboard="Text"
MaxLength="3000"
Placeholder="Komentarz"
Text="{Binding SelectedComment, Mode=TwoWay}" />
</Grid>
</Grid>
<Grid Grid.Row ="3" VerticalOptions="StartAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="200" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label
Grid.Column="0"
Padding="30,1,1,1"
FontAttributes="None"
FontSize="15"
HorizontalOptions="FillAndExpand"
Text="Typ płatności:"
TextColor="Gray"
VerticalOptions="Center" />
<Picker
Grid.Column="1"
Title="Typ płatności"
FontSize="15"
HorizontalOptions="FillAndExpand"
ItemDisplayBinding="{Binding Value}"
ItemsSource="{Binding PaymentTypes}"
SelectedIndex="{Binding Id}"
SelectedItem="{Binding SelectedPaymentType, Mode=TwoWay}"
VerticalOptions="Center" />
<Label
Grid.Column="2"
Padding="30,1,1,1"
FontAttributes="None"
FontSize="15"
HorizontalOptions="FillAndExpand"
Text="Ilość dni:"
TextColor="Gray"
IsVisible="{Binding IsDaysCountVisible, Mode=TwoWay}"
VerticalOptions="Center" />
<Entry
Grid.Column="3"
HorizontalOptions="Start"
Keyboard="Numeric"
MaxLength="5"
Placeholder="Ilość dni"
IsVisible="{Binding IsDaysCountVisible, Mode=TwoWay}"
Text="{Binding SelectedDaysCount, Mode=TwoWay}" />
</Grid>
<!-- Buttons section -->
<Grid Grid.Row ="4" VerticalOptions="End">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*" />
<ColumnDefinition Width="50*" />
</Grid.ColumnDefinitions>
<Button
Grid.Column="0"
BackgroundColor="DarkMagenta"
Command="{Binding SaveOrderCommand}"
FontAttributes="Bold"
FontSize="20"
Text="Zatwierdz"
TextColor="White"
HorizontalOptions="FillAndExpand" />
<Button
Grid.Column="1"
BackgroundColor="MediumVioletRed"
Command="{Binding ExitCommand}"
FontAttributes="Bold"
FontSize="20"
Text="Anuluj"
TextColor="White"
HorizontalOptions="FillAndExpand" />
</Grid>
</Grid>
</StackLayout>
</ContentPage.Content>
</ContentPage>
So, as #Jason said in the comments, you have to remove the <StackLayout /> because it prevents the Grid to fill the page.
Thus, for your other issue, I tried to reproduce it.
I've found that if you change the HorizontalOptions of your <Editor /> from CenterAndExpand to FillAndExpand this solves the issue (you can also remove the HorizontalOptions altogether).
So, instead of:
<Editor
Grid.Column="1"
HorizontalOptions="CenterAndExpand"
Keyboard="Text"
MaxLength="3000"
Placeholder="Komentarz"
Text="{Binding SelectedComment, Mode=TwoWay}" />
Try:
<Editor
Grid.Column="1"
HorizontalOptions="FillAndExpand"
Keyboard="Text"
MaxLength="3000"
Placeholder="Komentarz"
Text="{Binding SelectedComment, Mode=TwoWay}" />
Or:
<Editor Grid.Column="1"
Keyboard="Text"
MaxLength="3000"
Placeholder="Komentarz"
Text="{Binding SelectedComment, Mode=TwoWay}" />
For more about this: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/layout-options
For good measure, you can also remove Keyboard="Text" since Keyboard's default value is already Text 😉
I hope this solved your issue.
However, if you've got any concerns with my Answer please let me know 🙂

Xaml not behaving correctly in position

For some reason my button is not showing I want the bottom to be at the bottom and green but its not. Also is their any kind of editor for grids and placements of controls would make this easier.
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="WellbeingNinja.Views.RunningPage">
<ContentPage.Content>
<Grid Padding="30,40,40,10">
<Grid.RowDefinitions>
<RowDefinition Height="200" />
<RowDefinition Height="200" />
<RowDefinition Height="200" />
<RowDefinition Height="200" />
<RowDefinition Height="200" />
<RowDefinition Height="200" />
<RowDefinition Height="200" />
<RowDefinition Height="200" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*" />
<ColumnDefinition Width="50*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackLayout VerticalOptions="Center" HorizontalOptions="Center">
<Label x:Name="lblduration" Text="Duration"></Label>
</StackLayout>
<Frame Grid.Column="0" Grid.Row="0" x:Name="frameTotalSpeed" VerticalOptions="StartAndExpand" CornerRadius="2" >
<StackLayout>
<Label x:Name="lblSpeedText" Text="Speed(miles)"></Label>
<Label x:Name="lblSpeed" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" Text="0.00" FontSize="Large" ></Label>
</StackLayout>
</Frame>
<Frame Grid.Column="1" x:Name="frameTotaldistance" VerticalOptions="StartAndExpand" CornerRadius="2" >
<StackLayout>
<Label x:Name="lblDistance" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" Text="0.00" FontSize="Large" ></Label>
<Label x:Name="lbldistanceText" Text="Dist" HorizontalOptions="Center"></Label>
</StackLayout>
</Frame>
<Frame Grid.Column="0" x:Name="frmTotalMilesLeft" Grid.Row="1" VerticalOptions="StartAndExpand">
<StackLayout>
<Label x:Name="lblDistanceLeft" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" Text="0.00" FontSize="Large" ></Label>
<Label x:Name="lblavgPace" Text="Avg Pace (Min/Mil)"></Label>
</StackLayout>
</Frame>
<Frame Grid.Column="1" Grid.Row="1" x:Name="frmTotalCarolesBurned" VerticalOptions="StartAndExpand">
<StackLayout>
<Label x:Name="lblTotalCalories" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" Text="0.00" FontSize="Large" ></Label>
<Label x:Name="lblTotalCaloriesBurned" HorizontalOptions="Center" Text="Calories Burned"></Label>
</StackLayout>
</Frame>
<Button Grid.ColumnSpan="2" Grid.Row="3" Text="Start Workout"></Button>
</Grid>
</ContentPage.Content>
If you give each row with a fix height 200, then the Y position of row 3 is start from 600 and it may larger than the height of the screen. You add the Button at row 3 and it is out of the bounds of the screen. Then you won't see it in the screen.
Use a Auto would be better, it will automatically sizes to fit content in the row or column. You can also set the ColumnSpacing and RowSpacing to add some space between row and columnspace:
<Grid Padding="30,40,40,10" ColumnSpacing="30" RowSpacing="70">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60*" />
<ColumnDefinition Width="60*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
Read the document about Grid to get more information and you can use StackLayout to achieve the UI too.

How to reduce the width of hamburger menu in xamarin forms uwp platform

I created a hamburger menu in xamarin forms using master detail page.But I am unable to reduce the width of hamburger menu in uwp platform. Please let me know if there is way to reduce the width or it is the default width that hamburger menu occupies.
This is the code for Master Detail Page:
<MasterDetailPage.Master>
<local:SideDrawerListPage x:Name="sideDrawerListPage" WidthRequest="100" />
</MasterDetailPage.Master>
Code for Side Drawer List:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="120" />
</Grid.RowDefinitions>
<Image Grid.Row="0" Source="menu.png" HorizontalOptions="Center" WidthRequest="100" HeightRequest="60" Margin="0,2,0,0"/>
<Grid Grid.Row="1" Padding="20" Margin="5,0,0,0" ColumnSpacing="0" RowSpacing="0" HeightRequest="75">
<Grid.RowDefinitions>
<RowDefinition Height="75"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
------------------
</Grid>
<Grid Grid.Row="2" BackgroundColor="{Binding SelectedBackgroundColorA}" HeightRequest="45" RowSpacing="0" ColumnSpacing="0">
--------
</Grid>
<Grid Grid.Row="3" BackgroundColor="{Binding SelectedBackgroundColorB}" HeightRequest="45" RowSpacing="0" ColumnSpacing="0">
--------
</Grid>
<Grid Grid.Row="4">
<ListView x:Name="listView" VerticalOptions="FillAndExpand" Margin="0,-8,0,-10" IsVisible="{Binding IsChildListVisible}" x:FieldModifier="public" ItemsSource="{Binding DashboardListItems}" BackgroundColor="#3c4a56">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<!--BackgroundColor="{Binding SelectedBackgroundColor}"-->
<Grid BackgroundColor="#3c4a56">
<Grid.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="1" Command="{Binding Command}" CommandParameter="{Binding}"></TapGestureRecognizer>
</Grid.GestureRecognizers>
<Grid RowSpacing="0" ColumnSpacing="0">
----------------
</Grid>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</Grid>
Any help is appreciated!
How to reduce the width of hamburger menu in xamarin forms uwp platform
The control that matches MasterDetailPage is MasterDetailControl within UWP platform. And it has style resource. For your requirement, you could modify the style of MasterDetailControl and reduce the width of PaneTogglePane and ContentTogglePane button. I will post the complete style follow, you could use it directly.
<Application.Resources>
<ResourceDictionary>
<Style TargetType="uwp:MasterDetailControl">
<Setter Property="ToolbarForeground" Value="{ThemeResource DefaultTextForegroundThemeBrush}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="uwp:MasterDetailControl">
<SplitView x:Name="SplitView" IsPaneOpen="{Binding IsPaneOpen,RelativeSource={RelativeSource TemplatedParent},Mode=TwoWay}" DisplayMode="Overlay">
<SplitView.Pane>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal" Visibility="{TemplateBinding MasterToolbarVisibility}" Background="{TemplateBinding ToolbarBackground}">
<Button Name="PaneTogglePane" Style="{ThemeResource PaneButton}" Width="30" Foreground="{TemplateBinding ToolbarForeground}"
AutomationProperties.Name="{Binding Path=(AutomationProperties.Name), RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}"
AutomationProperties.HelpText="{Binding Path=(AutomationProperties.HelpText), RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}"
AutomationProperties.LabeledBy="{Binding Path=(AutomationProperties.LabeledBy), RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}"
AutomationProperties.AccessibilityView="{Binding Path=(AutomationProperties.AccessibilityView), RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}" />
<TextBlock Margin="10,0,0,0" Style="{ThemeResource TitleTextBlockStyle}" VerticalAlignment="Center" Text="{TemplateBinding MasterTitle}" Visibility="{TemplateBinding MasterTitleVisibility}" Foreground="{TemplateBinding ToolbarForeground}"/>
</StackPanel>
<ContentPresenter x:Name="MasterPresenter" Grid.Row="1" Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Master}" />
</Grid>
</SplitView.Pane>
<SplitView.Content>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Border x:Name="TopCommandBarArea" HorizontalAlignment="Stretch" Background="{TemplateBinding ToolbarBackground}">
<uwp:FormsCommandBar x:Name="CommandBar" Background="{TemplateBinding ToolbarBackground}" MinHeight="{ThemeResource TitleBarHeight}" HorizontalAlignment="Stretch">
<uwp:FormsCommandBar.Content>
<Border x:Name="TitleArea" Height="{ThemeResource TitleBarHeight}" Visibility="{TemplateBinding DetailTitleVisibility}" HorizontalAlignment="Stretch">
<Grid x:Name="TitleViewPresenter" VerticalAlignment="Center" Background="{TemplateBinding ToolbarBackground}" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Width="30" Name="ContentTogglePane" Style="{ThemeResource PaneButton}" Foreground="{TemplateBinding ToolbarForeground}"
Visibility="{TemplateBinding ContentTogglePaneButtonVisibility}" />
<Image Grid.Column="1" Source="{TemplateBinding DetailTitleIcon}" />
<Border Grid.Column="2" Height="{ThemeResource TitleBarHeight}" Visibility="{TemplateBinding DetailTitleVisibility}">
<TextBlock Text="{TemplateBinding DetailTitle}" VerticalAlignment="Center" Margin="10,0,0,0" Foreground="{TemplateBinding ToolbarForeground}" Style="{ThemeResource TitleTextBlockStyle}" />
</Border>
<ContentPresenter Grid.Column="3" Content="{Binding DetailTitleView, RelativeSource={RelativeSource Mode=TemplatedParent}, Converter={StaticResource ViewToRenderer}}" Visibility="{TemplateBinding DetailTitleViewVisibility}" HorizontalAlignment="Stretch" />
</Grid>
</Border>
</uwp:FormsCommandBar.Content>
</uwp:FormsCommandBar>
</Border>
<ContentPresenter x:Name="DetailPresenter" Grid.Row="1" Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Detail}" />
<Border x:Name="BottomCommandBarArea" Grid.Row="2" HorizontalAlignment="Stretch"></Border>
</Grid>
</SplitView.Content>
</SplitView>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</Application.Resources>
Update
Sorry, I miss understand your requirement, if your want to reduce hamburger menu. you could set OpenPaneLength for SplitView within above style.
......
<ControlTemplate TargetType="uwp:MasterDetailControl">
<SplitView OpenPaneLength="100" x:Name="SplitView"
......
Please note, we need place above style in the uwp App.Xaml.
Requires a definition for "TitleViewPresenter" or child thereof, or will return null when content is overridden by default from here... thus causing a crash in MasterDetailControl.cs
_titleViewPresenter = GetTemplateChild("TitleViewPresenter") as FrameworkElement;
Xaml:
<ContentPresenter x:Name="TitleViewPresenter" Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=DetailTitleView}" />

How to design responsive layouts with ResponsiveLayout and Grid?

I am trying to understand the logic of the Grid layout structure in Xamarin.Forms.
I created some rows and columns with Grid tags and encoloured them with background colours to be able to check their width and height.
When I check the result, I see a lot of different outputs depending on the dimensions of devices.
Please check the emulators' outputs:
My application will be only a mobile application and it won't be displayed on any other platforms. I think these differences are too much for a mobile application. Is it possible to design adaptive UI with Xamarin or do we have to write separate codes for all different dimensions?
Or are there any logical errors in my xaml file?
<ContentView.Content>
<RelativeLayout Padding="0">
<!-- Background -->
<Image Aspect="AspectFill"
Source="bg.png"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width}"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height}"/>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.1*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="0.1*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1.2*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackLayout Grid.Column="0" Grid.Row="0"
BackgroundColor="Fuchsia" />
<StackLayout Grid.Column="1" Grid.Row="0"
BackgroundColor="Blue" />
<!--Title Starts-->
<StackLayout Grid.Column="1" Grid.Row="1"
BackgroundColor="Blue"
Padding="0, 2, 0, 0">
<Label Text="TITLE"
HorizontalOptions="Center"
TextColor="#28ddff"
FontSize="32"
BackgroundColor="Black"
Opacity="0.7">
<Label.FontSize>
<OnPlatform x:TypeArguments="x:Double"
iOS="30"
Android="25" />
</Label.FontSize>
</Label>
<!--Title Ends-->
<!--SubTitle Starts-->
<Label Text="SUBTITLE"
HorizontalOptions="Center"
TextColor="#ffffff"
FontSize="32"
BackgroundColor="Black"
Opacity="0.7">
<Label.FontSize>
<OnPlatform x:TypeArguments="x:Double"
iOS="32"
Android="27" />
</Label.FontSize>
</Label>
</StackLayout>
<!--SubTitle Ends-->
<!--Description Starts-->
<StackLayout Grid.Column="1" Grid.Row="2"
BackgroundColor="Blue">
<Label Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco."
BackgroundColor="Transparent"
TextColor="White"
FontAttributes="Bold">
<Label.FontSize>
<OnPlatform x:TypeArguments="x:Double"
iOS="15"
Android="13" />
</Label.FontSize>
</Label>
</StackLayout>
<!--Description Ends-->
<StackLayout Grid.Column="1" Grid.Row="3">
<Button Text="LOGIN"
TextColor="#009de0"
BackgroundColor="White"
WidthRequest="120"
HorizontalOptions="Center"
Clicked="Handle_Clicked" />
</StackLayout>
</Grid>
</RelativeLayout>
</ContentView.Content>
I have to set a background image to the app and in this reason, I have begun with <RelativeLayout> tag. Hence, <RelativeLayout> or <AbsoluteLayout> tags mess up the structure of grids, I think or?

Resources