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

Question

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

虽然背景图像

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

我是 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>

Answer 1

在 Windows Phone

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

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

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

如果要在其中投入更多工作，可以裁剪按钮后面的位图区域，对其运行模糊转换（查看 Lumia Imaging SDK），然后将新的模糊图像设置为按钮。

Answer 2

考虑使用效果。

此外，查看是否可以利用此示例：

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