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

1
votes

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!

2
xamarin.formsuwpmaster-detail

2 Answers

3
votes

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

enter image description here

Please note, we need place above style in the uwp App.Xaml.

0
votes

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}" />