Skip to content

Commit 0fcd729

Browse files
SKProCHSKProCH
authored
Merge pull request #79 from AvaloniaUtils/blur
Adds the background blur effect
2 parents df4f9d4 + dbd3266 commit 0fcd729

File tree

5 files changed

+87
-20
lines changed

5 files changed

+87
-20
lines changed

‎DialogHost.Avalonia/DialogHost.axaml

Lines changed: 26 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -32,25 +32,19 @@
3232
<Setter Property="Template">
3333
<ControlTemplate>
3434
<Grid Name="PART_DialogHostRoot" Focusable="False">
35-
<ContentPresenter Name="ContentPresenter"
35+
<ContentPresenter Name="PART_ContentPresenter"
3636
Content="{TemplateBinding Content}"
3737
ContentTemplate="{TemplateBinding ContentTemplate}"
3838
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
39-
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
39+
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
40+
Tag="{TemplateBinding BlurBackgroundRadius}"/>
4041
<Rectangle Name="PART_ContentCover"
4142
Fill="{TemplateBinding OverlayBackground}"
4243
Focusable="False">
4344
<Rectangle.Styles>
4445
<Style Selector="Rectangle#PART_ContentCover[Opacity=0]">
4546
<Setter Property="IsVisible" Value="False" />
4647
</Style>
47-
<Style Selector="Rectangle#PART_ContentCover:not(.notransitions)">
48-
<Setter Property="Transitions">
49-
<Transitions>
50-
<DoubleTransition Property="Opacity" Easing="LinearEasing" Duration="0.3" />
51-
</Transitions>
52-
</Setter>
53-
</Style>
5448
</Rectangle.Styles>
5549
</Rectangle>
5650
</Grid>
@@ -73,14 +67,25 @@
7367
</ControlTemplate>
7468
</Setter>
7569

76-
<Style Selector="^:not(.disable-content-cover-animations) /template/ Rectangle#PART_ContentCover">
77-
<Setter Property="Transitions">
78-
<Transitions>
79-
<DoubleTransition Property="Opacity" Easing="LinearEasing" Duration="0.3" />
80-
</Transitions>
81-
</Setter>
70+
<Style Selector="^:not(.no-transitions), ^:not(.notransitions)">
71+
<Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
72+
<Setter Property="Transitions">
73+
<Transitions>
74+
<EffectTransition Property="Effect" Easing="LinearEasing" Duration="0.3" />
75+
</Transitions>
76+
</Setter>
77+
</Style>
78+
79+
<Style Selector="^:not(.disable-content-cover-animations) /template/ Rectangle#PART_ContentCover">
80+
<Setter Property="Transitions">
81+
<Transitions>
82+
<DoubleTransition Property="Opacity" Easing="LinearEasing" Duration="0.3" />
83+
</Transitions>
84+
</Setter>
85+
</Style>
8286
</Style>
8387

88+
8489
<Style Selector="^[IsOpen=True] /template/ Rectangle#PART_ContentCover">
8590
<Setter Property="IsHitTestVisible" Value="True" />
8691
<Setter Property="Opacity" Value="0.56" />
@@ -89,5 +94,11 @@
8994
<Setter Property="IsHitTestVisible" Value="False" />
9095
<Setter Property="Opacity" Value="0" />
9196
</Style>
97+
98+
<Style Selector="^[BlurBackground=True][IsOpen=True] /template/ ContentPresenter#PART_ContentPresenter">
99+
<Setter Property="Effect">
100+
<BlurEffect Radius="{TemplateBinding Tag}" />
101+
</Setter>
102+
</Style>
92103
</ControlTheme>
93104
</ResourceDictionary>

