mkautzm
mkautzm

Reputation: 1146

Can I have a custom parameter linked to a style in my control?

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

Answers (2)

cuongtd
cuongtd

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

Joseph Mawer
Joseph Mawer

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

Related Questions