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

Question

我用我的 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,0,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 开始）。

Answer 1

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

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

Answer 2

问题是 dependency property value precedence。分配给控件模板中 TextBlock 中的 Foreground 属性的值优先于样式中的触发器。您可以在样式中将 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,0,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,0,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>

Answer 3

在 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,0,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>

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

How to change a radio button's foreground color when clicked?

wpf

xaml

radio-button

controltemplate