WinUI3：如何增大NavigationView的PaneToggleButton和AutoSuggestButton及图标尺寸

PaneToggleButton的完整调整 #

仅设置PaneToggleButtonHeight只能放大按钮容器，要同步放大图标并解决遮挡问题，需要补充以下资源配置：

1. 同步调整图标尺寸
   在NavigationView.Resources中添加控制图标大小的资源：

<x:Double x:Key="PaneToggleButtonIconWidth">40</x:Double>
<x:Double x:Key="PaneToggleButtonIconHeight">40</x:Double>

这两个值会直接控制ToggleButton内部图标的宽高，和你设置的70px按钮高度匹配。

2. 修正布局避免遮挡
   增大按钮高度后，默认布局可能导致按钮与下方面板重叠，调整边距和顶部内边距：

<Thickness x:Key="PaneToggleButtonMargin">0,8,0,8</Thickness>
<x:Double x:Key="NavigationViewTopPadding">8</x:Double>

通过上下边距给按钮留出足够空间，避免被下方元素遮挡。

AutoSuggestButton的尺寸与图标调整 #

要放大AutoSuggestButton及其查询图标，需要覆盖以下内置资源：

1. 调整按钮高度和图标尺寸

<x:Double x:Key="AutoSuggestBoxMinHeight">70</x:Double>
<x:Double x:Key="AutoSuggestBoxQueryIconWidth">40</x:Double>
<x:Double x:Key="AutoSuggestBoxQueryIconHeight">40</x:Double>

AutoSuggestBoxMinHeight控制按钮整体高度，后两个资源控制查询图标的大小。

2. 优化输入框内边距（可选）
   如果需要让输入内容和图标布局更协调，可调整内边距：

<Thickness x:Key="AutoSuggestBoxContentPadding">12,16,12,16</Thickness>

完整修改后的代码示例 #

<NavigationView
    x:Name="NavigationView"
    AlwaysShowHeader="false"
    CompactPaneLength="70"
    IsBackButtonVisible="Collapsed"
    IsBackEnabled="False"
    IsSettingsVisible="False"
    IsTabStop="False"
    PaneDisplayMode="Left"
    PaneTitle="Pane Title"
    SelectionFollowsFocus="Disabled"
>
    <NavigationView.Resources>
        <!-- 已有的NavigationViewItem配置 -->
        <x:Double x:Key="NavigationViewItemOnLeftMinHeight">70</x:Double>
        <x:Double x:Key="NavigationViewItemOnLeftIconBoxHeight">40</x:Double>
        <x:Double x:Key="NavigationViewSelectionIndicatorHeight">70</x:Double>
        
        <!-- PaneToggleButton调整 -->
        <x:Double x:Key="PaneToggleButtonHeight">70</x:Double>
        <x:Double x:Key="PaneToggleButtonIconWidth">40</x:Double>
        <x:Double x:Key="PaneToggleButtonIconHeight">40</x:Double>
        <Thickness x:Key="PaneToggleButtonMargin">0,8,0,8</Thickness>
        <x:Double x:Key="NavigationViewTopPadding">8</x:Double>
        
        <!-- AutoSuggestButton调整 -->
        <x:Double x:Key="AutoSuggestBoxMinHeight">70</x:Double>
        <x:Double x:Key="AutoSuggestBoxQueryIconWidth">40</x:Double>
        <x:Double x:Key="AutoSuggestBoxQueryIconHeight">40</x:Double>
        <Thickness x:Key="AutoSuggestBoxContentPadding">12,16,12,16</Thickness>
    </NavigationView.Resources>

    <NavigationView.MenuItems>
        <NavigationViewItem
            x:Name="GeneralSettingsItem"
            x:Uid="/Settings/GeneralSettingsItem"
            Tag="GeneralSettingsPage"
        >
            <NavigationViewItem.Icon>
                <BitmapIcon VerticalAlignment="Stretch" UriSource="ms-appx:///Assets/Settings/General.png" />
            </NavigationViewItem.Icon>
        </NavigationViewItem>
        <NavigationViewItem
            x:Name="MonitorSettingsItem"
            Content="Menu Item3"
            Tag="SamplePage3"
        >
            <NavigationViewItem.Icon>
                <BitmapIcon UriSource="ms-appx:///Assets/Settings/Monitor.png" />
            </NavigationViewItem.Icon>
        </NavigationViewItem>
    </NavigationView.MenuItems>

    <NavigationView.AutoSuggestBox>
        <AutoSuggestBox AutomationProperties.Name="Search" QueryIcon="Find" />
    </NavigationView.AutoSuggestBox>

    <Frame x:Name="contentFrame" />
</NavigationView>

关键说明 #

• 所有调整通过覆盖WinUI3内置主题资源实现，无需重写控件模板，保留控件原生交互逻辑。
• CompactPaneLength设为70是为了和按钮高度匹配，确保侧边栏紧凑模式下能完整显示按钮。

内容的提问来源于stack exchange，提问作者somename