Over a million developers have joined DZone.

Displaying GIFs In a UWP App

The newest update to UWP now supports animated GIFs. Learn more here!

· Mobile Zone

All this month, I'm taking some time each day to explore (and document) things that are related to UWP development that I haven't fully investigated or used before. While doing it over lunch each day I'm calling it #UWPLunch.

Image title

Displaying GIFs in XAML apps has been notoriously tricky in the past. A mix of licensing issues and a lack of native support meant that complicated workarounds were often needed. The most common solution involved the use of an embedded web browser control but it was a far from ideal solution.

With the anniversary update, that's changed. GIFs and even animated GIFs are now supported.

Simply drop this in a blank app.

<Image Source="https://api.giphy.com/img/giphy_search.gif" />

And get something that looks like this (minus the animation)

Going a bit further I wanted something that would show a few more animated GIFs at once so I created an app that's pointed at the giphy trending API.

It was just a case of grabbing the API response and serializing it as something suitable

    var json = await new HttpClient().GetStringAsync(new Uri("http://api.giphy.com/v1/gifs/trending?api_key=dc6zaTOxFJmzC", UriKind.Absolute));

    this.DataContext = JsonConvert.DeserializeObject<ApiResponse>(json);

and then displaying it on the view:

<GridView ItemsSource="{Binding data}" >
                    <Image Source="{Binding images.original.url}"
                           MaxWidth="200" />
                    <ItemsWrapGrid Orientation="Horizontal" />

And voila, a lovely app showing lots of animated gifs:

Apps requiring the display of gifs are no longer an issue. 

gifs ,uwp

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}