WinUI 3中如何在ToggleSwitch.HeaderTemplate的DataTemplate里用x:Bind

要在WinUI 3桌面项目中为ToggleSwitch的Header创建基于x:Bind的Style，核心是明确x:Bind的默认上下文是页面的代码后台/ViewModel，而非ToggleSwitch本身。你遇到的类型转换错误和Foreground绑定失效，都是因为没有指定正确的绑定源。以下是正确的实现方案：

1. 编写自定义ToggleSwitch Style #

在Page.Resources中定义重写ControlTemplate的Style，通过RelativeSource=TemplatedParent将绑定源指定为ToggleSwitch实例：

<Page.Resources>
    <Style x:Key="CustomToggleSwitchStyle" TargetType="ToggleSwitch">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToggleSwitch">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <!-- 自定义Header文本块 -->
                        <TextBlock
                            Grid.Column="0"
                            Text="{x:Bind RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Header, Mode=OneWay}"
                            Foreground="{x:Bind RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Foreground, Mode=OneWay}"
                            VerticalAlignment="Center"
                            Margin="0 0 12 0"/>
                        <!-- 保留默认的ToggleSwitch开关控件 -->
                        <ToggleSwitchChrome
                            Grid.Column="1"
                            x:Name="ToggleSwitchChrome"
                            IsOn="{TemplateBinding IsOn}"
                            OffContent="{TemplateBinding OffContent}"
                            OnContent="{TemplateBinding OnContent}"
                            Foreground="{TemplateBinding Foreground}"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>

2. 在页面中使用自定义Style #

直接引用上述Style并设置Header属性即可：

<ToggleSwitch Style="{StaticResource CustomToggleSwitchStyle}" Header="自动同步" IsOn="True"/>
<ToggleSwitch Style="{StaticResource CustomToggleSwitchStyle}" Header="夜间模式" IsOn="False" Foreground="#FF666666"/>

关键说明 #

• x:Bind的上下文问题：默认情况下x:Bind会绑定到页面的代码后台/ViewModel，因此直接写{x:Bind Header}会尝试在页面上下文中寻找Header属性，导致类型转换错误。通过RelativeSource={RelativeSource Mode=TemplatedParent}，明确指定绑定源为当前模板的父级（即ToggleSwitch实例），就能正确绑定到ToggleSwitch自身的Header属性。
• Foreground绑定修复：同样通过TemplatedParent绑定ToggleSwitch的Foreground属性，即可同步你设置的前景色。如果需要根据开关状态动态改变颜色，可以添加IValueConverter实现逻辑：

可选：根据开关状态动态切换Foreground #

1. 实现转换器：

public class ToggleStateForegroundConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        return (bool)value 
            ? new SolidColorBrush(Colors.DarkGreen) 
            : new SolidColorBrush(Colors.Gray);
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

2. 在Resources中添加转换器实例：

<local:ToggleStateForegroundConverter x:Key="ToggleForegroundConverter"/>

3. 修改TextBlock的Foreground绑定：

Foreground="{x:Bind RelativeSource={RelativeSource Mode=TemplatedParent}, Path=IsOn, Mode=OneWay, Converter={StaticResource ToggleForegroundConverter}}"

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