WPF Button Image Source

Kevin Marois

I created a button class:

public class ImageTextButton : Button
{
public ImageSource NormalImageSource
{
get { return (ImageSource)GetValue(NormalImageSourceProperty); }
set { SetValue(NormalImageSourceProperty, value); }
}
public static readonly DependencyProperty NormalImageSourceProperty =
DependencyProperty.Register("NormalImageSource", typeof(ImageSource), typeof(ImageTextButton), new UIPropertyMetadata(null));

public ImageSource MouseOverImageSource
{
    get { return (ImageSource)GetValue(MouseOverImageSourceProperty); }
    set { SetValue(MouseOverImageSourceProperty, value); }
}
public static readonly DependencyProperty MouseOverImageSourceProperty =
    DependencyProperty.Register("MouseOverImageSource", typeof(ImageSource), typeof(ImageTextButton), new UIPropertyMetadata(null));


public string Caption
{
    get { return (string)GetValue(CaptionProperty); }
    set { SetValue(CaptionProperty, value); }
}
public static readonly DependencyProperty CaptionProperty =
    DependencyProperty.Register("Caption", typeof(string), typeof(ImageTextButton), new UIPropertyMetadata(null));

}

and I use it like this:

In the button's ControlTemplate I'm doing:

but it doesn't work. The image doesn't change. It disappears. Anyone know the right way to do this? Thanks

If it's not broken, fix it until it is

Unnikrishnan_S_N

Hi Kevin, Just updating the source won't work. You have to update the Button Content. for ex: <BitmapImage UriSource="{Binding RelativeSource={RelativeSource Self}, Path=MouseOverImageSource}" />

<ControlTemplate.Triggers>
<Trigger Property="Button.IsMouseOver" Value="True">
<Setter TargetName="ButtonImage" Property="Content"/> <Setter.Value>
<StackPanel>
<BitmapImage UriSource="{Binding RelativeSource={RelativeSource Self}, Path=MouseOverImageSource}" />

<Setter.Value/>
</Trigger>
</ControlTemplate.Triggers>

I think this should work..

Kevin Marois

Thanks

virusattack wrote:

<Button>
< Button.Content>

< Image>
< Image.Source>
< BitmapImage UriSource="{Binding RelativeSource={RelativeSource Self}, Path=MouseOverImageSource}" />
< /Image.Source>
< /Image>

< /Button.Content>

Where does this code go in the style?

If it's not broken, fix it until it is

Unnikrishnan_S_N

Hi Kevin, check in Trigger whether Button's IsMouseOver is true and set the property Content with the following values.

<ControlTemplate.Triggers>
<Trigger Property="Button.IsMouseOver" Value="True">
<Setter TargetName="ButtonImage" Property="Content"/> <Setter.Value>
<StackPanel>
<Image>
<Image.Source>
<BitmapImage UriSource="{Binding RelativeSource={RelativeSource Self}, Path=MouseOverImageSource}" />
</Image.Source>
</Image>
</StackPanel>
<Setter.Value/>
</Trigger>
</ControlTemplate.Triggers>