根据WPF XAML中的IsChecked属性更改复选框样式

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>

Answer 2

您的代码有几个问题。

首先，您不能在样式内选择样式。您要做的是选择样式中的控件模板。其次，您的两个触发器都是错误的值。

尝试一下：

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