Adjust the height of the item for UWP

You might notice that if we use TextCell as the item template of the ListView, there are default margins and styles for the items in the ListView for Android and iOS. But for UWP platform, there is no default styles and proper height for items. Let us define the style for item template. At the same time, we should make sure it works for every platform.
Open the MenuPage.xaml file in Pages folder of the MvxFormsMasterDetailDemo.UI project. Update the ItemTemplate by the following code:
1
<ListView.ItemTemplate>
2
    <DataTemplate>
3
        <ViewCell>
4
            <StackLayout HeightRequest="50">
5
                <Label Text="{Binding}" Margin="20,0,0,0" 
6
                       VerticalOptions="CenterAndExpand"></Label>
7
            </StackLayout>
8
        </ViewCell>
9
    </DataTemplate>
10
</ListView.ItemTemplate>
Copied!
That is it. At last, the whole file looks like this:
1
<?xml version="1.0" encoding="utf-8" ?>
2
<views:MvxContentPage xmlns="http://xamarin.com/schemas/2014/forms"
3
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
4
             xmlns:views="clr-namespace:MvvmCross.Forms.Views;assembly=MvvmCross.Forms"
5
             xmlns:viewModels="clr-namespace:MvxFormsMasterDetailDemo.Core.ViewModels;assembly=MvxFormsMasterDetailDemo.Core"
6
             x:Class="MvxFormsMasterDetailDemo.UI.Pages.MenuPage"
7
             x:TypeArguments="viewModels:MenuViewModel" 
8
             x:Name="MainContent"
9
             xmlns:behaviors="clr-namespace:Behaviors;assembly=Behaviors"
10
             Icon="hamburger.png">
11
    <ContentPage.Content>
12
        <StackLayout>
13
            <StackLayout HeightRequest="40">
14
                <StackLayout.IsVisible>
15
                    <OnPlatform x:TypeArguments="x:Boolean">
16
                        <On Platform="Android, iOS" Value="True" />
17
                        <On Platform="UWP" Value="False" />
18
                    </OnPlatform>
19
                </StackLayout.IsVisible>
20
                <StackLayout.Margin>
21
                    <OnPlatform x:TypeArguments="Thickness">
22
                        <On Platform="iOS" Value="0,20,0,0" />
23
                    </OnPlatform>
24
                </StackLayout.Margin>
25
                <Label Text="HamburgerMenu Demo" Margin="10" VerticalOptions="Center" FontSize="Large"></Label>
26
            </StackLayout>
27
            <ListView x:Name="MenuList" ItemsSource="{Binding MenuItemList}" 
28
                      SelectedItem="{Binding SelectedMenuItem, Mode=TwoWay}">
29
                <ListView.Behaviors>
30
                    <behaviors:EventHandlerBehavior EventName="ItemSelected">
31
                        <behaviors:InvokeCommandAction 
32
                            Command="{Binding BindingContext.DataContext.ShowDetailPageAsyncCommand, 
33
                            Source={x:Reference MainContent}}"></behaviors:InvokeCommandAction>
34
                        </behaviors:EventHandlerBehavior>
35
                </ListView.Behaviors>
36
                <ListView.ItemTemplate>
37
                    <DataTemplate>
38
                        <ViewCell>
39
                            <StackLayout HeightRequest="50">
40
                                <Label Text="{Binding}" Margin="20,0,0,0" 
41
                                       VerticalOptions="CenterAndExpand"></Label>
42
                            </StackLayout>
43
                        </ViewCell>
44
                    </DataTemplate>
45
                </ListView.ItemTemplate>
46
            </ListView>
47
        </StackLayout>
48
    </ContentPage.Content>
49
</views:MvxContentPage>
Copied!
It is time to launch the app for all three platforms and observe the final results! Now the application shows correct Hamburger menu for three platforms and it has proper margin and styles.

Adding the header bar for Android and iOS

Next - Implementing MasterDetail layout in Xamarin.Forms by MvvmCross

Summary

Last modified 2yr ago

Copy link