Adds the blur

AvaloniaUtils · Jan 3, 2025 · dbd3266 · dbd3266
1 parent df4f9d4
commit dbd3266
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 20 deletions.
diff --git a/DialogHost.Avalonia/DialogHost.axaml b/DialogHost.Avalonia/DialogHost.axaml
@@ -32,25 +32,19 @@
     <Setter Property="Template">
       <ControlTemplate>
         <Grid Name="PART_DialogHostRoot" Focusable="False">
-          <ContentPresenter Name="ContentPresenter"
+          <ContentPresenter Name="PART_ContentPresenter"
                             Content="{TemplateBinding Content}"
                             ContentTemplate="{TemplateBinding ContentTemplate}"
                             HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
+                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                            Tag="{TemplateBinding BlurBackgroundRadius}"/>
           <Rectangle Name="PART_ContentCover"
                      Fill="{TemplateBinding OverlayBackground}"
                      Focusable="False">
             <Rectangle.Styles>
               <Style Selector="Rectangle#PART_ContentCover[Opacity=0]">
                 <Setter Property="IsVisible" Value="False" />
               </Style>
-              <Style Selector="Rectangle#PART_ContentCover:not(.notransitions)">
-                <Setter Property="Transitions">
-                  <Transitions>
-                    <DoubleTransition Property="Opacity" Easing="LinearEasing" Duration="0.3" />
-                  </Transitions>
-                </Setter>
-              </Style>
             </Rectangle.Styles>
           </Rectangle>
         </Grid>
@@ -73,14 +67,25 @@
       </ControlTemplate>
     </Setter>
 
-    <Style Selector="^:not(.disable-content-cover-animations) /template/ Rectangle#PART_ContentCover">
-      <Setter Property="Transitions">
-        <Transitions>
-          <DoubleTransition Property="Opacity" Easing="LinearEasing" Duration="0.3" />
-        </Transitions>
-      </Setter>
+    <Style Selector="^:not(.no-transitions), ^:not(.notransitions)">
+      <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+        <Setter Property="Transitions">
+          <Transitions>
+            <EffectTransition Property="Effect" Easing="LinearEasing" Duration="0.3" />
+          </Transitions>
+        </Setter>
+      </Style>
+
+      <Style Selector="^:not(.disable-content-cover-animations) /template/ Rectangle#PART_ContentCover">
+        <Setter Property="Transitions">
+          <Transitions>
+            <DoubleTransition Property="Opacity" Easing="LinearEasing" Duration="0.3" />
+          </Transitions>
+        </Setter>
+      </Style>
     </Style>
 
+
     <Style Selector="^[IsOpen=True] /template/ Rectangle#PART_ContentCover">
       <Setter Property="IsHitTestVisible" Value="True" />
       <Setter Property="Opacity" Value="0.56" />
@@ -89,5 +94,11 @@
       <Setter Property="IsHitTestVisible" Value="False" />
       <Setter Property="Opacity" Value="0" />
     </Style>
+
+    <Style Selector="^[BlurBackground=True][IsOpen=True] /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="Effect">
+        <BlurEffect Radius="{TemplateBinding Tag}" />
+      </Setter>
+    </Style>
   </ControlTheme>
 </ResourceDictionary>
diff --git a/DialogHost.Avalonia/DialogHost.axaml.cs b/DialogHost.Avalonia/DialogHost.axaml.cs
@@ -31,6 +31,8 @@ public class DialogHost : ContentControl {
     /// </summary>
     public const string DialogHostRoot = "PART_DialogHostRoot";
 
+    private const double DefaultBlurRadius = 16.0;
+
     /// <summary>
     /// Tracks all loaded instances of DialogHost.
     /// </summary>
@@ -175,6 +177,18 @@ public class DialogHost : ContentControl {
             (o, v) => o.PopupPositioner = v,
             defaultBindingMode: BindingMode.TwoWay);
 
+    /// <summary>
+    /// Identifies the <see cref="BlurBackground"/> property.
+    /// </summary>
+    public static readonly StyledProperty<bool> BlurBackgroundProperty 
+        = AvaloniaProperty.Register<DialogHost, bool>(nameof(BlurBackground));
+
+    /// <summary>
+    /// Identifies the <see cref="BlurBackgroundRadius"/> property.
+    /// </summary>
+    public static readonly StyledProperty<double> BlurBackgroundRadiusProperty 
+        = AvaloniaProperty.Register<DialogHost, double>(nameof(BlurBackgroundRadius), DefaultBlurRadius);
+
     private DialogClosingEventHandler? _asyncShowClosingEventHandler;
     private DialogOpenedEventHandler? _asyncShowOpenedEventHandler;
 
@@ -327,6 +341,22 @@ public IDialogPopupPositioner? PopupPositioner {
         get => _popupPositioner;
         set => SetAndRaise(PopupPositionerProperty, ref _popupPositioner, value);
     }
+
+    /// <summary>
+    /// Gets or sets whether to enable background blur when dialog is opened
+    /// </summary>
+    public bool BlurBackground {
+        get => GetValue(BlurBackgroundProperty);
+        set => SetValue(BlurBackgroundProperty, value);
+    }
+
+    /// <summary>
+    /// Gets or sets radius of background blur when <see cref="BlurBackground"/> is enabled
+    /// </summary>
+    public double BlurBackgroundRadius {
+        get => GetValue(BlurBackgroundRadiusProperty);
+        set => SetValue(BlurBackgroundRadiusProperty, value);
+    }
 
     /// <summary>
     /// Returns a DialogSession for the currently open dialog for managing it programmatically. If no dialog is open, CurrentSession will return null

diff --git a/DialogHost.Demo/Views/FruitBowl.axaml b/DialogHost.Demo/Views/FruitBowl.axaml
@@ -5,7 +5,7 @@
              xmlns:dialogHostAvalonia="clr-namespace:DialogHostAvalonia;assembly=DialogHost.Avalonia"
              xmlns:avalonia="clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
-             MinHeight="256" MinWidth="256"
+             MinHeight="250" MinWidth="250"
              x:Class="DialogHostDemo.Views.FruitBowl">
   <dialogHostAvalonia:DialogHost
     DialogClosing="FruitBowl_OnDialogClosing">

diff --git a/DialogHost.Demo/Views/MainWindow.axaml b/DialogHost.Demo/Views/MainWindow.axaml
@@ -9,8 +9,8 @@
         mc:Ignorable="d"
         x:Class="DialogHostDemo.Views.MainWindow"
         Icon="/Assets/avalonia-logo.ico"
-        Width="820" Height="420"
-        MinWidth="820" MinHeight="420"
+        Width="1024" Height="420"
+        MinWidth="1024" MinHeight="420"
         Title="DialogHost.Demo">
   <Design.DataContext>
     <vm:MainWindowViewModel />
@@ -33,14 +33,14 @@
       </DataTemplate>
     </dialogHostAvalonia:DialogHost.DataTemplates>
     <Grid Margin="8"
-          ColumnDefinitions="* 8 * 8 *" RowDefinitions="Auto 8 *"
+          ColumnDefinitions="* 8 * 8 * 8 *" RowDefinitions="Auto 8 *"
           VerticalAlignment="Center" HorizontalAlignment="Stretch">
       <TextBlock Grid.Column="0" Grid.Row="0"
                  TextWrapping="Wrap">
         SAMPLE 1: Localized dialog encapsulating specific content, launched from a routed command, response handled in code-behind.
       </TextBlock>
       <Border Grid.Column="0" Grid.Row="2"
-              MinHeight="256" MinWidth="256"
+              MinHeight="250" MinWidth="250"
               BorderThickness="1" BorderBrush="Black">
         <views:FruitBowl />
       </Border>
@@ -70,6 +70,28 @@
         <Button Margin="8" Click="OpenDialogWithView">PASS VIEW</Button>
         <Button Margin="8" Click="OpenDialogWithModel">PASS MODEL</Button>
       </StackPanel>
+
+      <TextBlock Grid.Column="6" Grid.Row="0"
+                 TextWrapping="Wrap">
+        SAMPLE 4: Dialog with blur.
+        Blur can be controlled via BlurBackground and BlurBackgroundRadius properties.
+      </TextBlock>
+      <Border Grid.Column="6" Grid.Row="2"
+              MinHeight="200" MinWidth="200"
+              BorderThickness="1" BorderBrush="Black">
+        <dialogHostAvalonia:DialogHost Identifier="BlurDialogHost"
+                                       BlurBackground="True">
+          <Panel>
+            <TextBlock TextWrapping="Wrap" TextAlignment="Justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed metus semper, faucibus erat ac, tincidunt odio. Donec congue nisi purus, non consectetur purus sollicitudin sed. Suspendisse iaculis dictum porttitor. Nulla ex leo, pulvinar venenatis arcu in, luctus efficitur nisl. Mauris non velit quis elit placerat auctor porttitor ac augue. Phasellus ut ipsum enim. Proin interdum aliquam ex sed laoreet. Sed eros nulla, ornare elementum urna vel, fringilla pharetra lorem. Integer hendrerit eros a tortor gravida, in lacinia augue blandit. Donec dignissim dapibus augue vel ultricies. Donec in velit mi. Pellentesque ac lorem vitae magna ullamcorper vehicula.</TextBlock>
+            <Panel HorizontalAlignment="Center" VerticalAlignment="Center"
+                   Background="{DynamicResource SystemRegionBrush}">
+              <Button Click="OpenBlurDialog">
+                Open with blur
+              </Button>
+            </Panel>
+          </Panel>
+        </dialogHostAvalonia:DialogHost>
+      </Border>
     </Grid>
   </dialogHostAvalonia:DialogHost>
   <Window.Resources>

diff --git a/DialogHost.Demo/Views/MainWindow.axaml.cs b/DialogHost.Demo/Views/MainWindow.axaml.cs
@@ -31,4 +31,8 @@ private async void OpenDialogWithModel(object? sender, RoutedEventArgs e) {
     private async void OpenNoAnimationDialog(object? sender, RoutedEventArgs e) {
         await DialogHost.Show(Resources["Sample2View"]!, "NoAnimationDialogHost");
     }
+
+    private async void OpenBlurDialog(object? sender, RoutedEventArgs e) {
+        await DialogHost.Show(Resources["Sample2View"]!, "BlurDialogHost");
+    }
 }