CompositionBrush에 마스크를 적용하는 방법

Question

<Grid> 
    <Image x:Name="BackgroundImage" Source="/Assets/background.png" /> 
    <Rectangle x:Name="ClippingRect" Margin="50" Fill="#30f0" /> 
</Grid> 

알파 마스크 또는 클리핑 마스크를 적용하여 사각형 이외의 모든 부분이 흐리게 보이게하려면 어떻게해야합니까? GraphicsEffect-> EffectFactory->하여 브러쉬> SpriteVisual

var graphicsEffect = new BlendEffect 
{ 
    Mode = BlendEffectMode.Multiply, 
    Background = new ColorSourceEffect 
    { 
     Name = "Tint", 
     Color = Windows.UI.Color.FromArgb(50,0,255,0), 
    }, 

    Foreground = new GaussianBlurEffect() 
    { 
     Name = "Blur", 
     Source = new CompositionEffectSourceParameter("Backdrop"), 
     BlurAmount = (float)20, 
     BorderMode = EffectBorderMode.Hard, 
    } 
}; 

var blurEffectFactory = _compositor.CreateEffectFactory(graphicsEffect, 
    new[] { "Blur.BlurAmount", "Tint.Color" }); 

var _brush = blurEffectFactory.CreateBrush(); 
_brush.SetSourceParameter("Backdrop", _compositor.CreateBackdropBrush()); 

var blurSprite = _compositor.CreateSpriteVisual(); 
blurSprite.Size = new Vector2((float)BackgroundImage.ActualWidth, (float)BackgroundImage.ActualHeight); 
blurSprite.Brush = _brush; 
ElementCompositionPreview.SetElementChildVisual(BackgroundImage, blurSprite); 

Answer 1

, xaml 요소에 흐리게 처리합니다.

<Grid> 
    <Image x:Name="BackgroundImage" Source="/Assets/background.png" /> 
    <Path> 
     <Path.Fill> 
      <local:BlurTintBrush BlurRadius="5" TintColor="Black" TintOpacity="0.7" /> 
     </Path.Fill> 
     <Path.Data> 
      <GeometryGroup> 
       <RectangleGeometry x:Name="ImageGeometry" Rect="0,0,1027,768"/
       <RectangleGeometry x:Name="CropGeometry" Rect="50,50,25,25" /> 
      </GeometryGroup> 
     </Path.Data> 
    </Path> 
</Grid> 

Answer 2

당신은 두 번 같은 이미지를 사용하는 다음과 같은 솔루션을 사용할 수 있습니다로 설정 :

나는 평소 않습니다. 흐린 배경과 잘린 전경을 위해 하나를 사용하고 있습니다.

아이디어는 전경 비주얼에 대해 Clip 속성을 사용하여 원하는 전체 영역을 흐리게 배경을 그립니다.

페이지/제어를위한

XAML :

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <Image x:Name="BackgroundImage" Source="/Assets/Purple Tentacle.png" /> 
    <Image x:Name="ClippedImage" Source="/Assets/Purple Tentacle.png" /> 
</Grid> 

뒤에 코드 : 나는 클래스 XamlCompositionBrushBase에서 파생하고 그것을 적용 만들 수 있습니다

protected override void OnNavigatedTo(NavigationEventArgs e) 
    { 
     _compositor = ElementCompositionPreview.GetElementVisual(this).Compositor; 
     _backgroundImageVisual = ElementCompositionPreview.GetElementVisual(BackgroundImage); 

     var graphicEffect = new BlendEffect 
     { 
      Mode = BlendEffectMode.Multiply, 
      Background = new ColorSourceEffect 
      { 
       Color= Color.FromArgb(50, 0, 255, 0) 
      }, 

      Foreground = new GaussianBlurEffect 
      { 
       Source = new CompositionEffectSourceParameter("Backdrop"), 
       BlurAmount = 20.0f, 
       BorderMode = EffectBorderMode.Hard 
      } 
     }; 


     var backdropBrush  = _compositor.CreateBackdropBrush(); 

     var blurEffectFactory = _compositor.CreateEffectFactory(graphicEffect); 
     _brush     = blurEffectFactory.CreateBrush(); 
     _brush.SetSourceParameter("Backdrop", backdropBrush); 

     _blurSprite   = _compositor.CreateSpriteVisual(); 
     _blurSprite.Brush = _brush; 

     ElementCompositionPreview.SetElementChildVisual(BackgroundImage, _blurSprite); 

     _foregroundImageVisual = ElementCompositionPreview.GetElementVisual(ClippedImage); 
     _foregroundImageVisual.Clip = _compositor.CreateInsetClip(100, 100, 100, 100); 

     SizeChanged += MainPage_SizeChanged; 
     MainPage_SizeChanged(this, null); 
    } 

    private void MainPage_SizeChanged(object sender, SizeChangedEventArgs e) 
    { 
     _blurSprite.Size = new Vector2((float) BackgroundImage.ActualWidth, (float) BackgroundImage.ActualHeight); 

     // change the clip values here to change the non-blurred region 
     _foregroundImageVisual.Clip = _compositor.CreateInsetClip(100, 100, 100, 100); 
    } 

크리에이터 업데이트에