Displaying GIFs In a UWP App
The newest update to UWP now supports animated GIFs. Learn more here!
Join the DZone community and get the full member experience.
Join For FreeAll 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.
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}" >
<GridView.ItemTemplate>
<DataTemplate>
<Image Source="{Binding images.original.url}"
MaxWidth="200" />
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
And voila, a lovely app showing lots of animated gifs:
Apps requiring the display of gifs are no longer an issue.
Opinions expressed by DZone contributors are their own.
Comments