为透明按钮显示不同的背景答案

【问题标题】：Show different background for transparent buttons为透明按钮显示不同的背景
【发布时间】：2015-03-12 03:54:00
【问题描述】：

我们的设计要求是透明按钮（带有白色文本）覆盖在风景优美的背景图像上。但这是困难的部分，也是我的两难选择......

虽然背景图片在图片边框之外应该清晰可见，但按钮内部的区域（覆盖区域）应该是背景图片的模糊区域。这个想法是为了让用户更容易看到按钮内的白色文本。

我是 XAML 的新手，更不熟悉如何执行如此复杂的样式。我有一个覆盖布局的起点，但是这段代码并没有试图解决这个问题。它只是图像上的一个按钮。

关于如何模糊图像下方区域的任何想法或帮助？

<Grid Margin="0,0,0,12" Visibility="{Binding SignedIn, Converter={StaticResource BooleanToVisibilityConverter}, ConverterParameter=False}">
  <Image Source="backgroundImage.png" Height="136" Stretch="Fill" HorizontalAlignment="Stretch" />
  <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
    <Button x:Uid="SignInBtn" Content="SIGN IN" Style="{StaticResource TransparentButtonStyle}"      HorizontalAlignment="Center" Command="{Binding SignInCommand}" IsEnabled="{Binding          LoadingResults, Converter={StaticResource NotBoolConverter}}" />
  </StackPanel>
</Grid>

【问题讨论】：

标签： wpf xaml windows-phone-8.1

【解决方案1】：

在 Windows Phone 8.1 应用程序中没有直接的方法可以做到这一点。 Windows Phone Silverlight 或 Windows.UI.Xaml 都不支持图像效果。

典型且简单的解决方案是通过将 Button 的背景设置为部分透明的画笔来使图像变暗（而不是模糊）。

<Button Background="#7F000000" </Button>

如果您想多做一些工作，您可以裁剪按钮后面的位图区域，在其上运行模糊变换（查看Lumia Imaging SDK），然后设置新的模糊图像到按钮。

【讨论】：

我强烈认为我可能会选择上述选项之一。如果我这样做，我肯定会将其标记为已接受的答案。谢谢，罗伯。

【解决方案2】：

考虑使用Effects。

另外，看看你是否可以利用这个example：

<Style TargetType="Window">
    <Setter Property="Background">
        <Setter.Value>
            <VisualBrush>
                <VisualBrush.Visual>
                    <Image Source="Images\myImage.png">
                        <Image.Effect>
                            <BlurEffect Radius="20"/>
                        </Image.Effect>
                    </Image>
                </VisualBrush.Visual>
            </VisualBrush>
        </Setter.Value>
    </Setter>
...

【讨论】：

我一定要试试这个。感谢您及时的回复。如果最终成功，我会将其标记为已接受的答案。