WinRT - Display animated GIF in a control

2019-05-01 03:08发布

I need to display an animated GIF in my metro app, but I can't find any control that allows it. (I tried Image, MediaElement and MediaPlayer from the Player Framework)

Is it possible somehow to display an animated GIF?

6条回答
爱情/是我丢掉的垃圾
2楼-- · 2019-05-01 03:39

I just released a library to play animated GIFs: XamlAnimatedGif. You just need to set an attached property on a standard Image control:

<Image gif:AnimationBehavior.SourceUri="/Images/animated.gif" />

(the xmlns mapping is xmlns:gif="using:XamlAnimatedGif")

In works on WPF, Windows 8.1 and Windows Phone 8.1

查看更多
成全新的幸福
3楼-- · 2019-05-01 03:41

Here You have a good tutorial how to insert gif into Metro Style App:

http://advertboy.wordpress.com/2012/05/08/animated-gifs-in-xamlc/

But simplest way is use this project:

http://imagetools.codeplex.com/

查看更多
Explosion°爆炸
4楼-- · 2019-05-01 03:49

While I haven't checked if it works and it might not work for you due to airspace issues - you could try hosting your gif in a WebView control. It might be a lot easier than the otherwise better solutions proposed by Norbert and Carl.

查看更多
Luminary・发光体
5楼-- · 2019-05-01 03:53

As @Filip Skakun said WebView method works. Sure it's "hack" but all these libraries and decoding on fly is slow, animation flickers (at least in windows phone). Using WebView gives you ability to host animated gifs with transparent background. To use WebView gif rendering approach create html page in your project:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>gif rendering</title>
    <script type="text/javascript">
        function SetImageSource(image, source) {
            document.getElementById(image).src = source;
        };
    </script>

<style type="text/css">
    html, body
    {
        -ms-content-zooming:none;
        -ms-overflow-style: none;
        -ms-scroll-translation: none;
        -ms-touch-select: none;
        overflow: hidden;
        zoom: 100%;
    }
</style>
</head>
<body>
<img id="gifPlaceholder" src=""/>

<script>
    SetImageSource("gifPlaceholder", window.top.location.search.substring(1));
</script>
</body>
</html>

CSS is important - because it disables zoom / scrolling / touch-move of WebView (which isn't desirable in most cases). Add animated gifs to same folder (where html sits). Xaml code:

<WebView Name="gifRendererWebView" 
         Source="ms-appx-web:///pathToHtmlInProject.html?gifName.gif"
         DefaultBackgroundColor="Transparent"/>

The only drawback is that you "lose gestures" on area which WebView occupy (and you can't use WebViewBrush because you would lose animation).

查看更多
【Aperson】
6楼-- · 2019-05-01 04:00

This can't be natively done but you can check out

http://imagetools.codeplex.com/

which does all you want. Also you can check this

http://blogs.msdn.com/b/jstegman/archive/2009/09/08/silverlight-3-sample-updates.aspx

which contains a GIF Decoder library

查看更多
狗以群分
7楼-- · 2019-05-01 04:02

You can achieve this natively by using the BitmapDecoder class in the .NET Framework. I have an example on my blog, that shows how to implement an AnimationControl that is able to show animated GIFs from a ressource gif file. Check out: http://www.henrikbrinch.dk/Blog/2013/02/21/Windows-8---GIF-animations--the-RIGHT-way

查看更多
登录 后发表回答