在 WPF 中重用切换按钮样式答案

【问题标题】：Reuse ToggleButton-Style in WPF在 WPF 中重用切换按钮样式
【发布时间】：2014-04-29 16:24:57
【问题描述】：

我有以下切换按钮样式：

<Style x:Key="GraphToggleButtonStyle" TargetType="ToggleButton">
    <Style.Triggers>
        <Trigger Property="IsChecked" Value="True">
            <Setter Property="Content">
                <Setter.Value>
                    <Image Source="{StaticResource Graph}" />
                </Setter.Value>
            </Setter>
        </Trigger>
        <Trigger Property="IsChecked" Value="False">
            <Setter Property="Content">
                <Setter.Value>
                    <Image Source="{StaticResource Graph_Off}" />
                </Setter.Value>
            </Setter>
        </Trigger>
    </Style.Triggers>
</Style>

我正在尝试将它用于我的 ToggleButtons（它是一个列表） - 所以我列表中的每个项目都有一个 ToggleButton。问题是，当我单击我的 ToggleButton 时，未单击的按钮图标消失了。只有我点击的按钮会显示所需的图像...我的这种风格有什么问题吗？

我的 ToggleButton-实现：

 <ToggleButton Style="{StaticResource GraphToggleButtonStyle}"
               ToolTip="{x:Static res:Resources.UseGraphToggle}"
               Visibility="{Binding Selected,
               Converter={StaticResource BoolToVisibilityConverter}}" />

【问题讨论】：

这可能是因为您控制了按钮上的 Visibility 属性。你为什么这样做？
这是相同的可见性属性。在某些情况下，我需要隐藏按钮 - 但这在大多数情况下都可以正常工作。
您确定 Graph_Off 图像的参考正确吗？尝试交换样式中的键，以便未选中的图像将显示为选中的图像...只是为了测试
点击事件被触发:(我交换了没有结果的图像
没有结果？怎么了？

标签： c# wpf xaml togglebutton

【解决方案1】：

您的风格中的Image 是一种视觉效果。一个视觉对象只能在视觉对象树中使用一次。与其重用样式，不如让 WPF 在每次引用它时创建一个新样式：

<Style x:Key="GraphToggleButtonStyle" TargetType="ToggleButton" x:Shared="False">
....

【讨论】：

【解决方案2】：

每当按钮IsChecked 属性发生变化时，您都不需要将子项（图像）添加到可视树中。

问题是样式默认共享，除非您设置了x:Shared="False"，其次任何视觉对象只能添加到一个视觉对象树中。如果您在另一个 Visual 树中添加 Visual，它将从以前的 Visual 树中删除。在您的情况下，视觉是图像控件。

在您的情况下，设置 x:Shared="False" 会起作用，但这会破坏资源的可重用性。所以，我建议不要每次都创建 Image 控件的新实例，只创建一次图像控件并在触发器中更改图像源。

<Style x:Key="GraphToggleButtonStyle" TargetType="ToggleButton">
    <Setter Property="ContentTemplate">
        <Setter.Value>
            <DataTemplate>
                <Image x:Name="image"/>
                <DataTemplate.Triggers>
                    <DataTrigger Binding="{Binding IsChecked,
                               RelativeSource={RelativeSource Mode=FindAncestor, 
                                AncestorType=ToggleButton}}" Value="True">
                        <Setter TargetName="image" Property="Source"
                                Value="{StaticResource Graph}"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding IsChecked,
                               RelativeSource={RelativeSource Mode=FindAncestor, 
                                AncestorType=ToggleButton}}" Value="False">
                        <Setter TargetName="image" Property="Source"
                                Value="{StaticResource Graph_Off}"/>
                    </DataTrigger>
                </DataTemplate.Triggers>
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

【讨论】：