Feature - Blurry Dialog Background (#3738)

* Cleanup of launchSettings and Cards Page in Demo

* Revert "Cleanup of launchSettings and Cards Page in Demo"

This reverts commit ede38d4.

* -added DPs to DialogHost ("ApplyBlurBackground" and "BlurRadius")
-added DialogBackgroundBlurConverter
-Blurry Background working for both the "normal" DialogHost Style and the "MaterialDesignEmbeddedDialogHost"

* Added static "Instance" member to "DialogBackgroundBlurConverter"

* code cleanup in DialogHost.cs and DialogHost-Style

* cleanup demo app

* converter nullability

* Update src/MaterialDesignThemes.Wpf/Converters/DialogBackgroundBlurConverter.cs

converter nullability

Co-authored-by: Kevin B <[email protected]>

---------

Co-authored-by: Corvin Szimion <[email protected]>
Co-authored-by: Kevin B <[email protected]>

Author: 3 people

src/MaterialDesignThemes.Wpf/Converters/DialogBackgroundBlurConverter.cs

@@ -0,0 +1,26 @@
+using System;
+using System.Collections.Generic;
+using System.Globalization;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using System.Windows.Data;
+using System.Windows.Media.Effects;
+
+namespace MaterialDesignThemes.Wpf.Converters;
+internal sealed class DialogBackgroundBlurConverter : IMultiValueConverter
+{
+    public static readonly DialogBackgroundBlurConverter Instance = new();
+    public object? Convert(object?[]? values, Type targetType, object? parameter, CultureInfo culture)
+    {
+        if (values is [bool isOpen, bool applyBlurBackground, double blurRadius]
+            && isOpen
+            && applyBlurBackground)
+        {
+            return new BlurEffect() { Radius = blurRadius };
+        }
+
+        return null;
+    }
+    public object?[]? ConvertBack(object? value, Type[] targetTypes, object? parameter, CultureInfo culture) => throw new NotImplementedException();
+}

src/MaterialDesignThemes.Wpf/DialogHost.cs

@@ -598,6 +598,24 @@ public Brush? DialogBackground
         set => SetValue(DialogBackgroundProperty, value);
     }
 
+    public bool ApplyBlurBackground
+    {
+        get => (bool)GetValue(ApplyBlurBackgroundProperty);
+        set => SetValue(ApplyBlurBackgroundProperty, value);
+    }
+    public static readonly DependencyProperty ApplyBlurBackgroundProperty = DependencyProperty.Register(
+        nameof(ApplyBlurBackground), typeof(bool), typeof(DialogHost), new PropertyMetadata(default(bool)));
+
+
+    private const double DefaultBlurRadius = 16.0;
+    public double BlurRadius
+    {
+        get => (double)GetValue(BlurRadiusProperty);
+        set => SetValue(BlurRadiusProperty, value);
+    }
+    public static readonly DependencyProperty BlurRadiusProperty = DependencyProperty.Register(
+        nameof(BlurRadius), typeof(double), typeof(DialogHost), new PropertyMetadata(DefaultBlurRadius));
+
     public override void OnApplyTemplate()
     {
         if (_contentCoverGrid != null)
@@ -624,14 +642,14 @@ public static void SetRestoreFocusElement(DependencyObject element, IInputElemen
         => element.SetValue(RestoreFocusElementProperty, value);
 
     public static IInputElement GetRestoreFocusElement(DependencyObject element)
-        => (IInputElement) element.GetValue(RestoreFocusElementProperty);
+        => (IInputElement)element.GetValue(RestoreFocusElementProperty);
 
     public static readonly DependencyProperty IsRestoreFocusDisabledProperty = DependencyProperty.Register(
         nameof(IsRestoreFocusDisabled), typeof(bool), typeof(DialogHost), new PropertyMetadata(false));
 
     public bool IsRestoreFocusDisabled
     {
-        get => (bool) GetValue(IsRestoreFocusDisabledProperty);
+        get => (bool)GetValue(IsRestoreFocusDisabledProperty);
         set => SetValue(IsRestoreFocusDisabledProperty, value);
     }
 
@@ -958,7 +976,7 @@ private void OnLoaded(object sender, RoutedEventArgs routedEventArgs)
 
     private void OnPreviewGotKeyboardFocus(object sender, KeyboardFocusChangedEventArgs e)
     {
-        
+
     }
 
     [SecurityCritical]

src/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.DialogHost.xaml

@@ -198,7 +198,15 @@
                                 Content="{TemplateBinding ContentControl.Content}"
                                 ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}"
                                 ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}"
-                                Opacity="1" />
+                                Opacity="1">
+                <ContentPresenter.Effect>
+                  <MultiBinding Converter="{x:Static converters:DialogBackgroundBlurConverter.Instance}">
+                    <Binding Path="IsOpen" RelativeSource="{RelativeSource TemplatedParent}" />
+                    <Binding Path="ApplyBlurBackground" RelativeSource="{RelativeSource TemplatedParent}" />
+                    <Binding Path="BlurRadius" RelativeSource="{RelativeSource TemplatedParent}" />
+                  </MultiBinding>
+                </ContentPresenter.Effect>
+              </ContentPresenter>
             </AdornerDecorator>
             <Grid x:Name="PART_ContentCoverGrid"
                   Background="Transparent"
@@ -380,7 +388,15 @@
                               Content="{TemplateBinding ContentControl.Content}"
                               ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}"
                               ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}"
-                              Opacity="1" />
+                              Opacity="1">
+              <ContentPresenter.Effect>
+                <MultiBinding Converter="{x:Static converters:DialogBackgroundBlurConverter.Instance}">
+                  <Binding Path="IsOpen" RelativeSource="{RelativeSource TemplatedParent}" />
+                  <Binding Path="ApplyBlurBackground" RelativeSource="{RelativeSource TemplatedParent}" />
+                  <Binding Path="BlurRadius" RelativeSource="{RelativeSource TemplatedParent}" />
+                </MultiBinding>
+              </ContentPresenter.Effect>
+            </ContentPresenter>
 
             <Grid x:Name="PART_ContentCoverGrid"
                   Background="Transparent"