每个状态带有图像的自定义按钮答案

【问题标题】：Custom Button with images per state每个状态带有图像的自定义按钮
【发布时间】：2012-06-08 16:13:34
【问题描述】：

我正在尝试创建一个像按钮一样的自定义用户控件，但我希望它为每个状态（正常、悬停、按下）使用不同的图像。用户控件包含一个用于显示图像的图像控件。我想在运行时更改 Image 控件的 Source，因此当 OnMouseEnter 事件触发时，我会将图像源更改为 HoverChange (ImageSource) 属性。

所以我尝试将 3 个 ImageSource 属性（NormalState、HoverState 和 PressedState）添加到用户控件，以便在需要时更改图像。（来自 WinForms）但问题是属性没有在代码中设置（WinForms 行为），所以我不能将它们分配给我的图像。但是当我在我的程序中使用用户控件时，我可以通过属性面板设置它们，但我不能在代码中使用它们（它们保持 NULL）。

这是我想要达到的一些（伪）代码：

public partial class ThreeStateButton : UserControl
{

    public enum ButtonState
    {
        Normal,
        Hover,
        Pressed
    }

    public ImageSource NormalState { get; set; }
    public ImageSource HoverState { get; set; }
    public ImageSource PressState { get; set; }

    public ThreeStateButton()
    {
        InitializeComponent();
        SetState(ButtonState.Normal);
     }

    public void SetState(ButtonState state)
    {
        switch (state)
        {
            case ButtonState.Normal:
                imgButton.Source = NormalState;
                break;
            case ButtonState.Hover:
                imgButton.Source = HoverState;
                break;
            case ButtonState.Pressed:
                imgButton.Source = PressState;
                break;
        }
    }

    protected override void OnMouseEnter(MouseEventArgs e)
    {
        base.OnMouseEnter(e);

        SetState(ButtonState.Hover);
    }

    protected override void OnMouseLeave(MouseEventArgs e)
    {
        base.OnMouseLeave(e);

        SetState(ButtonState.Normal);
    }

    protected override void OnMouseLeftButtonDown(MouseButtonEventArgs e)
    {
        base.OnMouseLeftButtonDown(e);

        SetState(ButtonState.Pressed);
    }

    protected override void OnMouseLeftButtonUp(MouseButtonEventArgs e)
    {
        base.OnMouseLeftButtonDown(e);

        SetState(ButtonState.Hover);
    }
}

主要问题是初始化后没有设置 ImageSource 属性（是的，通过编辑器中的属性面板设置），我知道 WPF 中的工作方式有点不同，但我怎么能得到这个以我尝试的方式工作？

谢谢

【问题讨论】：

您应该在 XAML 中创建一个带有视觉状态的样式。这个问题可能会有所帮助。 stackoverflow.com/q/7839235/73804

标签： wpf binding user-controls imagesource

【解决方案1】：

我以更 WPF 风格的方式完成了它。我创建了 3 个图像源属性，并为每个属性创建了一个 DependencyProperty。我还在我的 xaml 代码中添加了 3 个图像控件，并使用它们的注册名称作为 DependencyProperty 将这些图像源属性绑定到我的图像控件的图像源属性。然后只需隐藏图像或将它们设置为在正确状态下可见。

【讨论】：