added blurry background feature to the DrawerHost (#3832)

Author: corvinsz

src/MainDemo.Wpf/Drawers.xaml

@@ -10,29 +10,55 @@
              d:DesignWidth="1080"
              mc:Ignorable="d">
   <DockPanel>
-    <TextBlock DockPanel.Dock="Top" Style="{StaticResource PageTitleTextBlock}" Text="Drawer" />
+    <TextBlock DockPanel.Dock="Top"
+               Style="{StaticResource PageTitleTextBlock}"
+               Text="Drawer" />
+
+    <StackPanel DockPanel.Dock="Left">
+
+      <StackPanel Orientation="Horizontal">
+        <TextBlock VerticalAlignment="Center" Text="Black Overlay Background" />
+        <ToggleButton x:Name="BackgroundToggle" Margin="8,0,16,0" />
+        <TextBlock VerticalAlignment="Center" Text="Primary Overlay Background" />
+      </StackPanel>
+
+      <StackPanel Margin="0,8,0,0" Orientation="Horizontal">
+        <TextBlock VerticalAlignment="Center" Text="Open Mode" />
+        <ComboBox SelectedValue="{Binding OpenMode, ElementName=DrawerHost}" SelectedValuePath="Content">
+          <ComboBoxItem Content="{x:Static materialDesign:DrawerHostOpenMode.Modal}" />
+          <ComboBoxItem Content="{x:Static materialDesign:DrawerHostOpenMode.Standard}" />
+        </ComboBox>
+      </StackPanel>
+
+      <StackPanel Margin="0,8,0,0">
+
+        <CheckBox x:Name="cbApplyBlurBackground" Content="ApplyBlurBackground" />
+
+        <DockPanel>
+          <Button Click="Drawer_ResetBlur"
+                  Content="{materialDesign:PackIcon Kind=Reload}"
+                  DockPanel.Dock="Right"
+                  Style="{StaticResource MaterialDesignFlatButton}"
+                  ToolTip="Reset the BlurRadius of the Drawers Background to it's default value" />
+          <Slider x:Name="BlurRadiusSlider"
+                  DockPanel.Dock="Left"
+                  Maximum="64"
+                  Minimum="1"
+                  Style="{StaticResource MaterialDesignDiscreteSlider}" />
+        </DockPanel>
+      </StackPanel>
 
-    <StackPanel DockPanel.Dock="Top" Orientation="Horizontal">
-      <TextBlock VerticalAlignment="Center" Text="Black Overlay Background" />
-
-      <ToggleButton x:Name="BackgroundToggle" Margin="8,0,16,0" />
-
-      <TextBlock VerticalAlignment="Center" Text="Primary Overlay Background" />
-
-      <TextBlock Margin="30,0,16,0"
-                 VerticalAlignment="Center"
-                 Text="Open Mode" />
-      <ComboBox SelectedValue="{Binding OpenMode, ElementName=DrawerHost}" SelectedValuePath="Content">
-        <ComboBoxItem Content="{x:Static materialDesign:DrawerHostOpenMode.Modal}" />
-        <ComboBoxItem Content="{x:Static materialDesign:DrawerHostOpenMode.Standard}" />
-      </ComboBox>
     </StackPanel>
 
-    <smtx:XamlDisplay MaxHeight="{x:Static system:Double.MaxValue}" UniqueKey="drawers_1">
+    <smtx:XamlDisplay MaxHeight="{x:Static system:Double.MaxValue}"
+                      DockPanel.Dock="Left"
+                      UniqueKey="drawers_1">
       <materialDesign:DrawerHost x:Name="DrawerHost"
                                  Width="480"
                                  Height="480"
                                  Margin="32"
+                                 ApplyBlurBackground="{Binding ElementName=cbApplyBlurBackground, Path=IsChecked}"
+                                 BlurRadius="{Binding ElementName=BlurRadiusSlider, Path=Value}"
                                  HorizontalAlignment="Center"
                                  VerticalAlignment="Center"
                                  BorderBrush="{DynamicResource MaterialDesignDivider}"

src/MainDemo.Wpf/Drawers.xaml.cs

@@ -1,6 +1,17 @@
-namespace MaterialDesignDemo;
+using MaterialDesignThemes.Wpf;
+
+namespace MaterialDesignDemo;
 
 public partial class Drawers
 {
-    public Drawers() => InitializeComponent();
+    public Drawers()
+    {
+        InitializeComponent();
+        Drawer_ResetBlur(null!, null!);
+    }
+
+    private void Drawer_ResetBlur(object sender, RoutedEventArgs e)
+    {
+        BlurRadiusSlider.Value = DrawerHost.DefaultBlurRadius;
+    }
 }

src/MaterialDesignThemes.Wpf/DrawerHost.cs

@@ -1,4 +1,5 @@
 using System.Windows.Media;
+using System.Windows.Media.Effects;
 
 namespace MaterialDesignThemes.Wpf;
 
@@ -445,6 +446,31 @@ public CornerRadius? BottomDrawerCornerRadius
 
     #endregion
 
+    #region Blur effect
+    public bool ApplyBlurBackground
+    {
+        get => (bool)GetValue(ApplyBlurBackgroundProperty);
+        set => SetValue(ApplyBlurBackgroundProperty, value);
+    }
+    public static readonly DependencyProperty ApplyBlurBackgroundProperty = DependencyProperty.Register(
+        nameof(ApplyBlurBackground), typeof(bool), typeof(DrawerHost), new PropertyMetadata(default(bool), OnBlurPropertyChanged));
+
+    public 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(DrawerHost), new PropertyMetadata(DefaultBlurRadius, OnBlurPropertyChanged));
+
+    private static void OnBlurPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+    {
+        var drawerHost = (DrawerHost)d;
+        drawerHost.HandleBackgroundBlur();
+    }
+    #endregion
+
     #region open drawer events/callbacks
 
     public static readonly RoutedEvent DrawerOpenedEvent =
