单击时如何更改单选按钮的前景色？

如何解决单击时如何更改单选按钮的前景色？

我使用我的 ResourceDictionary 来设计我的 RadioButton：

<Style x:Key="MenuButtonTheme"
       BasedOn="{StaticResource {x:Type ToggleButton}}"
       targettype="{x:Type RadioButton}">
    <Style.Setters>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate targettype="RadioButton">
                    <Grid Background="{TemplateBinding Background}">
                        <TextBlock Text="{TemplateBinding Property=Content}"
                                    VerticalAlignment="Center"
                                    Foreground="#7D8083"
                                    FontSize="14.59"
                                    FontWeight="Bold"
                                    FontFamily="/UiDesign/Fonts/#Nunito"
                                    Margin="12,0" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Background" Value="Transparent" />
    </Style.Setters>

    <Style.Triggers>
        <Trigger Property="IsChecked" Value="True">
            <Setter Property="Background" Value="#22202f"/>
            <Setter Property="Foreground" Value="red"/>
        </Trigger>
    </Style.Triggers>
</Style>

当我点击 RadioButton 时，背景颜色会发生变化，而前景色不会。

这是我应用样式的方式：

<RadioButton Content="Dashboard"
             Grid.Column="1"
             Grid.Row="0"
             Style="{StaticResource MenuButtonTheme}"/>

我关注了 this tutorial here（RadioButton 主题从这里开始 @10:00）。

解决方法

问题是dependency property value precedence。分配给控件模板中 Foreground 中的 TextBlock 属性的值优先于样式中的触发器。您可以将设置 Foreground 移动到样式中的 setter 并使用 TemplateBinding:

<Style BasedOn="{StaticResource {x:Type ToggleButton}}"
       TargetType="{x:Type RadioButton}"
       x:Key="MenuButtonTheme">
   <Style.Setters>
      <Setter Property="Foreground" Value="#7D8083"/>
      <Setter Property="Template">
         <Setter.Value>
            <ControlTemplate TargetType="RadioButton">
               <Grid Background="{TemplateBinding Background}">
                  <TextBlock Text="{TemplateBinding Property=Content}"
                             Foreground="{TemplateBinding Foreground}"
                             VerticalAlignment="Center"
                             FontSize="14.59"
                             FontWeight="Bold"
                             FontFamily="/UiDesign/Fonts/#Nunito"
                             Margin="12,0" />
               </Grid>
            </ControlTemplate>
         </Setter.Value>
      </Setter>

      <Setter Property="Background"
              Value="Transparent" />
   </Style.Setters>
   <Style.Triggers>
      <Trigger Property="IsChecked"
               Value="True">
         <Setter Property="Background"
                 Value="#22202f" />
         <Setter Property="Foreground"
                 Value="Red" />
      </Trigger>
   </Style.Triggers>
</Style>

另一种方法是使用 ControlTemplate.Triggers 并专门针对 TextBlock。

<Style BasedOn="{StaticResource {x:Type ToggleButton}}"
       TargetType="{x:Type RadioButton}"
       x:Key="MenuButtonTheme">
   <Style.Setters>
      <Setter Property="Template">
         <Setter.Value>
            <ControlTemplate TargetType="RadioButton">
               <Grid Background="{TemplateBinding Background}">
                  <TextBlock x:Name="RadioButton"
                             Text="{TemplateBinding Property=Content}"
                             VerticalAlignment="Center"
                             Foreground="#7D8083"
                             FontSize="14.59"
                             FontWeight="Bold"
                             FontFamily="/UiDesign/Fonts/#Nunito"
                             Margin="12,0" />
               </Grid>
               <ControlTemplate.Triggers>
                  <Trigger Property="IsChecked"
                           Value="True">
                     <Setter TargetName="RadioButton"
                             Property="Foreground"
                             Value="Red" />
                  </Trigger>
               </ControlTemplate.Triggers>
            </ControlTemplate>
         </Setter.Value>
      </Setter>
      <Setter Property="Background"
              Value="Transparent" />
   </Style.Setters>
   <Style.Triggers>
      <Trigger Property="IsChecked"
               Value="True">
         <Setter Property="Background"
                 Value="#22202f" />
      </Trigger>
   </Style.Triggers>
</Style>

,

检查前景的拼写尝试用红色大写

            <Setter Property="Foreground"
                Value="Red" />

,

在 Style.Trigger 中，ControlTemplate 中的对象不可访问。
因此，它必须在 ControlTemplate.Triggers 内处理。

<Style BasedOn="{StaticResource {x:Type ToggleButton}}" 
       TargetType="{x:Type RadioButton}" 
       x:Key="MenuButtonTheme">
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="Foreground" Value="#7D8083" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="RadioButton">
                <Grid Background="{TemplateBinding Background}">
                    <TextBlock x:Name="text"
                                Text="{TemplateBinding Property=Content}"
                                VerticalAlignment="Center"
                                Foreground="{TemplateBinding Foreground}"
                                FontSize="14.59"
                                FontWeight="Bold"
                                FontFamily="/UiDesign/Fonts/#Nunito"
                                Margin="12,0" />
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter Property="Background" Value="#22202f" />
                        <Setter Property="Foreground" Value="red" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>