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

這個非常基本的切換按鈕樣式應該給你一個起點。

您不需要更改任何樣式，只需在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

您的代碼有幾個問題。

首先，您不能 select 樣式中的樣式。 你想要做的是 select 你風格的控制模板。 其次，您的兩個觸發器都是錯誤值。

嘗試這個：

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