Togglebutton with hover / pressed state

Question

What I am trying to do is a on/off togglebutton, and because I am using images as resources my main idea is to put one image as a normal ON state, another for mouseover ON and a third for a pressed ON state. The same goes for the OFF state, and all of it in one button. I did exactly the same with normal buttons, but here I am met with something I don't know: Doing an IF condition in xaml with all the triggers, which I have no idea where to even start. I read something about multitriggers but that seems complicated - any easier way to do this? This is what I did so far.

 <ToggleButton IsChecked="False" Height="70" Width="70" >
        <ToggleButton.Background>
            <ImageBrush ImageSource="Resources\off_button_1.png" Stretch="None" />
        </ToggleButton.Background>
        <ToggleButton.Style>
            <Style TargetType="{x:Type ToggleButton}" >
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ToggleButton}" >
                            <StackPanel Orientation="Horizontal">
                                <Image x:Name="image" Source="Resources\off_button_1.png" Margin="0" Stretch="None" />

                            </StackPanel>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsMouseOver" Value="true">
                                    <Setter TargetName="image" Property="Source" Value="Resources/off_button_1_hover.png" />

                                </Trigger>
                                <Trigger Property="IsPressed" Value="true">
                                    <Setter TargetName="image" Property="Source" Value="Resources/off_button_1_pressed.png" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ToggleButton.Style>
    </ToggleButton>

I'd really use some help here, thank you in advance.

Answer 1

You can create a custom button.

public class ImageButton : Button
{
    static ImageButton()
    { 
        DefaultStyleKeyProperty.OverrideMetadata(typeof(ImageButton), new FrameworkPropertyMetadata(typeof(ImageButton)));
    }


    public ImageSource NormalImage
    {
        get { return (ImageSource)GetValue(NormalImageProperty); }
        set { SetValue(NormalImageProperty, value); }
    }

    public ImageSource HoverImage
    {
        get { return (ImageSource)GetValue(HoverImageProperty); }
        set { SetValue(HoverImageProperty, value); }
    }

    public ImageSource PressedImage
    {
        get { return (ImageSource)GetValue(PressedImageProperty); }
        set { SetValue(PressedImageProperty, value); }
    }

 public static readonly DependencyProperty NormalImageProperty =
      DependencyProperty.Register(
          "NormalImage", typeof(ImageSource), typeof(ImageButton));

    public static readonly DependencyProperty HoverImageProperty =
        DependencyProperty.Register(
            "HoverImage", typeof(ImageSource), typeof(ImageButton));        

    public static readonly DependencyProperty PressedImageProperty =
        DependencyProperty.Register(
            "PressedImage", typeof(ImageSource), typeof(ImageButton));

}

and here is the XAML ControlTemplate

<Style TargetType="{x:Type local:ImageButton}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:ImageButton}">
                <Border Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                    <Image x:Name="PART_Image" Source="{Binding NormalImage, RelativeSource={RelativeSource TemplatedParent}}"/>
                </Border>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Source" Value="{Binding HoverImage, RelativeSource={RelativeSource TemplatedParent}}" TargetName="PART_Image"/>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter Property="Source" Value="{Binding PressedImage, RelativeSource={RelativeSource TemplatedParent}}" TargetName="PART_Image"/>
                    </Trigger>                                          
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>