Как уменьшить ширину меню гамбургера в xamarin форм платформе uwp

Question

Я создал меню гамбургеров в формах xamarin, используя главную страницу сведений. Но я не могу уменьшить ширину меню гамбургеров на платформе uwp. Пожалуйста, дайте мне знать, если есть способ уменьшить ширину или это ширина по умолчанию, которую занимает меню гамбургера.

Это код главной страницы сведений:

<MasterDetailPage.Master>
    <local:SideDrawerListPage x:Name="sideDrawerListPage" WidthRequest="100" />
</MasterDetailPage.Master>

Код для списка боковых ящиков:

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

Любая помощь приветствуется!

Answer 1

Как уменьшить ширину меню гамбургера в платформе xamarin форм uwp

Элемент управления, который соответствует MasterDetailPage, равен MasterDetailControl в пределах платформы UWP.И у него есть ресурс стиля.По вашему требованию вы можете изменить стиль MasterDetailControl и уменьшить ширину кнопок PaneTogglePane и ContentTogglePane.Я опубликую полный стиль, следуйте, вы можете использовать его напрямую.

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

Обновление

Извините, я не понимаю ваше требование, если вы хотите уменьшить меню гамбургеров .Вы можете установить OpenPaneLength для SplitView в вышеприведенном стиле.

 ......
 <ControlTemplate TargetType="uwp:MasterDetailControl">
 <SplitView OpenPaneLength="100" x:Name="SplitView" 
 ......

Обратите внимание, нам нужно поместить стиль выше в приложении uwp.xaml.

Answer 2

Требуется определение для "TitleViewPresenter" или его дочернего элемента, или он будет возвращать значение NULL, если содержимое по умолчанию переопределяется с здесь ..., что вызывает сбой в MasterDetailControl.cs

_titleViewPresenter = GetTemplateChild("TitleViewPresenter") as FrameworkElement;

Xaml:

 <ContentPresenter x:Name="TitleViewPresenter" Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=DetailTitleView}" />