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

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

考虑使用 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>
...

Answer 2

在 Windows Phone 8.1 应用程序中没有直接的方法来执行此操作。 Windows Phone Silverlight 或 Windows.UI.Xaml.

均不支持图像效果

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

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

如果你想做更多的工作，你可以裁剪按钮后面的位图区域，运行你的模糊变换（看看 Lumia Imaging SDK）然后将新的模糊图像设置为按钮。

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

Show different background for transparent buttons

wpf

xaml

windows-phone-8.1