覆盖ToggleButton样式
覆盖ToggleButton样式
提问于 2012-09-14 08:58:16
我在我的窗口中有一个在我的ResourceDictionary中设置了样式的ToggleButton。它在ResourceDictionary中的原因是因为我很快就会有几个或更多的ToggleButton，它们必须具有相同的外观。
<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代码中看到的)。
现在，这些切换按钮必须将图标+文本组合在一起，就像我在这里所做的那样(抱歉，我的XAML代码很糟糕)
<ToggleButton Style="{DynamicResource Standardbutton}" Margin="0,0,0,4">
<StackPanel Orientation="Horizontal">
<Image Source="Resources/scan_26x26.png" />
<TextBlock Text="Scan"/>
</StackPanel>
</ToggleButton>问题是，当ToggleButton被选中(IsChecked=True)时，我如何才能有一个不同的图标？
这里有一些图片可能会帮助你理解这个问题
普通ToggleButton样式
IsChecked=True样式
我的设计目标是在IsChecked=True的时候有一个不同的图标
回答 1
Stack Overflow用户
回答已采纳
发布于 2012-09-14 09:48:47
将这两个图像添加到控件模板，并将它们的Visibility属性绑定到IsChecked属性(使用IValueConverter将true/false转换为适当的Visibility枚举值)。
<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来完成相同的任务。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12416821
复制相关文章
相似问题
腾讯云开发者
