Question

I am creating a UserControl and one behaviour I want it to have is that when the user rotates the mouse wheel over it then the background image alternates between two options.

What I have so far is:

<UserControl x:Class="OI.MR.UserControls.DataControls.ScrollWheel"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="400" d:DesignWidth="118">
    <UserControl.Background>
        <ImageBrush ImageSource="dial1.png" TileMode="None" />
    </UserControl.Background>
    <UserControl.InputBindings>
        <MouseBinding MouseAction="WheelClick" Command="{Binding ScrollTheWheel}"/>
    </UserControl.InputBindings>
</UserControl>

and

public partial class ScrollWheel : UserControl
{
    private bool _isDial1 = true;

    public ScrollWheel()
    {
        InitializeComponent();
    }

    private ICommand _scrollTheWheel;
    public ICommand ScrollTheWheel
    {
        get
        {
            if(_scrollTheWheel == null)
            {
                _scrollTheWheel = new DelegateCommand(_ => SwitchImage(), _ => true);
            }
            return _scrollTheWheel;
        }
    }

    private void SwitchImage()
    {
        if(_isDial1)
        {
            (Background as ImageBrush).ImageSource = new BitmapImage(new Uri("dial2.png"));
            _isDial1 = false;
        }
        else
        {
            (Background as ImageBrush).ImageSource = new BitmapImage(new Uri("dial1.png"));
            _isDial1 = true;   
        }
    }
}

However turning the wheel is not changing the background image. How can I get the image to change?

Answer 1

your datacontext is really not correct:
One possibility:

<UserControl.InputBindings>
    <MouseBinding MouseAction="WheelClick" 
        Command="{Binding Path=ScrollTheWheel, RelativeSource={RelativeSource AncestorType={x:Type view:YourUserControl}}}"/>
</UserControl.InputBindings>

(replace the type with the type of your user control)