覆盖切换按钮样式答案

【问题标题】：Override ToggleButton Style覆盖切换按钮样式
【发布时间】：2013-11-09 00:02:39
【问题描述】：

我的窗口中有一个 ToggleButton，并在我的 ResourceDictionary 中设置了样式。它在 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) 时显示不同的图标？

这里有一些图片可以帮助你理解问题

普通切换按钮样式

IsChecked=真实风格

我的设计目标是在 IsChecked=True 时使用不同的图标

【问题讨论】：

标签： wpf xaml

【解决方案1】：

将两个图像添加到控件模板，并将它们的Visibility 属性绑定到IsChecked 属性（使用IValueConverter 将真/假转换为适当的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 来完成同样的事情。

【讨论】：