Добавить blur в UWP ImageBrush

Question

Я пытаюсь добавить размытие к фоновому изображению в своем приложении UWP. я могу добавить синий в изображение без какого-либо вопроса, используя этот код (я на самом деле применять это динамически загружаемые изображения из Интернета во время выполнения)

<Image Source="Assets/Photos/BisonBadlandsChillin.png" 
     Width="100" 
     Height="100"> 
     <interactivity:Interaction.Behaviors> 
      <behaviors:Blur x:Name="blurry" 
          Value="10" 
          Duration="100" 
          Delay="0" 
          AutomaticallyStart="True" /> 
     </interactivity:Interaction.Behaviors> 

Однако я хочу, чтобы добавить размытие изображения в фоновом режиме, особенно на фоне RelativePanel. Фон из RelativePanel однако будет принимать только ImageBrush в его содержании и всякий раз, когда я пытаюсь добавить такое же поведение от сообщества Toolkit к ImageBrush я получаю сообщение об ошибке:

Cannot add instance of type 'Microsoft.Toolkit.Uwp.UI.Animations.Behaviors.Blur' to a collection of type 'Microsoft.Xaml.Interactivity.BehaviorCollection'

Есть ли способ обойти эту проблему еще с помощью Инструментарий?

Answer 1

The Blur animation behavior выборочно размывает Элемент XAML путем увеличения или уменьшения размера пикселя. Но ImageBrush не XAML element. Поэтому я думаю, что вы не можете добавить смазку к щетке.

Если вы хотите добавить смазку к uwp Imagebrush, вы можете использовать Win2D. GaussianBlurEffect может быть использован для создания очень прохладное эффект размытия, который может дать нам, что матовое стекло смотреть в приложении

private async void AddBrushToPanel(ImageBrush brush, Panel panel) 
{ 
var file = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///Assets/image.jpg")); 
using (var stream = await file.OpenAsync(FileAccessMode.Read)) 
    { 
     var device = new CanvasDevice(); 
     var bitmap = await CanvasBitmap.LoadAsync(device, stream); 

     var renderer = new CanvasRenderTarget(device, 
               bitmap.SizeInPixels.Width, 
               bitmap.SizeInPixels.Height, bitmap.Dpi); 
     using (var ds = renderer.CreateDrawingSession()) 
     { 
      var blur = new GaussianBlurEffect(); 
      blur.BlurAmount = 5.0f; 
      blur.Source = bitmap; 
      ds.DrawImage(blur); 
     } 
     stream.Seek(0); 
     await renderer.SaveAsync(stream, CanvasBitmapFileFormat.Jpeg); 
     BitmapImage image = new BitmapImage(); 
     image.SetSource(stream); 
     brush.ImageSource = image; 
     panel.Background = brush; 
    } 
}