Question

I’m creating a Win 8 app in which I need to display loops of gifs to the user. The interesting thing is, I’m using this same datatemplate to display all sorts of image types, including png and jpg.

Is there a control that would do this? If not, what is the recommended way to go about achieving this functionality?

Thanks for any help!

Answer 1

One way to see the animation in a animated gif is to render the gif inside a WebView element.

Add the gif to the project and mark as Content. Then set the source of the WebView to the gif

<Grid >
  <WebView Source='ms-appx-web:///Assets/spiral.gif'>
 </WebView>

</Grid>

Note: The Webview renders the content via IE 10, and it is not as interactive as other elements. See this MSDN article for more details.

Edit:

Here is one way to bind to a collection.

class GifCollection : ObservableCollection<Uri> {
}



// in the view
protected override void OnNavigatedTo(NavigationEventArgs e)
{
    var gifs = new GifCollection();

    gifs.Add(new Uri("http://i.imgur.com/eoNiq.gif"));
    gifs.Add(new Uri("ms-appx-web:///Assets/spiral.gif"));

    this.DataContext = gifs;

}

And the datatemplate in XAML

<ListBox ItemsSource='{Binding}'>
      <ListBox.ItemTemplate>
        <DataTemplate>
          <StackPanel>

             <!-- set the width, height, otherwise the WebView 
                  is not visible in the datatemplate -->
            <WebView Source='{Binding }'
                     Width='450'
                     Height='450'>

            </WebView>
          </StackPanel>

        </DataTemplate>
      </ListBox.ItemTemplate>
    </ListBox>