Question

我已经在GitHub上阅读了他们的文档，但仍未找到更改汉堡图标高度的方法，该高度与我自己页面标题的高度相匹配（Template10 Pageheader具有固定大小，无法更改＆＃39;为什么我自己制作）

此外，我希望窗格像任何其他UWP应用程序一样完全打开。

我希望窗格像这样大开：Pane is open, page title/header shifting to the right

太糟糕了，看起来像这样 Page title not shifting to the right and only the 'bottom' pane is open

壳牌的XAML：

<Page x:Class="Template10.Samples.VoiceAndInkSample.Views.Shell"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:Controls="using:Template10.Controls"
  xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
  xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:local="using:Template10.Samples.VoiceAndInkSample.Views"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:views="using:Template10.Samples.VoiceAndInkSample.Views" mc:Ignorable="d">

<Controls:ModalDialog IsModal="{x:Bind IsBusy, Mode=OneWay}">
    <Controls:ModalDialog.Content>
        <Controls:HamburgerMenu x:Name="MyHamburgerMenu" IsFullScreen="False"
            HamburgerBackground="#EB690B"
            HamburgerForeground="White"
            NavAreaBackground="#EB690B"
            NavButtonBackground="#EB690B"
            SecondarySeparator="#EB690B"  
            NavButtonForeground="White" 
            NavButtonCheckedForeground="Black"
            NavButtonCheckedBackground="#EB690B"
            NavButtonCheckedIndicatorBrush="Black"
            VisualStateNormalDisplayMode="CompactOverlay"
            VisualStateNarrowDisplayMode="CompactOverlay"
            VisualStateWideDisplayMode="CompactOverlay">

            <Controls:HamburgerMenu.PrimaryButtons>
                <Controls:HamburgerButtonInfo ClearHistory="True" PageType="views:MainPage">
                    <StackPanel Orientation="Horizontal">
                        <SymbolIcon Width="48" Height="48" Symbol="Home" />
                        <TextBlock Margin="12,0,0,0" VerticalAlignment="Center" Text="Home" />
                    </StackPanel>
                </Controls:HamburgerButtonInfo>
            </Controls:HamburgerMenu.PrimaryButtons>

            <Controls:HamburgerMenu.SecondaryButtons>
                <Controls:HamburgerButtonInfo PageType="views:SettingsPage">
                    <StackPanel Orientation="Horizontal">
                        <SymbolIcon Width="48" Height="48" Symbol="Setting" />
                        <TextBlock Margin="12,0,0,0" VerticalAlignment="Center" Text="Settings" />
                    </StackPanel>
                </Controls:HamburgerButtonInfo>
            </Controls:HamburgerMenu.SecondaryButtons>

        </Controls:HamburgerMenu>

    </Controls:ModalDialog.Content>
    <Controls:ModalDialog.ModalContent>

        <Viewbox Height="32">
            <StackPanel Orientation="Horizontal">
                <ProgressRing Width="16" Height="16"
                              Margin="12,0" Foreground="White"
                              IsActive="{x:Bind IsBusy, Mode=OneWay}" />
                <TextBlock VerticalAlignment="Center" Foreground="White" Text="{x:Bind BusyText, Mode=OneWay}" />
            </StackPanel>
        </Viewbox>

    </Controls:ModalDialog.ModalContent>
</Controls:ModalDialog>

Answer 1

您无法使用当前版本的Template10更改HamburgerButton的高度，因为它是硬编码的。 Height definition in the source

您可以分叉并定义自己的高度，或者（如果您可以定位最新的Windows 10版本）使用新的Inline代替。

至于让它看起来“完全开放”，首先你必须使用CompactOverlay DisplayMode而不是你当前使用的HamburgerBackground。然后，您必须将HamburgerMenu的NavAreaBackground颜色设置为{{1}}的相同颜色集。这样你就可以获得全高的效果。关于如何应用这些颜色，请参阅我的回答here。

自定义Template10 HamburgerMenu（汉堡图标大小和PaneOpen宽度）

1 个答案: