WPF ToggleButton IsChecked 触发器

WPF ToggleButton IsChecked Trigger

提问by Llaslo

This is driving me batty. I have a simple WPF toggle button, with two triggers for IsChecked. One for the value being true, and the other for the value being false. It works fine when the button is not checked, my style for false is applied; however, the system never applies the style for when IsChecked is true. It always just uses the default blue chrome windows style. Any ideas?

这让我很生气。我有一个简单的 WPF 切换按钮，有两个 IsChecked 触发器。一个为真值，另一个为假值。未选中按钮时它工作正常，应用了我的 false 样式；但是，系统从不应用 IsChecked 为真时的样式。它始终只使用默认的蓝色镀铬窗口样式。有任何想法吗？

<ToggleButton Content="Control 1" Width="200" Margin="0,0,0,10" Focusable="False">
    <ToggleButton.Resources>
        <Style TargetType="{x:Type ToggleButton}">
            <Style.Triggers>
                <Trigger Property="IsChecked" Value="True">
                    <Setter Property="Background">
                        <Setter.Value>
                            <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                <GradientStop Color="#FFF3F3F3" Offset="1"/>
                                <GradientStop Color="LawnGreen" Offset="0.307"/>
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                </Trigger>
                <Trigger Property="IsChecked" Value="False">
                    <Setter Property="Background">
                        <Setter.Value>
                            <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                <GradientStop Color="#FFF3F3F3" Offset="1"/>
                                <GradientStop Color="Red" Offset="0.307"/>
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
    </ToggleButton.Resources>
</ToggleButton>

Any help would be greatly appreciated. I'm sure it's something obvious that I'm just overlooking.

任何帮助将不胜感激。我敢肯定，我只是忽略了一些显而易见的事情。

回答by newb

The layout when the ToggleButton.IsCheckedtoggles seems to be part of the template. If you override the template, you should be able to set the values correctly. See Override ToggleButton Style

ToggleButton.IsChecked切换时的布局似乎是模板的一部分。如果您覆盖模板，您应该能够正确设置值。请参阅覆盖切换按钮样式

Example:

例子：

<ToggleButton Content="Control 1" Focusable="False">
   <ToggleButton.Template>
      <ControlTemplate TargetType="{x:Type ToggleButton}">
         <Border CornerRadius="3" Background="{TemplateBinding Background}">
            <ContentPresenter Margin="3" 
               HorizontalAlignment="Center" 
               VerticalAlignment="Center"/>
         </Border>
         <ControlTemplate.Triggers>
            <Trigger Property="IsChecked" Value="True">
               <Setter Property="Background">
                  <Setter.Value>
                     <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                        <GradientStop Color="#FFF3F3F3" Offset="1"/>
                        <GradientStop Color="LawnGreen" Offset="0.307"/>
                     </LinearGradientBrush>
                  </Setter.Value>
               </Setter>
            </Trigger>
            <Trigger Property="IsChecked" Value="False">
               <Setter Property="Background">
                  <Setter.Value>
                     <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                        <GradientStop Color="#FFF3F3F3" Offset="1"/>
                        <GradientStop Color="Red" Offset="0.307"/>
                     </LinearGradientBrush>
                  </Setter.Value>
               </Setter>
            </Trigger>
            </ControlTemplate.Triggers>
         </ControlTemplate>
      </ToggleButton.Template>
   </ToggleButton>

回答by monstr

I know, my answer bring nothing new, but template suggested by newbseems very simplified to me. So I expose my own version of ControlTemplate. It might be usefull for someone.

我知道，我的回答没有带来任何新内容，但是newb建议的模板对我来说似乎非常简单。所以我公开了我自己的 ControlTemplate 版本。它可能对某人有用。

<ToggleButton Width="100" Height="100">
    <ToggleButton.Template>
        <ControlTemplate TargetType="{x:Type ToggleButton}">
            <Border BorderBrush="Orange" 
                    BorderThickness="3" 
                    CornerRadius="3" 
                    Margin="1" 
                    Name="Border" 
                    Background="{TemplateBinding Background}">
                <Grid>
                    <Rectangle Name="FocusCue" 
                            Visibility="Hidden" 
                            Stroke="Black"
                            StrokeThickness="1" 
                            StrokeDashArray="1 2"
                            SnapsToDevicePixels="True" ></Rectangle>
                    <ContentPresenter  Margin="3" 
                                    HorizontalAlignment="Center" 
                                    VerticalAlignment="Center"/>
                </Grid>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsChecked" Value="True">
                    <Setter TargetName="Border" Property="Background" Value="IndianRed" />
                    <Setter TargetName="Border" Property="BorderBrush" Value="DarkKhaki" />
                </Trigger>
                <Trigger Property="IsChecked" Value="False">
                    <Setter TargetName="Border" Property="Background" Value="Red" />
                    <Setter TargetName="Border" Property="BorderBrush" Value="Orange" />
                </Trigger>
                <Trigger Property="IsKeyboardFocused" Value="True">
                    <Setter TargetName="FocusCue" Property="Visibility" Value="Visible" />
                </Trigger>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="Border" Property="Background" Value="DarkRed" />
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </ToggleButton.Template>
</ToggleButton>