Question

我想开发一个带有主页的WindowsPhone 8应用程序，例如page上的第四部手机。有一座山的人。

您可以在其上看到两层图像。我的问题是我不知道如何用英语称呼这种效果，而且，我不知道该怎么做。

也许我需要制作我的图像的三个副本：一个未触动，另一个带有模糊效果？第三个具有“更大”的模糊效果。

或许，我必须添加两个带有白色背景且不透明度低于100％的网格。

你会怎么做？

Answer 1

你的解决方案只是一个很好的解决方案，我会做同样的事情，我不希望应用程序实现不同的东西，我会做的事情：

背景为高模糊的一个网格。
正面有中间模糊的另一个网格。我将使用OpacityMask设置为RadialGradientBrush来创建响铃效果，就像在这里一样：http://msdn.microsoft.com/en-us/library/bb979637(v=vs.95).aspx
在前一个Grid的前面再次使用了一个没有模糊的Grid，并且OpacityMask也设置为RadialGradientBrush。

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

我做的结果：

enter image description here

代码：

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

我知道我并没有完美地做到这一点，而且我对元素使用了可怕的命名，只是我刚刚醒来，甚至没有吃早餐，希望有帮助。

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

1 个答案: