wpf 覆盖切换按钮样式

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/12416821/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-09-08 23:31:22  来源:igfitidea点击:

Override ToggleButton Style

wpfxaml

提问by Jayson Ragasa

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.

我的窗口中有一个 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>

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

现在此 ToggleButton 样式具有默认背景,并且当“IsChecked”为 true 时,它​​将具有不同的背景(如您在上面的 XAML 代码中所见)。

Now these toggle buttons has to have icon + text combined, like what I did here (sorry for my lame XAML code)

现在这些切换按钮必须组合图标 + 文本,就像我在这里所做的一样(抱歉我的 XAML 代码很烂)

<ToggleButton Style="{DynamicResource Standardbutton}" Margin="0,0,0,4">
    <StackPanel Orientation="Horizontal">
        <Image Source="Resources/scan_26x26.png" />
        <TextBlock Text="Scan"/>
    </StackPanel>
</ToggleButton>

The question is, how can I have a different icon when the ToggleButton is checked (IsChecked=True)?

问题是,检查触刀Button是否被检查时如何具有不同的图标(ischecked = true)?

Here are some images that might help you to understand the question

以下是一些可能有助于您理解问题的图片

Normal ToggleButton Style
enter image description here
IsChecked=True Style
enter image description here
My design goal is to have a different icon when IsChecked=True
enter image description here

普通 ToggleButton 样式
在此处输入图片说明
IsChecked=True 样式
在此处输入图片说明
我的设计目标是当 IsChecked=True 时有一个不同的图标
在此处输入图片说明

回答by McGarnagle

Add both images to the control template, and bind their Visibilityproperty to the IsCheckedproperty (use an IValueConverterto convert from true/false to the appropriate Visibilityenum value).

将两个图像添加到控件模板,并将它们的Visibility属性绑定到IsChecked属性(使用 anIValueConverter将 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>

I used two converters BoolToVisibleConverterand BoolToCollapsedConverter, but you could also use a ConverterParameterto accomplish the same thing.

我使用了两个转换器BoolToVisibleConverterBoolToCollapsedConverter,但您也可以使用 aConverterParameter来完成同样的事情。