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

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.TargetPropert开发者_运维百科y="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?

---

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...

---

I believe that Thomas' answer is quite good. If that's still to much code for you, you can make some collection of strings (or more sophisticated objects representing your 60 images), make it available for your Window through some property and display it using ItemsControl and appropriate data template (and panel [ItemsControl.ItemsPanel property] if you want to do some fancy positioning). There's really no need for 'old shool way' in WPF ;).

<Window>
  <ItemsControl ItemsSource={Binding ListOfPaths}>
    <ItemsControl.ItemTemplate>
       <DataTemplate>
         <Image Name="Image"
            Source="{Binding}" 
            Stretch="Fill" Width="300" Height="300"
            Style="{StaticResource imageStyle}" />
       </DataTemplate>
    </ItemsControl.ItemTemplate>
  </ItemsControl>
</Window>

---

For situations like this is probably better to creating objects in source code ("old school way"), but if You prefer XML you can try use XSLT to generate it (but I don't recommend it).