MAUI中使用TemplateBinding时Label字体不生效问题求助

问题背景 #

学习MAUI时遇到绑定相关问题：使用自定义ControlTemplate的RadioButton列表，配置了Fontello字体（命名为"Icons"）显示图标+文本，未使用绑定时字体显示正常，绑定数据后Label的字体不再生效。

相关代码 #

XAML代码

<ScrollView Grid.Row="1"
            Orientation="Horizontal"
            HorizontalOptions="FillAndExpand"
            HorizontalScrollBarVisibility="Default"
            VerticalOptions="Center">
    <HorizontalStackLayout RadioButtonGroup.GroupName="MenuCategories"
                           x:Name="foodTypeStack"
                           VerticalOptions="Start"
                           Spacing="3">
        <BindableLayout.ItemTemplate>
            <DataTemplate>
                <RadioButton Content="{Binding .}">
                    <RadioButton.ControlTemplate>
                        <ControlTemplate>
                            <Grid>

                                <Border x:Name="dishTypeContainer"
                                        MinimumWidthRequest="80"
                                        MaximumHeightRequest="140"
                                        Padding="8,0,8,0"
                                        Stroke="Transparent">
                                    <Border.StrokeShape>
                                        <RoundRectangle CornerRadius="20,20,20,20" />
                                    </Border.StrokeShape>

                                    <Label x:Name="dishTypeTextLabel"
                                           HorizontalOptions="Center"
                                           Text="{TemplateBinding Content.Name}"
                                           FontFamily="Icons"
                                           VerticalOptions="Center" />
                                </Border>

                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroupList>
                                        <VisualStateGroup x:Name="CheckedStates">
                                            <VisualState x:Name="Checked">
                                                <VisualState.Setters>
                                                    <Setter TargetName="dishTypeTextLabel"
                                                            Property="Label.TextColor"
                                                            Value="WhiteSmoke" />
                                                    <Setter TargetName="dishTypeContainer"
                                                            Property="Border.BackgroundColor"
                                                            Value="{StaticResource DarkSeaBlue}" />
                                                </VisualState.Setters>
                                            </VisualState>
                                            <VisualState x:Name="Unchecked">
                                                <VisualState.Setters>
                                                    <Setter TargetName="dishTypeTextLabel"
                                                            Property="Label.TextColor"
                                                            Value="{StaticResource LightGray}" />
                                                    <Setter TargetName="dishTypeContainer"
                                                            Property="Border.BackgroundColor"
                                                            Value="WhiteSmoke" />
                                                </VisualState.Setters>
                                            </VisualState>
                                        </VisualStateGroup>
                                    </VisualStateGroupList>
                                </VisualStateManager.VisualStateGroups>
                            </Grid>
                        </ControlTemplate>
                    </RadioButton.ControlTemplate>
                </RadioButton>
            </DataTemplate>
        </BindableLayout.ItemTemplate>
    </HorizontalStackLayout>
</ScrollView>

后台绑定代码

protected override async void OnAppearing()
{
    base.OnAppearing();
    var foodTypes = await menuDatabase.GetFoodTypeListAsync();
    BindableLayout.SetItemsSource(foodTypeStack, foodTypes);
}

字体配置（MauiProgram.cs）

public static MauiApp CreateMauiApp()
{
    var builder = MauiApp.CreateBuilder();
    builder
        .UseMauiApp<App>()
        .ConfigureFonts(fonts =>
        {
            fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
            fonts.AddFont("Fontello.ttf", "Icons");
            fonts.AddFont("Rubik-Light.ttf", "RubikLight");
            fonts.AddFont("Rubik-Regular.ttf", "RubikRegular");
        });

    builder.Services.AddSingleton<MauiAppTestDatabase>();

#if DEBUG
    builder.Logging.AddDebug();
#endif
    return builder.Build();
}

文本示例

 Drink

问题原因 #

