wpf - Code design for a toggle button in WPF

Question

I have toggle button in WPF and when the user clicks it changes its icon. What is the best design for this? When the button is clicked the event handler is called. What then? Should I use dependency properties?

Thanks

Answer 1

您可以使用样式和触发器来完成它。我不知道这是否是最好的方法，但这是我喜欢的全 XAML 方法。这是我最近做同样事情的方式：

<Style x:Key="ZoomToggleButton" TargetType="{x:Type ToggleButton}">
    <Setter Property="Content">
        <Setter.Value>
            <Image Source="/[my assembly];component/Resources/Images/Zoom_Out.png" Width="15" Height="15" Stretch="None" />
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToggleButton}">
                <Border BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true" CornerRadius="4">
                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="true">
                        <Setter Property="Content">
                            <Setter.Value>
                                <Image Source="/[my assembly];component/Resources/Images/Zoom_In.png" Width="15" Height="15" Stretch="None" />
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

您也可以在没有自定义 ControlTemplate 的情况下通过使用 Style.Triggers 更改 Content 属性的值来执行此操作。

Answer 2

它可以通过样式触发器来完成：

<Setter Property="Content">
    <Setter.Value>
        <Image Source="UncheckedImage.png" />
    </Setter.Value>
</Setter>
<Style.Triggers>
    <Trigger Property="IsChecked" Value="True">
        <Setter Property="Content">
            <Setter.Value>
                <Image Source="CheckedImage.png" />
            </Setter.Value>
        </Setter>
    </Trigger>
</Style.Triggers>

请注意，如果您曾经Content直接设置（即 XAML 中的 ToggleButton.Content 或 C#/VB 中的属性分配），这将覆盖样式设置器和触发器。

如果需要，您还可以创建具有依赖属性的自定义控件，以提供更直接的接口。例如：

public class ContentToggleButton : ToggleButton {
    public static readonly DependencyProperty UncheckedContentProperty =
        DependencyProperty.Register("UncheckedContent", typeof(object), typeof(ContentToggleButton));

    public object UncheckedContent {
        get { return GetValue(UncheckedContentProperty); }
        set { SetValue(UncheckedContentProperty, value); }
    }

    public static readonly DependencyProperty CheckedContentProperty =
        DependencyProperty.Register("CheckedContent", typeof(object), typeof(ContentToggleButton));

    public object CheckedContent {
        get { return GetValue(CheckedContentProperty); }
        set { SetValue(CheckedContentProperty, value); }
    }
}

风格ContentToggleButton：

<Setter Property="Content" Value="{Binding RelativeSource={RelativeSource Mode=Self}, Path=UncheckedContent}" />
<Style.Triggers>
    <Trigger Property="IsChecked" Value="True">
        <Setter Property="Content" Value="{Binding RelativeSource={RelativeSource Mode=Self}, Path=CheckedContent}" />
    </Trigger>
</Style.Triggers>

用法：

<local:ContentToggleButton>
    <local:ContentToggleButton.UncheckedContent>
        <Image Source="UncheckedImage.png" />
    </local:ContentToggleButton.UncheckedContent>
    <local:ContentToggleButton.CheckedContent>
        <Image Source="CheckedImage.png" />
    </local:ContentToggleButton.CheckedContent>
</local:ContentToggleButton>

这也将允许您通过这些属性重新分配图像，而无需覆盖触发器。

Answer 3

您应该使用样式事件触发器。

制作这样的样式：

<Style TargetType="{x:Type ToggleButton}">
   ...
</Style>