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

Question

我正在尝试更改Checkbox控件的样式，使其看起来像这样（切换开关）：

我选择Checkbox是因为我想利用ViewModel中的IsChecked属性。 我试图根据IsChecked属性更改Checkbox控件的样式。如果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样式应该为您提供一个起点。

您无需更改任何样式，只需在IsChecked属性的ControlTemplate触发器中设置一些属性值即可。

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