如何在 xamarin forms uwp 平台中减小汉堡菜单的宽度
How to reduce the width of hamburger menu in xamarin forms uwp platform
我使用 master detail 在 xamarin 表单中创建了一个汉堡菜单 page.But 我无法在 uwp 平台中减小汉堡菜单的宽度。请让我知道是否有办法减少宽度或者它是汉堡菜单占用的默认宽度。
这是Master Detail页面的代码:
<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>
感谢任何帮助!
How to reduce the width of hamburger menu in xamarin forms uwp platform
匹配MasterDetailPage
的控件在UWP平台内是MasterDetailControl
。它有样式资源。根据您的要求,您可以修改 MasterDetailControl
的样式并减少 PaneTogglePane
和 ContentTogglePane
按钮的宽度。我会post完整的样式,你可以直接使用它。
<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>
更新
抱歉,如果您想减少 汉堡包菜单,我想不明白您的要求。您可以在上述样式中为 SplitView
设置 OpenPaneLength
。
......
<ControlTemplate TargetType="uwp:MasterDetailControl">
<SplitView OpenPaneLength="100" x:Name="SplitView"
......
请注意,我们需要在 uwp 中放置上述样式 App.Xaml。
需要 "TitleViewPresenter" 或其子项的定义,或者当 here 默认覆盖内容时 return 将为 null... 从而导致 [=18= 中的崩溃]
_titleViewPresenter = GetTemplateChild("TitleViewPresenter") as FrameworkElement;
Xaml:
<ContentPresenter x:Name="TitleViewPresenter" Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=DetailTitleView}" />
我使用 master detail 在 xamarin 表单中创建了一个汉堡菜单 page.But 我无法在 uwp 平台中减小汉堡菜单的宽度。请让我知道是否有办法减少宽度或者它是汉堡菜单占用的默认宽度。
这是Master Detail页面的代码:
<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>
感谢任何帮助!
How to reduce the width of hamburger menu in xamarin forms uwp platform
匹配MasterDetailPage
的控件在UWP平台内是MasterDetailControl
。它有样式资源。根据您的要求,您可以修改 MasterDetailControl
的样式并减少 PaneTogglePane
和 ContentTogglePane
按钮的宽度。我会post完整的样式,你可以直接使用它。
<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>
更新
抱歉,如果您想减少 汉堡包菜单,我想不明白您的要求。您可以在上述样式中为 SplitView
设置 OpenPaneLength
。
......
<ControlTemplate TargetType="uwp:MasterDetailControl">
<SplitView OpenPaneLength="100" x:Name="SplitView"
......
请注意,我们需要在 uwp 中放置上述样式 App.Xaml。
需要 "TitleViewPresenter" 或其子项的定义,或者当 here 默认覆盖内容时 return 将为 null... 从而导致 [=18= 中的崩溃]
_titleViewPresenter = GetTemplateChild("TitleViewPresenter") as FrameworkElement;
Xaml:
<ContentPresenter x:Name="TitleViewPresenter" Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=DetailTitleView}" />