覆盖切换按钮样式 [英] Override ToggleButton Style
问题描述
我的窗口中有一个 ToggleButton,并在我的 ResourceDictionary 中设置了样式.它在 ResourceDictionary 中的原因是因为我很快就会有几个或更多 ToggleButton,它们必须具有相同的外观.
I have a ToggleButton in my window and styled in my ResourceDictionary. The reason why it's in the ResourceDictionary is because I have several or more ToggleButton soon which has to have the same look.
<Style x:Key="Standardbutton" TargetType="{x:Type ToggleButton}">
<Setter Property="FontSize" Value="18" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="Resources/Standard_Button_Normal.png" />
</Setter.Value>
</Setter>
<Setter Property="Height" Value="56" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Border Name="border" BorderThickness="0" Padding="0,0" BorderBrush="DarkGray" CornerRadius="0" Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Left" VerticalAlignment="Center" Name="content" Margin="15,0,0,0"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="Resources/Standard_Button_Pressed.png" />
</Setter.Value>
</Setter>
<Setter Property="Foreground">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFF9CE7B" Offset="0"/>
<GradientStop Color="#FFE88C41" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
现在这个 ToggleButton 样式有一个默认背景,而且当IsChecked"为真时,它会有不同的背景(正如你在我上面的 XAML 代码中看到的那样).
Now this ToggleButton style has a default background and also when "IsChecked" is true, it will have different background (as you can see on my XAML code above).
现在这些切换按钮必须结合图标 + 文本,就像我在这里所做的一样(抱歉我的 XAML 代码很烂)
Now these toggle buttons has to have icon + text combined, like what I did here (sorry for my lame XAML code)
<ToggleButton Style="{DynamicResource Standardbutton}" Margin="0,0,0,4">
<StackPanel Orientation="Horizontal">
<Image Source="Resources/scan_26x26.png" />
<TextBlock Text="Scan"/>
</StackPanel>
</ToggleButton>
问题是,检查触发禁止托特顿(ischecked = true)时如何具有不同的图标?
The question is, how can I have a different icon when the ToggleButton is checked (IsChecked=True)?
这里有一些图片可能有助于您理解问题
Here are some images that might help you to understand the question
普通切换按钮样式
IsChecked=真实样式
我的设计目标是当 IsChecked=True
时有一个不同的图标
Normal ToggleButton Style
IsChecked=True Style
My design goal is to have a different icon when IsChecked=True
推荐答案
将两个图像添加到控件模板,并将它们的 Visibility
属性绑定到 IsChecked
属性(使用一个 IValueConverter
,用于从 true/false 转换为适当的 Visibility
枚举值).
Add both images to the control template, and bind their Visibility
property to the IsChecked
property (use an IValueConverter
to convert from true/false to the appropriate Visibility
enum value).
<ToggleButton Style="{DynamicResource Standardbutton}" Margin="0,0,0,4">
<StackPanel Orientation="Horizontal">
<Image Source="Resources/scan_26x26.png"
Visibility="{Binding
RelativeSource={RelativeSource AncestorType=ToggleButton},
Path=IsChecked,
Converter={StaticResource BoolToVisibleConverter}}" />
<Image Source="Resources/anotherimage.png"
Visibility="{Binding
RelativeSource={RelativeSource AncestorType=ToggleButton},
Path=IsChecked,
Converter={StaticResource BoolToCollapsedConverter}}" />
<TextBlock Text="Scan"/>
</StackPanel>
</ToggleButton>
我使用了两个转换器 BoolToVisibleConverter
和 BoolToCollapsedConverter
,但你也可以使用 ConverterParameter
来完成同样的事情.
I used two converters BoolToVisibleConverter
and BoolToCollapsedConverter
, but you could also use a ConverterParameter
to accomplish the same thing.
这篇关于覆盖切换按钮样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!