根据 WPF XAML 中的 IsChecked 属性更改 CheckBox 样式

Question

I'm trying to change the Style of a Checkbox control to make it look like this (toggle switch):

I choose Checkbox because I want to take advantage of IsChecked property in my ViewModel. I tried to change the Style of the Checkbox control based on IsChecked property. If IsChecked is false I want to load the ToggleSwitchOff style and if IsChecked is true I want to load 'ToggleSwitchOn' style for my Checkbox.

This is my code:

<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>

The errors I got are:

Answer 1

This very basic ToggleButton Style should give you a starting point.

You don't need to change any Style, just set a few property values in a ControlTemplate Trigger on the IsChecked property.

<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>

Answer 2

There are several issues with your code.

First you can't select a style within a style. What you want to do is select the control template in your style. Second both your triggers are for a false value.

Try this:

<UserControl.Resources>
    <ControlTemplate TargetType="CheckBox" x:Key="ToggleSwitchOff">
        <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>

    <ControlTemplate TargetType="CheckBox" x:Key="ToggleSwitchOn">
        <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>

</UserControl.Resources>

<CheckBox
        Width="25"
        Height="20"
        HorizontalAlignment="Left"
        VerticalAlignment="Center"
        IsChecked="True" >
    <CheckBox.Style>

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