views:

28

answers:

0

I try to create 3 state button. This control will will change the image on each of those 3 state ( normal, pressed, mouseOver ). The images of each state will be define as a property from the c# code ==> that mean i will be able to re-use this code and change the properties of the image source.

The Xaml:

<CheckBox x:Class="StateButton.StateCheckBox"
         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="300" d:DesignWidth="300">
<CheckBox.Template>

    <ControlTemplate TargetType="{x:Type CheckBox}">

        <Grid>
            <Image Name="Normal"     Visibility="Visible" DataContext="{Binding ElementName=Normal}" />   
            <Image Name="Pressed"    Visibility="Hidden" DataContext="{Binding ElementName=Pressed}" />
            <Image Name="MouseOver"  Visibility="Hidden" DataContext="{Binding ElementName=MouseOver}" />
        </Grid>

        <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter TargetName="Normal" Property="Visibility" Value="Hidden"/>
                <Setter TargetName="Pressed" Property="Visibility" Value="Hidden"/>
                <Setter TargetName="MouseOver" Property="Visibility" Value="Visible"/>
            </Trigger>



            <Trigger Property="IsChecked"  Value="True">
                <Setter TargetName="Normal" Property="Visibility" Value="Hidden"/>
                <Setter TargetName="Pressed" Property="Visibility" Value="Visible"/>
                <Setter TargetName="MouseOver" Property="Visibility" Value="Hidden"/>
            </Trigger>

            <Trigger Property="IsChecked"  Value="False">
                <Setter TargetName="Normal" Property="Visibility" Value="Visible"/>
                <Setter TargetName="Pressed" Property="Visibility" Value="Hidden"/>
                <Setter TargetName="MouseOver" Property="Visibility" Value="Hidden"/>
            </Trigger>

        </ControlTemplate.Triggers>
    </ControlTemplate>

</CheckBox.Template>

The c# code -

public partial class StateCheckBox : CheckBox { #region Field

    private Image mouseOver;
    private Image pressed;
    private Image normal;

    #endregion

    #region Properties

    public Image MouseOverImg
    {
        get
        {
            return mouseOver;
        }

        set
        {
            mouseOver = value;
        }
    }

    public Image PressedImg
    {
        get
        {
            return pressed;
        }

        set
        {
            pressed = value;
        }
    }

    public Image NormalImg
    {
        get
        {
            return normal;
        }

        set
        {
            normal = value;
        }
    }

    #endregion

    #region Ctor

    public StateCheckBox()
    {
        InitializeComponent();
    }

    #endregion
}