If I need to have 60 Image controls in my application, am I going to necessarily have 60 of these huge code blocks?

Question

Someone suggested this for me to use as an animation:

<Window x:Class="WpfApplication.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="600" Width="600">
<Window.Resources>
    <Storyboard x:Key="ScaleImageStoryboard">
        <DoubleAnimation Duration="0:0:0.2" From="1" To="1.2" AutoReverse="True"
                         Storyboard.TargetName="ScaleImage" Storyboard.TargetProperty="ScaleX"/>
        <DoubleAnimation Duration="0:0:0.2" From="1" To="1.2" AutoReverse="True" 
                         Storyboard.TargetName="ScaleImage" Storyboard.TargetProperty="ScaleY"/>
    </Storyboard>
</Window.Resources>
<Grid>
    <Image Name="Image" Source="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg" 
           Stretch="Fill" Width="300" Height="300"
           RenderTransformOrigin="0.5, 0.5">
        <Image.RenderTransform>
            <ScaleTransform x:Name="ScaleImage"/>
        </Image.RenderTransform>
        <Image.Triggers>
            <EventTrigger RoutedEvent="Image.MouseDown">
                <BeginStoryboard Storyboard="{StaticResource ScaleImageStoryboard}"/>
            </EventTrigger>
        </Image.Triggers>
    </Image>
</Grid>

Note that a single Image declaration in XAML is more than 6 lines! :D Is there a way for me to create much much cleaner XAML without breaking this functionality?

Answer 1

I think the easiest solution here is to create a style for the image, where you define the triggers and storyboard

<Window.Resources>

    <Style x:Key="imageStyle" TargetType="{x:Type Image}">

        <Setter Property="RenderTransform">
            <Setter.Value>
                <ScaleTransform />
            </Setter.Value>
        </Setter>

        <Setter Property="RenderTransformOrigin" Value="0.5, 0.5" />

        <Style.Triggers>
            <EventTrigger RoutedEvent="Image.MouseDown">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Duration="0:0:0.2" From="1" To="1.2" AutoReverse="True"
                                     Storyboard.TargetProperty="RenderTransform.ScaleX"/>
                        <DoubleAnimation Duration="0:0:0.2" From="1" To="1.2" AutoReverse="True" 
                                     Storyboard.TargetProperty="RenderTransform.ScaleY"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Style.Triggers>

    </Style>

</Window.Resources>

You can then use this style for all your images :

<Image Name="Image"
       Source="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg" 
       Stretch="Fill" Width="300" Height="300"
       Style="{StaticResource imageStyle}" />

Note : I didn't test it, it might require a few modifications...