核心问题在于ControlTemplate中TemplateBinding的上下文逻辑：当RadioButton的Content绑定整个foodType对象后，{TemplateBinding Content.Name}的绑定路径在解析时，可能导致Label的FontFamily设置被上下文覆盖，或者MAUI没有正确将绑定后的文本关联到指定字体。

解决方案 #

方案1：直接绑定数据对象属性（推荐） #

跳过RadioButton的Content中转，直接将Label的Text绑定到数据上下文的Name属性，避免TemplateBinding的上下文干扰：

修改DataTemplate部分代码：

<DataTemplate>
    <RadioButton>
        <RadioButton.ControlTemplate>
            <ControlTemplate>
                <Grid>
                    <Border x:Name="dishTypeContainer"
                            MinimumWidthRequest="80"
                            MaximumHeightRequest="140"
                            Padding="8,0,8,0"
                            Stroke="Transparent">
                        <Border.StrokeShape>
                            <RoundRectangle CornerRadius="20,20,20,20" />
                        </Border.StrokeShape>
                        <!-- 直接绑定到当前数据上下文的Name属性 -->
                        <Label x:Name="dishTypeTextLabel"
                               HorizontalOptions="Center"
                               Text="{Binding Name}"
                               FontFamily="Icons"
                               VerticalOptions="Center" />
                    </Border>
                    <!-- 视觉状态代码保持不变 -->
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroupList>
                            <VisualStateGroup x:Name="CheckedStates">
                                <VisualState x:Name="Checked">
                                    <VisualState.Setters>
                                        <Setter TargetName="dishTypeTextLabel"
                                                Property="Label.TextColor"
                                                Value="WhiteSmoke" />
                                        <Setter TargetName="dishTypeContainer"
                                                Property="Border.BackgroundColor"
                                                Value="{StaticResource DarkSeaBlue}" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="Unchecked">
                                    <VisualState.Setters>
                                        <Setter TargetName="dishTypeTextLabel"
                                                Property="Label.TextColor"
                                                Value="{StaticResource LightGray}" />
                                        <Setter TargetName="dishTypeContainer"
                                                Property="Border.BackgroundColor"
                                                Value="WhiteSmoke" />
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateGroupList>
                    </VisualStateManager.VisualStateGroups>
                </Grid>
            </ControlTemplate>
        </RadioButton.ControlTemplate>
    </RadioButton>
</DataTemplate>

方案2：显式在视觉状态中设置FontFamily #

如果需要保留RadioButton的Content绑定，可以在视觉状态中强制设置Label的FontFamily，确保绑定后字体设置不被覆盖：

修改视觉状态代码：

<VisualState x:Name="Checked">
    <VisualState.Setters>
        <Setter TargetName="dishTypeTextLabel"
                Property="Label.TextColor"
                Value="WhiteSmoke" />
        <Setter TargetName="dishTypeContainer"
                Property="Border.BackgroundColor"
                Value="{StaticResource DarkSeaBlue}" />
        <!-- 强制指定FontFamily -->
        <Setter TargetName="dishTypeTextLabel"
                Property="Label.FontFamily"
                Value="Icons" />
    </VisualState.Setters>
</VisualState>
<VisualState x:Name="Unchecked">
    <VisualState.Setters>
        <Setter TargetName="dishTypeTextLabel"
                Property="Label.TextColor"
                Value="{StaticResource LightGray}" />
        <Setter TargetName="dishTypeContainer"
                Property="Border.BackgroundColor"
                Value="WhiteSmoke" />
        <!-- 强制指定FontFamily -->
        <Setter TargetName="dishTypeTextLabel"
                Property="Label.FontFamily"
                Value="Icons" />
    </VisualState.Setters>
</VisualState>

额外检查项 #

• 确认数据库返回的Name字段值是正确的Unicode转义字符（如 Drink），确保绑定后MAUI能正确解析为对应字体字符。
• 检查Fontello.ttf文件的生成操作是否设置为MauiFont（右键文件→属性→生成操作选择MauiFont）。

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