Question

I found a great example here of how to do this in xaml, but i’m wondering if someone could help me with this example in code. I loop through images and create the Image Control in code and I’d like to set up something similar to what I found in this link below, so I can have the image resize on mouse over.

Given a WPF Image control, how can I make it bigger through animation on MouseEnter?

Answer 1

I suggest you use Data-Templating instead of "looping through images", that way you can completely reuse that XAML.

---

There is a nice sample that showcases Image-DataTemplating:

<Grid>
    <Grid.Resources>
       <XmlDataProvider x:Key="flickrdata" Source="http://api.flickr.com/services/feeds/photos_public.gne?tags=flower&amp;lang=en-us&amp;format=rss_200">
          <XmlDataProvider.XmlNamespaceManager>
             <XmlNamespaceMappingCollection>
                <XmlNamespaceMapping Prefix="media" Uri="http://search.yahoo.com/mrss/"/>
             </XmlNamespaceMappingCollection>
          </XmlDataProvider.XmlNamespaceManager>
       </XmlDataProvider>
       <DataTemplate x:Key="itemTemplate">
          <Image Width="75" Height="75" Source="{Binding Mode=OneWay, XPath=media:thumbnail/@url}"/>
       </DataTemplate>
       <ControlTemplate x:Key="controlTemplate" TargetType="{x:Type ItemsControl}">
          <WrapPanel IsItemsHost="True" Orientation="Horizontal"/>
       </ControlTemplate>
    </Grid.Resources>
    <ItemsControl
       Width="375"
       ItemsSource="{Binding Mode=Default, Source={StaticResource flickrdata}, XPath=/rss/channel/item}"
       ItemTemplate="{StaticResource itemTemplate}"
       Template="{StaticResource controlTemplate}">
    </ItemsControl>
</Grid>

This gets image urls from the WEB but you can just bind to an ObservableCollection<string> which holds the image paths.