在网格上创建半圆形模糊效果

Question

我想在page 上开发一个主页类似于第四部手机的 WindowsPhone 8 应用程序。有山的那个。

您可以看到上面有两层的图像。我的问题是我不知道如何用英语称呼那个效果，而且我也不知道该怎么做。

也许我需要制作三张图片副本：一张原封不动，另一张有模糊效果？第三个具有“更大”的模糊效果。

或者，我必须添加两个带有一些白色背景且不透明度小于 100% 的网格。

你会怎么做？

Answer 1

您的解决方案是一个很好的解决方案，我会做同样的事情，而且我不希望该应用程序实现不同的东西，我会做的详细说明：

1. 背景上具有高度模糊的一个网格。
2. 前面有中间模糊的另一个网格。我将使用设置为 RadialGradientBrush 的 OpacityMask 来创建环形效果，就像这里一样：http://msdn.microsoft.com/en-us/library/bb979637(v=vs.95).aspx
3. 在前一个网格的前面没有模糊的激光网格再次使用 OpacityMask 也设置为 RadialGradientBrush。

三个 Grid 都将具有相同的背景 TileBrush，例如：

我的结果：

代码：

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock Text="The effect you asked, with :" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
            <TextBlock Text="That's Clapton" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel1" Grid.Row="1" Margin="12,0,12,0">
            <Grid.Background>
                <ImageBrush ImageSource="Eric_Clapton_Blur3.jpg" Stretch="UniformToFill"/>
            </Grid.Background>
        </Grid>
        <Grid x:Name="ContentPanel2" Grid.Row="1" Margin="12,0,12,0">
            <Grid.OpacityMask>
                <RadialGradientBrush Center="0.5,0.5">
                    <RadialGradientBrush.RelativeTransform>
                        <CompositeTransform CenterY="0.5" CenterX="0.5" TranslateX="0.4" ScaleX="1.4"/>
                    </RadialGradientBrush.RelativeTransform>
                    <!-- This gradient stop is partially transparent. -->
                    <GradientStop Color="#00000000" Offset="1" />
                    <!-- This gradient stop is partially transparent. -->
                    <GradientStop Color="#20000000" Offset="0.741" />
                    <!-- This gradient stop is fully opaque. -->
                    <GradientStop Color="#FF000000" Offset="0.728" />
                </RadialGradientBrush>
            </Grid.OpacityMask>
            <Grid.Background>
                <ImageBrush ImageSource="Eric_Clapton_Blur2.jpg" Stretch="UniformToFill"/>
            </Grid.Background>
        </Grid>
        <Grid x:Name="ContentPanel3" Grid.Row="1" Margin="12,0,12,0">
            <Grid.OpacityMask>
                <RadialGradientBrush Center="0.5,0.5">
                    <RadialGradientBrush.RelativeTransform>
                        <CompositeTransform CenterY="0.5" CenterX="0.5" TranslateX="0.4" ScaleY="0.6"/>
                    </RadialGradientBrush.RelativeTransform>
                    <!-- This gradient stop is partially transparent. -->
                    <GradientStop Color="#00000000" Offset="1" />
                    <!-- This gradient stop is partially transparent. -->
                    <GradientStop Color="#20000000" Offset="0.741" />
                    <!-- This gradient stop is fully opaque. -->
                    <GradientStop Color="#FF000000" Offset="0.728" />
                </RadialGradientBrush>
            </Grid.OpacityMask>
            <Grid.Background>
                <ImageBrush ImageSource="Eric_Clapton.jpg" Stretch="UniformToFill"/>
            </Grid.Background>
        </Grid>

我知道我做得不够完美，而且我对元素使用了糟糕的命名，只是我刚刚醒来，甚至没有吃早餐，希望对你有所帮助。