‎DialogHost.Avalonia/DialogHost.axaml.cs

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@ public class DialogHost : ContentControl {
3131
/// </summary>
3232
public const string DialogHostRoot = "PART_DialogHostRoot";
3333

34+
private const double DefaultBlurRadius = 16.0;
35+
3436
/// <summary>
3537
/// Tracks all loaded instances of DialogHost.
3638
/// </summary>
@@ -175,6 +177,18 @@ public class DialogHost : ContentControl {
175177
(o, v) => o.PopupPositioner = v,
176178
defaultBindingMode: BindingMode.TwoWay);
177179

180+
/// <summary>
181+
/// Identifies the <see cref="BlurBackground"/> property.
182+
/// </summary>
183+
public static readonly StyledProperty<bool> BlurBackgroundProperty
184+
= AvaloniaProperty.Register<DialogHost, bool>(nameof(BlurBackground));
185+
186+
/// <summary>
187+
/// Identifies the <see cref="BlurBackgroundRadius"/> property.
188+
/// </summary>
189+
public static readonly StyledProperty<double> BlurBackgroundRadiusProperty
190+
= AvaloniaProperty.Register<DialogHost, double>(nameof(BlurBackgroundRadius), DefaultBlurRadius);
191+
178192
private DialogClosingEventHandler? _asyncShowClosingEventHandler;
179193
private DialogOpenedEventHandler? _asyncShowOpenedEventHandler;
180194

@@ -327,6 +341,22 @@ public IDialogPopupPositioner? PopupPositioner {
327341
get => _popupPositioner;
328342
set => SetAndRaise(PopupPositionerProperty, ref _popupPositioner, value);
329343
}
344+
345+
/// <summary>
346+
/// Gets or sets whether to enable background blur when dialog is opened
347+
/// </summary>
348+
public bool BlurBackground {
349+
get => GetValue(BlurBackgroundProperty);
350+
set => SetValue(BlurBackgroundProperty, value);
351+
}
352+
353+
/// <summary>
354+
/// Gets or sets radius of background blur when <see cref="BlurBackground"/> is enabled
355+
/// </summary>
356+
public double BlurBackgroundRadius {
357+
get => GetValue(BlurBackgroundRadiusProperty);
358+
set => SetValue(BlurBackgroundRadiusProperty, value);
359+
}
330360

331361
/// <summary>
332362
/// Returns a DialogSession for the currently open dialog for managing it programmatically. If no dialog is open, CurrentSession will return null

‎DialogHost.Demo/Views/FruitBowl.axaml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
xmlns:dialogHostAvalonia="clr-namespace:DialogHostAvalonia;assembly=DialogHost.Avalonia"
66
xmlns:avalonia="clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia"
77
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
8-
MinHeight="256" MinWidth="256"
8+
MinHeight="250" MinWidth="250"
99
x:Class="DialogHostDemo.Views.FruitBowl">
1010
<dialogHostAvalonia:DialogHost
1111
DialogClosing="FruitBowl_OnDialogClosing">

‎DialogHost.Demo/Views/MainWindow.axaml

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@
99
mc:Ignorable="d"
1010
x:Class="DialogHostDemo.Views.MainWindow"
1111
Icon="/Assets/avalonia-logo.ico"
12-
Width="820" Height="420"
13-
MinWidth="820" MinHeight="420"
12+
Width="1024" Height="420"
13+
MinWidth="1024" MinHeight="420"
1414
Title="DialogHost.Demo">
1515
<Design.DataContext>
1616
<vm:MainWindowViewModel />
@@ -33,14 +33,14 @@
3333
</DataTemplate>
3434
</dialogHostAvalonia:DialogHost.DataTemplates>
3535
<Grid Margin="8"
36-
ColumnDefinitions="* 8 * 8 *" RowDefinitions="Auto 8 *"
36+
ColumnDefinitions="* 8 * 8 * 8 *" RowDefinitions="Auto 8 *"
3737
VerticalAlignment="Center" HorizontalAlignment="Stretch">
3838
<TextBlock Grid.Column="0" Grid.Row="0"
3939
TextWrapping="Wrap">
4040
SAMPLE 1: Localized dialog encapsulating specific content, launched from a routed command, response handled in code-behind.
4141
</TextBlock>
4242
<Border Grid.Column="0" Grid.Row="2"
43-
MinHeight="256" MinWidth="256"
43+
MinHeight="250" MinWidth="250"
4444
BorderThickness="1" BorderBrush="Black">
4545
<views:FruitBowl />
4646
</Border>
@@ -70,6 +70,28 @@
7070
<Button Margin="8" Click="OpenDialogWithView">PASS VIEW</Button>
7171
<Button Margin="8" Click="OpenDialogWithModel">PASS MODEL</Button>
7272
</StackPanel>
73+
74+
<TextBlock Grid.Column="6" Grid.Row="0"
75+
TextWrapping="Wrap">
76+
SAMPLE 4: Dialog with blur.
77+
Blur can be controlled via BlurBackground and BlurBackgroundRadius properties.
78+
</TextBlock>
79+
<Border Grid.Column="6" Grid.Row="2"
80+
MinHeight="200" MinWidth="200"
81+
BorderThickness="1" BorderBrush="Black">
82+
<dialogHostAvalonia:DialogHost Identifier="BlurDialogHost"
83+
BlurBackground="True">
84+
<Panel>
85+
<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>
86+
<Panel HorizontalAlignment="Center" VerticalAlignment="Center"
87+
Background="{DynamicResource SystemRegionBrush}">
88+
<Button Click="OpenBlurDialog">
89+
Open with blur
90+
</Button>
91+
</Panel>
92+
</Panel>
93+
</dialogHostAvalonia:DialogHost>
94+
</Border>
7395
</Grid>
7496
</dialogHostAvalonia:DialogHost>
7597
<Window.Resources>

‎DialogHost.Demo/Views/MainWindow.axaml.cs

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,4 +31,8 @@ private async void OpenDialogWithModel(object? sender, RoutedEventArgs e) {
3131
private async void OpenNoAnimationDialog(object? sender, RoutedEventArgs e) {
3232
await DialogHost.Show(Resources["Sample2View"]!, "NoAnimationDialogHost");
3333
}
34+
35+
private async void OpenBlurDialog(object? sender, RoutedEventArgs e) {
36+
await DialogHost.Show(Resources["Sample2View"]!, "BlurDialogHost");
37+
}
3438
}

0 commit comments

Comments
 (0)