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的背景设置为部分透明的画笔来调暗（而不是模糊）图像。

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

如果你想在其中添加更多的工作，你可以裁剪按钮后面的位图区域，对其运行模糊变换（看一下Lumia Imaging SDK）然后设置新的，图像模糊到按钮。

显示透明按钮的不同背景

2 个答案: