如何用WinUI 3创建仿Windows设置页按钮并实现NavigationView跳转？

一、实现图标+标题+描述的设置风格按钮 #

Windows设置页的条目本质是带自定义内容布局的原生按钮，不需要引入额外第三方库，直接组合内置控件即可实现，自动适配系统明暗主题、高对比度模式，保留原生按钮的所有悬停、点击交互效果。

注意必须给按钮设置HorizontalContentAlignment="Stretch"，否则内容不会撑满按钮宽度，和系统样式不符。完整XAML代码如下：

<Button 
    x:Name="EntryNavButton"
    Click="EntryNavButton_Click"
    HorizontalAlignment="Stretch"
    HorizontalContentAlignment="Stretch"
    Padding="12,14,12,14"
    CornerRadius="{StaticResource ControlCornerRadius}">
    <Grid ColumnSpacing="14">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <!-- 左侧功能图标 -->
        <SymbolIcon 
            Grid.Column="0"
            Symbol="Globe"
            FontSize="24"
            Foreground="{ThemeResource SystemControlForegroundAccentBrush}"/>
        <!-- 中部标题+说明文本 -->
        <StackPanel Grid.Column="1" VerticalAlignment="Center" Spacing="4">
            <TextBlock 
                Text="入口名称"
                Style="{StaticResource BodyStrongTextBlockStyle}"
                TextWrapping="WrapWholeWords"/>
            <TextBlock 
                Text="入口的补充描述文本，说明点击后跳转的目标"
                Style="{StaticResource CaptionTextBlockStyle}"
                Foreground="{ThemeResource SystemControlForegroundBaseMediumBrush}"
                TextWrapping="WrapWholeWords"/>
        </StackPanel>
        <!-- 右侧导航指示箭头 -->
        <FontIcon 
            Grid.Column="2"
            FontFamily="{StaticResource SymbolThemeFontFamily}"
            Glyph="&#xE0E3;"
            FontSize="12"
            VerticalAlignment="Center"
            Foreground="{ThemeResource SystemControlForegroundBaseMediumBrush}"/>
    </Grid>
</Button>

如果需要做跳转网页、启动外部PC应用的入口，直接在按钮点击事件中调用Launcher.LaunchUriAsync(new Uri("目标网址/应用自定义协议"))即可。

二、实现Page4到Page5的NavigationView导航 #

由于NavigationView控件放在MainPage中，不要直接在Page4中创建新Frame做导航，否则会出现导航栏选中状态不同步、返回栈异常的问题，按以下步骤实现即可：

• 首先在MainPage.xaml中，给NavigationView和承载页面内容的Frame设置公开访问修饰符，同时给对应Page5的导航菜单项添加匹配标记：

<NavigationView x:Name="RootNavigationView" x:FieldModifier="public">
    <NavigationView.MenuItems>
        <!-- 其他菜单项 -->
        <NavigationViewItem Content="Page5" Tag="Page5">
            <NavigationViewItem.Icon>
                <SymbolIcon Symbol="Document"/>
            </NavigationViewItem.Icon>
        </NavigationViewItem>
    </NavigationView.MenuItems>
    <Frame x:Name="ContentFrame" x:FieldModifier="public" />
</NavigationView>

• 然后在Page4.xaml.cs的按钮点击事件中，沿可视化树找到父级MainPage实例，调用Frame完成导航，同时同步导航栏选中状态：

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Media;

private void EntryNavButton_Click(object sender, RoutedEventArgs e)
{
    // 向上遍历可视化树找到MainPage实例
    DependencyObject parent = this;
    while (parent != null && parent is not MainPage)
    {
        parent = VisualTreeHelper.GetParent(parent);
    }

    if (parent is MainPage mainPage)
    {
        // 导航到目标页面
        mainPage.ContentFrame.Navigate(typeof(Page5));
        // 同步导航栏选中状态
        foreach (var item in mainPage.RootNavigationView.MenuItems)
        {
            if (item is NavigationViewItem navItem && navItem.Tag?.ToString() == "Page5")
            {
                mainPage.RootNavigationView.SelectedItem = navItem;
                break;
            }
        }
    }
}

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