Reputation: 1146
I have a series of images, and I want them all the have MouseOver replacements. I could implement a style for each of them with something like:
<Image Source="C:\Image1.png" Style="{StaticResource Image1Style}"/>
...
<Image>
<Image.Style>
<Style TargetType="{x:Type Image}" x:Key="Image1Style">
<Setter Property="Source" Value="C:\Image1.jpg"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Source" Value="C:\Image2.jpg"/>
</Trigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
But such an implementation would require a whole style block for every image. I'd rather want one unified style that I can then specify the IsMouseOver property in the tag of the actual control, like so:
<Image Source="C:\Image1.png" Style="{StaticResource Image1Style}" IsMouseOver="C:\Image1MouseOver.png" />
I thought I was on to something with Templating, but I've not been able to put the pieces together to make this work.
Upvotes: 0
Views: 72
Reputation: 3182
Write a style for all your image and binding image source to Tag property
<Style TargetType="{x:Type Image}" x:Key="Image1Style">
<Setter Property="Source" Value="{Binding Path=Tag,RelativeSource={RelativeSource Self}}"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Source" Value="{Binding Path=(local:AttachedProperty.AltSource),RelativeSource={RelativeSource Self}}"/>
</Trigger>
</Style.Triggers>
</Style>
<Image Tag="C:\Image1.jpg" local:AttachedProperty.AltSource="C:\Image2.jpg" Style="{StaticResource Image1Style}"/>
and write a attached property to binding alternative image source to it
public class AttachedProperty
{
public static readonly DependencyProperty AltSourceProperty =
DependencyProperty.RegisterAttached("AltSource",
typeof(string), typeof(AttachedProperty),
new PropertyMetadata());
public static string GetAltSource(DependencyObject obj)
{
return (string)obj.GetValue(AltSourceProperty);
}
public static void SetAltSource(DependencyObject obj, string value)
{
obj.SetValue(AltSourceProperty, value);
}
}
Upvotes: 3
Reputation: 298
Add a new resource dictionary to your project and name it something like ImageStyles.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:projectName">
<Style TargetType="{x:Type Image}" x:Key="Image1Style">
<Setter Property="Source" Value="C:\Image1.jpg"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Source" Value="C:\Image2.jpg"/>
</Trigger>
</Style.Triggers>
</Style>
Then you can reference it from your xaml as a static resource enter code here
<image style={static resource="Image1Style"} />
Upvotes: 1