WinUI3全局设置TextBox及Button下拉菜单字体失效问题求助

问题背景 #

已在App.xaml的ResourceDictionary中配置字体资源及TextBox样式，但TextBox、NumberBox、Button的MenuFlyout等控件未生效，需实现这些控件的全局字体统一。

原App.xaml代码 #

<?xml version="1.0" encoding="utf-8"?>
<Application
    x:Class="App1.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
                <!-- Other merged dictionaries here -->

            </ResourceDictionary.MergedDictionaries>
            <!-- Other app resources here -->
                <FontFamily x:Key="XamlAutoFontFamily">Arial Black</FontFamily>
                <FontFamily x:Key="ContentControlThemeFontFamily">Arial Black</FontFamily>
                <FontFamily x:Key="MTCMediaFontFamily">Arial Black</FontFamily>
                <FontFamily x:Key="PhoneFontFamilyNormal">Arial Black</FontFamily>
                <FontFamily x:Key="PhoneFontFamilySemiLight">Arial Black</FontFamily>
                <FontFamily x:Key="PivotHeaderItemFontFamily">Arial Black</FontFamily>
                <FontFamily x:Key="PivotTitleFontFamily">Arial Black</FontFamily>
                <FontFamily x:Key="SymbolThemeFontFamily">Segoe Fluent Icons,Segoe MDL2 Assets</FontFamily>
                <FontFamily x:Key="KeyTipFontFamily"></FontFamily>

                <Style TargetType="TextBox">
                    <Setter Property="FontFamily" Value="Arial Black" />
                </Style>
        </ResourceDictionary>
    </Application.Resources>
</Application>

原主窗口XAML代码 #

<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="App1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="App1">

    <StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Button Content="Show Menu"
                HorizontalAlignment="Center"
                VerticalAlignment="Top"
                Margin="0,50,0,0">
            <Button.Flyout>
                <MenuFlyout>
                    <MenuFlyoutItem Text="Option 1" />
                </MenuFlyout>
            </Button.Flyout>
        </Button>

        <TextBox HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,0,0,50" Width="200" Text="Enter text here"/>
    </StackPanel>
</Window>

解决步骤 #

1. 覆盖主题字体资源+定义全局控件样式 #

修改App.xaml，补充NumberBox和MenuFlyoutItem的全局样式，确保自定义样式优先级高于默认主题：

<?xml version="1.0" encoding="utf-8"?>
<Application
    x:Class="App1.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:controls="using:Microsoft.UI.Xaml.Controls">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
                <!-- 其他合并字典放在这里 -->
            </ResourceDictionary.MergedDictionaries>
            
            <!-- 全局字体资源，替换默认主题字体 -->
            <FontFamily x:Key="ContentControlThemeFontFamily">Arial Black</FontFamily>
            <FontFamily x:Key="XamlAutoFontFamily">Arial Black</FontFamily>
            
            <!-- TextBox全局样式 -->
            <Style TargetType="TextBox">
                <Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}" />
            </Style>
            
            <!-- NumberBox全局样式 -->
            <Style TargetType="controls:NumberBox">
                <Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}" />
            </Style>
            
            <!-- MenuFlyoutItem全局样式 -->
            <Style TargetType="MenuFlyoutItem">
                <Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}" />
            </Style>
        </ResourceDictionary>
    </Application.Resources>
</Application>

关键说明 #

• 资源优先级：自定义资源和样式必须放在XamlControlsResources之后，才能覆盖WinUI3默认主题样式
• 主题资源复用：ContentControlThemeFontFamily是多数控件默认继承的字体资源，替换它可以让大量控件自动应用目标字体
• 精准控件样式：对于TextBox、NumberBox这类未直接继承主题字体的控件，需要单独定义全局样式强制设置FontFamily
• MenuFlyout处理：MenuFlyout的文本由MenuFlyoutItem承载，需为该控件定义全局样式

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