@@ -593,7 +619,8 @@ private static void IsBottomDrawerOpenPropertyChangedCallback(DependencyObject d
     private static void IsDrawerOpenPropertyChanged(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs dependencyPropertyChangedEventArgs, Dock dock)
     {
         var drawerHost = (DrawerHost)dependencyObject;
-        if (!(bool)dependencyPropertyChangedEventArgs.NewValue)
+        bool isOpened = (bool)dependencyPropertyChangedEventArgs.NewValue;
+        if (!isOpened)
         {
             var args = new DrawerClosingEventArgs(dock, DrawerClosingEvent);
             drawerHost.OnDrawerClosing(args);
@@ -604,16 +631,43 @@ private static void IsDrawerOpenPropertyChanged(DependencyObject dependencyObjec
             }
         }
 
-        if (!drawerHost._lockZIndexes && (bool)dependencyPropertyChangedEventArgs.NewValue)
+        if (!drawerHost._lockZIndexes && isOpened)
             drawerHost.PrepareZIndexes(drawerHost._zIndexPropertyLookup[dependencyPropertyChangedEventArgs.Property]);
         drawerHost.UpdateVisualStates();
 
-        if ((bool)dependencyPropertyChangedEventArgs.NewValue)
+        drawerHost.HandleBackgroundBlur(isOpened);
+
+        if (isOpened)
         {
             RaiseDrawerOpened(drawerHost, dock);
         }
     }
 
+    private void HandleBackgroundBlur(bool? isOpened = null)
+    {
+        isOpened ??= IsAnyDrawerOpen();
+
+        if (Content is UIElement drawerContent)
+        {
+            if (ApplyBlurBackground && isOpened.Value)
+            {
+                drawerContent.Effect = new BlurEffect()
+                {
+                    Radius = BlurRadius
+                };
+            }
+            else
+            {
+                drawerContent.Effect = null;
+            }
+        }
+
+        bool IsAnyDrawerOpen()
+        {
+            return IsLeftDrawerOpen || IsTopDrawerOpen || IsRightDrawerOpen || IsBottomDrawerOpen;
+        }
+    }
+
     private static void RaiseDrawerOpened(DrawerHost drawerHost, Dock dock)
     {
         //multiple ways of calling back that the drawer has opened: