If I need to have 60 Image controls in my appplication, am I going to necesarily 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?

Thanks?

Answer 1

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

Answer 2

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

Answer 3

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>