Search code examples
c#xamluwpuwp-xamlwin2d

How to blur an image with win2D?

I want to blur this image:

<Image x:Name="pic"  Stretch="Fill" Margin="3,-43,0,-46"/>

when this method is called:

private void Button_Click(object sender, RoutedEventArgs e)
{
    pic.Source=CertainImage;
    //blur this image
}

Should I use GaussianBlurEffect? How to use it?

Solution

  • There is BackdropBlurBrush in Windows Community Toolkit. 

    <Grid>
  <Image  Height="400"  Source="ms-appx:///Assets/Photos/BigFourSummerHeat.jpg"/>
  <Border x:Name="bor" Visibility="Collapsed" BorderBrush="Black" BorderThickness="1" > 
    <Border.Background>
      <media:BackdropBlurBrush Amount="3.43" />
     </Border.Background>
  </Border>
</Grid>

    private void Button_Click(object sender, RoutedEventArgs e)
{
    bor.Visibility = Visibility.Visible; //or change the amount of blur effect
}