Изменить стиль CheckBox на основе свойства IsChecked в WPF XAML

Question

Я пытаюсь изменить стиль элемента управления Checkbox, чтобы он выглядел следующим образом (тумблер):

Я выбрал флажок, потому что хочу использовать свойство IsChecked в моей ViewModel. Я попытался изменить стиль элемента управления Checkbox на основе свойства IsChecked. Если IsChecked равен false, я хочу загрузить стиль ToggleSwitchOff, а если IsChecked равен true, я хочу загрузить стиль 'ToggleSwitchOn' для моего флажка.

Это мой код:

<UserControl.Resources>

<Style x:Key="ToggleSwitchOff" TargetType="CheckBox">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="CheckBox">
        <Viewbox Margin="0" HorizontalAlignment="Right">
          <Grid
            Width="100"
            Height="60"
            Margin="0"
            HorizontalAlignment="Left"
            VerticalAlignment="Top">

            <Rectangle
              x:Name="Back"
              Width="96"
              Height="56"
              Margin="2,2,0,0"
              HorizontalAlignment="Left"
              VerticalAlignment="Top"
              Fill="#A0A0A0"
              RadiusX="30"
              RadiusY="30" />

            <Ellipse
              x:Name="Dot"
              Width="50"
              Height="50"
              Margin="-39,0,0,0"
              HorizontalAlignment="Center"
              VerticalAlignment="Center"
              Fill="White" />

          </Grid>
        </Viewbox>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

<Style x:Key="ToggleSwitchOn" TargetType="CheckBox">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="CheckBox">
        <Viewbox Margin="0" HorizontalAlignment="Right">
          <Grid
            Width="100"
            Height="60"
            Margin="0"
            HorizontalAlignment="Left"
            VerticalAlignment="Top">

            <Rectangle
              x:Name="Back"
              Width="96"
              Height="56"
              Margin="2,2,0,0"
              HorizontalAlignment="Left"
              VerticalAlignment="Top"
              Fill="#9E005A"
              RadiusX="30"
              RadiusY="30" />

            <Ellipse
              x:Name="Dot"
              Width="50"
              Height="50"
              Margin="0,0,-39,0"
              HorizontalAlignment="Center"
              VerticalAlignment="Center"
              Fill="White" />

          </Grid>
        </Viewbox>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

</UserControl.Resources>

<CheckBox
  Grid.Row="5"
  Grid.Column="2"
  Width="35"
  Height="20"
  HorizontalAlignment="Left"
  VerticalAlignment="Center"
  IsChecked="{Binding CompilerModel.WarningsAsErrors}">

  <Style>
    <Style.Triggers>
      <Trigger Property="IsChecked" Value="false">
        <Setter Property="Style" Value="{StaticResource ToggleSwitchOff}" />
      </Trigger>
      <Trigger Property="IsChecked" Value="false">
        <Setter Property="Style" Value="{StaticResource ToggleSwitchOn}" />
      </Trigger>
    </Style.Triggers>
  </Style>
</CheckBox>

Я получил следующие ошибки:

Answer 1

Этот очень простой стиль ToggleButton должен дать вам отправную точку.

Вам не нужно изменять какой-либо стиль, просто установите несколько значений свойства в триггере ControlTemplate для свойства IsChecked.

<Style TargetType="ToggleButton">
    <Setter Property="Width" Value="40"/>
    <Setter Property="Height" Value="20"/>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="BorderBrush" Value="Black"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ToggleButton">
                <Grid>
                    <Rectangle x:Name="frame"
                               Fill="{TemplateBinding Background}"
                               Stroke="{TemplateBinding BorderBrush}"
                               StrokeThickness="2" Height="20" RadiusX="10" RadiusY="10"/>

                    <Ellipse x:Name="thumb"
                             Fill="{TemplateBinding BorderBrush}"
                             HorizontalAlignment="Left" Margin="5"
                             Width="10" Height="10"/>
                </Grid>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter TargetName="frame" Property="Stroke" Value="DodgerBlue"/>
                        <Setter TargetName="frame" Property="Fill" Value="DodgerBlue"/>
                        <Setter TargetName="thumb" Property="Fill" Value="White"/>
                        <Setter TargetName="thumb" Property="HorizontalAlignment"
                                Value="Right"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>