WinRT - 在控件中显示动画 GIF答案

【问题标题】：WinRT - Display animated GIF in a controlWinRT - 在控件中显示动画 GIF
【发布时间】：2013-01-06 14:55:10
【问题描述】：

我需要在我的 Metro 应用程序中显示一个动画 GIF，但我找不到任何允许它的控件。（我在 Player Framework 中尝试了 Image、MediaElement 和 MediaPlayer）

是否有可能以某种方式显示动画 GIF？

【问题讨论】：

标签： c# xaml windows-8 microsoft-metro windows-runtime

【解决方案1】：

您可以通过使用 .NET Framework 中的 BitmapDecoder 类本机实现此目的。我的博客上有一个例子，它展示了如何实现一个 AnimationControl，它能够显示来自资源 gif 文件的动画 GIF。签出：http://www.henrikbrinch.dk/Blog/2013/02/21/Windows-8---GIF-animations--the-RIGHT-way

【讨论】：

【解决方案2】：

虽然我没有检查它是否有效，并且由于空域问题它可能不适合您 - 您可以尝试将您的 gif 托管在 WebView 控件中。这可能比 Norbert 和 Carl 提出的其他更好的解决方案要容易得多。

【讨论】：

这工作:) 首先我检测 gif 的尺寸，然后将 webviews 的高度和宽度设置为加上 20 以避免滚动条。然后只需将 webview 的源设置为 gif 即可：)
考虑切换到 WebViewBrush。这应该会给你更好的表现

【解决方案3】：

我刚刚发布了一个库来播放动画 GIF：XamlAnimatedGif。您只需在标准Image 控件上设置附加属性：

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

（xmlns映射为xmlns:gif="using:XamlAnimatedGif"）

适用于 WPF、Windows 8.1 和 Windows Phone 8.1

【讨论】：

【解决方案4】：

这不能在本地完成，但您可以查看

http://imagetools.codeplex.com/

你想要的。你也可以检查这个

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

其中包含一个 GIF 解码器库

【讨论】：

【解决方案5】：

这里有一个很好的教程，如何将 gif 插入 Metro Style 应用程序：

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

但最简单的方法是使用这个项目：

http://imagetools.codeplex.com/

【讨论】：

【解决方案6】：

正如@Filip Skakun 所说，WebView 方法有效。当然它是“黑客”，但所有这些库和动态解码都很慢，动画闪烁（至少在 Windows Phone 中）。使用 WebView 使您能够托管具有透明背景的动画 gif。使用 WebView 的 gif 渲染方式在你的项目中创建 html 页面：

<!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 很重要 - 因为它禁用了 WebView 的缩放/滚动/触摸移动（这在大多数情况下是不可取的）。将动画 gif 添加到同一文件夹（html 所在的位置）。 Xaml 代码：

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

唯一的缺点是你在WebView 占据的区域“失去了手势”（你不能使用WebViewBrush，因为你会失去动画）。

【讨论】：