Изменить цвет фона кнопки переключения, когда кнопка переключения отмечена

Question

Я хочу изменить цвет фона кнопки переключения, когда кнопка переключения включена, и наоборот.

Как мне этого добиться?

Answer 1

<ToggleButton Content="toggle">
    <ToggleButton.Style>
        <Style TargetType="{x:Type ToggleButton}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ToggleButton">
                        <Border BorderBrush="{TemplateBinding BorderBrush}" 
                                Background="{TemplateBinding Background}">
                            <ContentPresenter HorizontalAlignment="Center"                  
                                              VerticalAlignment="Center"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter> 
            <Style.Triggers>
                <Trigger Property="IsChecked" Value="True">
                    <Setter Property="Background" Value="Red" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </ToggleButton.Style>
</ToggleButton>

Почти такой же, как у Клауса, но с использованием "TemplateBinding" вместо "TargetName". При использовании TemplateBinding шаблон ControlTemplate использует BorderBrush и Background из ToggleButtons DefaultStyle. Таким образом, триггер может установить фон ToggleButtons, а с помощью границы он также будет показан.

Answer 2

Лучший простой способ добиться этого (без каких-либо Blend и переопределения 50 строк XAML;) - это следующий способ, то есть использование триггеров:

<Window x:Class="StackOverflow.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid>
    <ToggleButton x:Name="tg" Height="20" Width="80">
        <ToggleButton.Style>
            <Style TargetType="{x:Type ToggleButton}">
                <Setter Property="Background" Value="Green"/>
                <Style.Triggers>
                    <Trigger Property="IsChecked" Value="true">
                        <Setter Property="Background" Value="Red"/>
                    </Trigger>
                </Style.Triggers>

            </Style>
        </ToggleButton.Style>
    </ToggleButton>
</Grid>

Попробуйте это прежде всего, прежде чем идти дальше, и посмотрите, подходит ли оно вашим потребностям

Answer 3

Проверьте это решение :

<Grid>
<Grid.Resources>
  <Style x:Key="ToggleButtonStyle1" TargetType="{x:Type ToggleButton}">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type ToggleButton}">
          <Border HorizontalAlignment="Center" VerticalAlignment="Center" x:Name="border" Padding="5,5,5,5" CornerRadius="5,5,5,5" Background="#FFBFACAC" BorderBrush="#FF000000" BorderThickness="1,1,1,1" SnapsToDevicePixels="True">
            <ContentPresenter x:Name="contentPresenter"/>
          </Border>
          <ControlTemplate.Triggers>
            <Trigger Property="IsChecked" Value="true">
              <Setter Property="Background" TargetName="border" Value="#FFC31010"/>
            </Trigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>
</Grid.Resources>

<ToggleButton Content="ToggleButton" Margin="25" Width="90" Height="45" Style="{StaticResource ToggleButtonStyle1}"/>

</Grid>

Answer 4

Есть ли у вас Expression Blend? Это можно легко сделать, щелкнув правой кнопкой мыши ToggleButton и выбрав «Редактировать шаблон», затем «Редактировать копию ...» Из шаблона перейдите на вкладку «Состояния» и выберите состояние «Проверено». Сбросьте цвет фона, отличающийся от базового состояния и готово.

См. Образец:

<Window.Resources>
    <Style x:Key="ButtonFocusVisual">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <LinearGradientBrush x:Key="ButtonNormalBackground" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#F3F3F3" Offset="0"/>
        <GradientStop Color="#EBEBEB" Offset="0.5"/>
        <GradientStop Color="#DDDDDD" Offset="0.5"/>
        <GradientStop Color="#CDCDCD" Offset="1"/>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="ButtonNormalBorder" Color="#FF707070"/>
    <Style x:Key="ToggleButtonStyle" TargetType="{x:Type ToggleButton}">
        <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
        <Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
        <Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Padding" Value="1"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ToggleButton}">
                    <Microsoft_Windows_Themes:ButtonChrome x:Name="Chrome" BorderBrush="{TemplateBinding BorderBrush}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" RenderDefaulted="{TemplateBinding Button.IsDefaulted}" SnapsToDevicePixels="true" Background="White">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates" ei:ExtendedVisualStateManager.UseFluidLayout="True">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="0:0:0.5"/>
                                </VisualStateGroup.Transitions>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="CheckStates">
                                <VisualState x:Name="Checked">
                                    <Storyboard>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Chrome">
                                            <EasingColorKeyFrame KeyTime="0" Value="Red"/>
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unchecked"/>
                                <VisualState x:Name="Indeterminate"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <VisualStateManager.CustomVisualStateManager>
                            <ei:ExtendedVisualStateManager/>
                        </VisualStateManager.CustomVisualStateManager>
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Microsoft_Windows_Themes:ButtonChrome>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsKeyboardFocused" Value="true">
                            <Setter Property="RenderDefaulted" TargetName="Chrome" Value="true"/>
                        </Trigger>
                        <Trigger Property="IsChecked" Value="true">
                            <Setter Property="RenderPressed" TargetName="Chrome" Value="true"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="#ADADAD"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

<Grid x:Name="LayoutRoot">
    <ToggleButton Content="ToggleButton" HorizontalAlignment="Left" Height="36" Margin="116,131,0,0" VerticalAlignment="Top" Width="122" Background="White" Style="{DynamicResource ToggleButtonStyle}"/>
</Grid>

Answer 5

Альтернативный подход заключается в обработке событий Checked и Unchecked в XAML следующим образом:

<ToggleButton Checked="HandleChecked" Unchecked="HandleUnchecked" ... />

и в коде:

    private void HandleChecked(object sender, RoutedEventArgs e)
    {
        ToggleButton toggle = sender as ToggleButton;
        toggle.Background = new SolidColorBrush(Colors.Orange);
    }

    private void HandleUnchecked(object sender, RoutedEventArgs e)
    {
        ToggleButton toggle = sender as ToggleButton;
        toggle.Background = new SolidColorBrush(Colors.Transparent);
    }