WP7 背景模糊效果

Question

我需要知道如何最好地模糊Windows Phone 7应用程序的背景，以便将用户的注意力集中在“始终处于顶部”的弹出窗口上。我的想法是：

1. 将背景网格转换为可冻结对象，并在内存中截取其屏幕截图。 2. 添加一个图像，它重叠在背景网格上方，但在弹出窗口下方（使用z-index）。

但我仍然怀疑是否能够覆盖应用程序栏。如果您有解决方案，请告诉我。

- Maxim V. Pavlov

Answer 1

给你一些指导...

不幸的是，Silverlight模糊效果和其他位图效果没有被包含在Windows Phone 7中，所以您需要自己实现模糊。这其实非常简单，只需使用高斯卷积滤波器。

要实现此效果，您可以将应用程序的可视内容捕获到WriteableBitmap中，操纵图像创建模糊效果，然后使用弹出窗口将此图像叠加在应用程序上。我在一篇关于飞出文本动画的博客文章中也做了类似的事情，链接如下：

http://www.scottlogic.co.uk/blog/colin/2011/04/metro-in-motion-3-flying-titles/

通过以下方式找到您的根可视内容：

var rootElement = Application.Current.RootVisual as FrameworkElement;

将此UI的副本添加到弹出窗口中，步骤如下：

  _backgroundMask = new Rectangle()
  {
    Fill = new SolidColorBrush(Colors.Black),
    Opacity = 0.0,
    Width = rootElement.ActualWidth,
    Height = rootElement.ActualHeight
  };
  _popupCanvas.Children.Add(_backgroundMask);

  _targetElementClone = new Image()
  {
    Source = new WriteableBitmap(element, null)
  };
  _popupCanvas.Children.Add(_targetElementClone);

并展示它：

_popup.IsOpen = true;

我会让你自己想办法模糊背景！

另外，您将无法覆盖或捕获应用程序栏可视化效果。在执行此转换之前隐藏它。

最后，模糊背景并不是非常“Metro”（指Windows 8的设计语言）。您确定要这样做吗？

- ColinE

---

不，我不是。你会建议使用什么方式来让用户关注弹出窗口？考虑到我有一个基本的“黑色背景”应用程序，保持背景不变比模糊更难看。 - Maxim V. Pavlov

在我看来，一个简单的不透明度掩码就可以了。使用我上面提供的代码，但是只需用 Opacity="0.5" 填充弹出窗口中的黑色矩形即可。 - ColinE

Answer 2

不要使用模糊效果，而是在页面顶部使用半透明层。

在尝试创建这种效果之前，应该隐藏应用程序栏，因为您无法将任何内容放置在其上方。

- Matt Lacey

---

请问我该如何添加一个半透明的层？我需要在哪个控件上覆盖我的窗口？ - Maxim V. Pavlov

@Maxim 添加一个 Rectangle 并设置 Opacity 就可以了。 - Matt Lacey