Question

I’m trying to create a custom usercontrol that acts like a button, but i want it to use different images for each state (Normal, Hover, Pressed). The user control contains an Image control to show the image. I want to change the Source of the Image control at-runtime, so when the OnMouseEnter event triggers, i would change my image source to the HoverChange (ImageSource) property.

So i tried to add 3 ImageSource properties (NormalState, HoverState and PressedState) to the usercontrol so i can change the images when needed. (Coming from WinForms) But the problem is that the Properties aren’t set in code (WinForms behaviour), so i can’t assign them to my image. But when i use the usercontrol in my program i can set them via the property panel, but i can’t use them in code (they stay NULL).

Here is some (pseudo) code of what i’m trying to reach:

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);
    }
}

The main problem is that the ImageSource properties aren’t set after initialization (and yes there are set through the property panel in the editor), i know the way of working is a bit different in WPF but how could i get this working the way i try?

Thanks

Answer 1

I did it on a more WPF-style way.
I create 3 image source properties and for each of them i created a DependencyProperty. I also added 3 Image controls in my xaml code and binded those imagesource properties using their registered name as DependencyProperty to the imagesource property of my image controls. Then it’s just a matter of hiding the images or setting them visible on the correct state.