그리드에서 반원형 흐림 효과 생성

Question

이 page의 네 번째 전화와 같은 홈 페이지로 Windows Phone 8 앱을 개발하고 싶습니다. 산이있는 사람.

두 개의 레이어가있는 이미지를 볼 수 있습니다. 내 문제는 영어로 그 효과를 부르는 법을 알지 못하고, 어떻게해야 할지도 모른다는 것이다.

어쩌면 나는 이미지의 사본을 3 개 만들 필요가있을 것입니다 : 하나는 손대지 않았고, 다른 하나는 흐리게 효과를 나타 냅니까? '더 큰'흐림 효과가있는 세 번째 효과가 있습니다.

어쩌면, 나는 약간의 흰색 배경과 불투명도가 100 % 미만인 두 개의 그리드를 추가해야 할 수도 있습니다.

어떻게 하시겠습니까?

Answer 1

귀하의 솔루션입니다 그냥 좋은 일, 나는 samething는, 나는 세부 사항에 내가 할 것, 해당 응용 프로그램이 다른 무언가를 구현하는 기대하지 않는 것 : 높은 흐림

1. 한 그리드에 배경.
2. 정면에 가운데 블러가있는 다른 격자. RadialGradientBrush에 설정된 OpacityMask를 사용하여 다음과 같은 링 효과를 만듭니다. http://msdn.microsoft.com/en-us/library/bb979637(v=vs.95).aspx
3. 이전 격자의 앞면에 블러가없는 한 개의 격자 그리드와 OpacityMask가 RadialGradientBrush로 다시 설정됩니다.

   내가 만들어 놓은 결과 :

   이

   

   코드 :

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

   내가 아는

세 그리드는 모두 동일한 배경 TileBrush, 예를해야합니다 나는 완벽 함으로 그 일을하지 않았고, 나는 요소들에 대한 끔찍한 명명법을 사용했다. 그것은 단지 깨어났다. 그리고 심지어 나의 아침 식사 (도움이되기를 바라는)를 가져 가지 않았다.