Create semi-circle blur effect on a Grid - silverlight

Question

I want to develop a WindowsPhone 8 app with a home page like the fourth phone on this page. The one with a mountain.
You can see an image with two layers over it. My problem is that I don't know how to call that effect in English, and also, I don't know how to do it.
Maybe I will need to make three copies of my image: one untouched, a second one with, a blur effect? and a third one with a 'bigger' blur effect.
Or maybe, I have to add two Grids with some white background and with an opacity less than 100%.
How would you do it?

Answer 1

Your solution is just a good one, I would the samething, and I don't expect that application to be implementing something different, in détails I would do :
One Grid with High Blur on the background.
Another Grid with middle Blur on the front. I'll use an OpacityMask set to a RadialGradientBrush to create that ring effect just like in here : http://msdn.microsoft.com/en-us/library/bb979637(v=vs.95).aspx
And one lase Grid with no Blur in the Front of The previous Grid again with a OpacityMask also set to a RadialGradientBrush.
The three Grids will all have the same Background TileBrush, example :
The Result I've made :
Code :
<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>
I know I didn't do it with perfection, and I used terrible naming for the Elements, It's just I've just woke up, and didn't even take my breakfast, hope that helps.