Button using dependency properties for a separate image per state

Question

I have a Button control that I want to be able to reuse throughout project. Each time button enters a new state, a different image will be displayed. For now, I have Normal State and Pressed State.

Here's the XAML portion of the control:

<Button
    x:Class="customImageButton.ImageButton"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Button.Template>
      <ControlTemplate TargetType="{x:Type Button}">
         <Grid>
            <ContentControl Width="80">
                <Grid>
                    <Image Name="Normal" Source="{Binding NormalState}"/>
                    <Image Name="Pressed" Source="{Binding PressedState}" Visibility="Hidden"/>
                </Grid>
            </ContentControl>
         </Grid>
         <ControlTemplate.Triggers>
            <Trigger Property="IsPressed" Value="True">
               <Setter TargetName="Normal" Property="Visibility" Value="Hidden"/>
               <Setter TargetName="Pressed" Property="Visibility" Value="Visible"/>
            </Trigger>
         </ControlTemplate.Triggers>
      </ControlTemplate>
   </Button.Template>
</Button>

Here's the code-behind for the control:

namespace customImageButton
{
    public partial class ImageButton : Button
    {
        public ImageButton()
        {
            this.InitializeComponent();
        }

        public ImageSource NormalState
        {
            get { return base.GetValue(NormalStateProperty) as ImageSource; }
            set { base.SetValue(NormalStateProperty, value); }
        }

        public static readonly DependencyProperty NormalStateProperty =
            DependencyProperty.Register("NormalState", typeof(ImageSource), typeof(ImageButton));

        public ImageSource PressedState
        {
            get { return base.GetValue(PressedStateProperty) as ImageSource; }
            set { base.SetValue(PressedStateProperty, value); }
        }

        public static readonly DependencyProperty PressedStateProperty =
            DependencyProperty.Register("PressedState", typeof(ImageSource), typeof(ImageButton));
    }
}

...and here is its use:

<local:ImageButton Content="CustomButton" HorizontalAlignment="Left" 
                   VerticalAlignment="Top" NormalState="Resources/Normal.png"
                   PressedState="Resources/Pressed.png"/>

My problem is that the images I've provided are not displaying. The Build Action for both images is Resource and I have tried using absolute path; however, that provided the same result. What am I missing?

Answer 1

Two problems with the code as listed:

1. The bindings need to be TemplateBinding.
2. The TargetType should refer to the "ImageButton" type, not Button.

Like this:

<ControlTemplate 
     xmlns:local="clr-namespace:customImageButton"
     TargetType="{x:Type local:ImageButton}">
     <Grid>
        <ContentControl Width="80">
            <Grid>
                <Image Name="Normal" Source="{TemplateBinding NormalState}"/>
                <Image Name="Pressed" Source="{TemplateBinding PressedState}" Visibility="Hidden"/>
            </Grid>
        </ContentControl>
     </Grid>

Note: The above builds and runs, but Visual Studio complains:

'ImageButton' ControlTemplate TargetType does not match templated type 'Button'.

I suggest putting the control template in its own Style in the Themes/Generic.xaml resource dictionary, rather than inline.