Skip to content

Commit e5ee018

Browse files
Sergio0694Sergio0694
committed
Updated Blur sample page
1 parent 10a02d7 commit e5ee018

File tree

8 files changed

+85
-53
lines changed

8 files changed

+85
-53
lines changed

‎Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -590,6 +590,9 @@
590590
<Content Include="SamplePages\Animations\Effects\FadeBehaviorXaml.bind" />
591591
<Content Include="SamplePages\Animations\Activities\StartAnimationActivity.bind" />
592592
<Content Include="SamplePages\Animations\Activities\InvokeActionsActivity.bind" />
593+
<Content Include="SamplePages\Animations\Behaviors\BlurBehavior.png" />
594+
<Content Include="SamplePages\Animations\Behaviors\BlurBehaviorCode.bind" />
595+
<Content Include="SamplePages\Animations\Behaviors\BlurBehaviorXaml.bind" />
593596
<Content Include="SamplePages\Animations\Effects\EffectAnimations.bind" />
594597
<Content Include="SamplePages\VisualEffectFactory\VisualEffectFactory.bind" />
595598
</ItemGroup>

‎Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Blur/BlurBehavior.png‎ renamed to ‎Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Animations/Behaviors/BlurBehavior.png‎

File renamed without changes.

‎Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Animations/Behaviors/BlurBehaviorCode.bind‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
// XAML UIElement
2+
<Image x:Name="ToolkitLogo" Source="ms-appx:///Assets/Square150x150Logo.png" Height="100" Width="100" >
3+
4+
// C# - Blur can be applied to any UIElement. In this case it is an image called ToolkitLogo.
5+
using Microsoft.Toolkit.Uwp.UI.Animations;
6+
7+
// Create and attacha a sprite visual with an animatable blur effect
8+
var sprite = await PipelineBuilder
9+
.FromBackdrop()
10+
.Blur(0, out EffectAnimation<float> blurAnimation)
11+
.AttachAsync(button, button);
12+
13+
// Start the animation on the applied brush
14+
blurAnimation(sprite.Brush, 32, TimeSpan.FromSeconds(3));

‎Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Animations/Behaviors/BlurBehaviorXaml.bind‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<Page
2+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6+
xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
7+
xmlns:interactions="using:Microsoft.Xaml.Interactions.Core"
8+
xmlns:ani="using:Microsoft.Toolkit.Uwp.UI.Animations"
9+
xmlns:media="using:Microsoft.Toolkit.Uwp.UI.Media"
10+
xmlns:behaviors="using:Microsoft.Toolkit.Uwp.UI.Behaviors"
11+
xmlns:core="using:Microsoft.Xaml.Interactions.Core"
12+
mc:Ignorable="d">
13+
14+
<Button Background="Gray" Width="200" Height="200" HorizontalAlignment="Center" VerticalAlignment="Center">
15+
<media:UIElementExtensions.VisualFactory>
16+
<media:PipelineVisualFactory>
17+
<media:BlurEffect x:Name="ImageBlurEffect" IsAnimatable="True"/>
18+
</media:PipelineVisualFactory>
19+
</media:UIElementExtensions.VisualFactory>
20+
<ani:Explicit.Animations>
21+
<ani:AnimationSet x:Name="BlurAnimation">
22+
<ani:BlurEffectAnimation From="0"
23+
To="32"
24+
Duration="0:0:3"
25+
Delay="0"
26+
EasingType="Linear"
27+
EasingMode="EaseOut"
28+
Target="{Binding ElementName=ImageBlurEffect}"/>
29+
</ani:AnimationSet>
30+
</ani:Explicit.Animations>
31+
32+
<Image Source="ms-appx:///Assets/ToolkitLogo.png" Height="100" Width="100"/>
33+
34+
<interactivity:Interaction.Behaviors>
35+
<interactions:EventTriggerBehavior EventName="Loaded">
36+
<behaviors:StartAnimationAction Animation="{Binding ElementName=BlurAnimation}"/>
37+
</interactions:EventTriggerBehavior>
38+
<interactions:EventTriggerBehavior EventName="Click">
39+
<behaviors:StartAnimationAction Animation="{Binding ElementName=BlurAnimation}"/>
40+
</interactions:EventTriggerBehavior>
41+
</interactivity:Interaction.Behaviors>
42+
</Button>
43+
</Page>

‎Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Animations/Effects/FadeBehaviorXaml.bind‎

Lines changed: 22 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,30 +6,37 @@
66
xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
77
xmlns:interactions="using:Microsoft.Xaml.Interactions.Core"
88
xmlns:ani="using:Microsoft.Toolkit.Uwp.UI.Animations"
9+
xmlns:media="using:Microsoft.Toolkit.Uwp.UI.Media"
910
xmlns:behaviors="using:Microsoft.Toolkit.Uwp.UI.Behaviors"
1011
xmlns:core="using:Microsoft.Xaml.Interactions.Core"
1112
mc:Ignorable="d">
12-
13+
1314
<Button Background="Gray" Width="200" Height="200" HorizontalAlignment="Center" VerticalAlignment="Center">
14-
<Image Source="ms-appx:///Assets/ToolkitLogo.png" Height="100" Width="100">
15-
<ani:Explicit.Animations>
16-
<ani:AnimationSet x:Name="FadeAnimation">
17-
<ani:OpacityAnimation From="1"
18-
To="0"
19-
Duration="0:0:3"
20-
Delay="0"
21-
EasingType="Linear"
22-
EasingMode="EaseOut"/>
23-
</ani:AnimationSet>
24-
</ani:Explicit.Animations>
25-
</Image>
15+
<media:UIElementExtensions.VisualFactory>
16+
<media:PipelineVisualFactory>
17+
<media:BlurEffect x:Name="ImageBlurEffect" IsAnimatable="True"/>
18+
</media:PipelineVisualFactory>
19+
</media:UIElementExtensions.VisualFactory>
20+
<ani:Explicit.Animations>
21+
<ani:AnimationSet x:Name="BlurAnimation">
22+
<ani:BlurEffectAnimation From="0"
23+
To="32"
24+
Duration="0:0:3"
25+
Delay="0"
26+
EasingType="Linear"
27+
EasingMode="EaseOut"
28+
Target="{Binding ElementName=ImageBlurEffect}"/>
29+
</ani:AnimationSet>
30+
</ani:Explicit.Animations>
31+
32+
<Image Source="ms-appx:///Assets/ToolkitLogo.png" Height="100" Width="100"/>
2633

2734
<interactivity:Interaction.Behaviors>
2835
<interactions:EventTriggerBehavior EventName="Loaded">
29-
<behaviors:StartAnimationAction Animation="{Binding ElementName=FadeAnimation}"/>
36+
<behaviors:StartAnimationAction Animation="{Binding ElementName=BlurAnimation}"/>
3037
</interactions:EventTriggerBehavior>
3138
<interactions:EventTriggerBehavior EventName="Click">
32-
<behaviors:StartAnimationAction Animation="{Binding ElementName=FadeAnimation}"/>
39+
<behaviors:StartAnimationAction Animation="{Binding ElementName=BlurAnimation}"/>
3340
</interactions:EventTriggerBehavior>
3441
</interactivity:Interaction.Behaviors>
3542
</Button>

‎Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Blur/BlurBehaviorCode.bind‎

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Blur/BlurBehaviorXaml.bind‎

Lines changed: 0 additions & 26 deletions
This file was deleted.

‎Microsoft.Toolkit.Uwp.SampleApp/SamplePages/samples.json‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -521,13 +521,12 @@
521521
},
522522
{
523523
"Name": "Blur",
524-
"Type": "BlurBehaviorPage",
525524
"Subcategory": "Behavior",
526525
"About": "Blur XAML elements using composition",
527526
"CodeUrl": "https://github.com/windows-toolkit/WindowsCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.UI.Animations/Behaviors",
528-
"CodeFile": "BlurBehaviorCode.bind",
529-
"XamlCodeFile": "BlurBehaviorXaml.bind",
530-
"Icon": "/SamplePages/Blur/blurBehavior.png",
527+
"CodeFile": "/SamplePages/Animations/Behaviors/BlurBehaviorCode.bind",
528+
"XamlCodeFile": "/SamplePages/Animations/Behaviors/BlurBehaviorXaml.bind",
529+
"Icon": "/SamplePages/Animations/Behaviors/BlurBehavior.png",
531530
"BadgeUpdateVersionRequired": "Anniversary Update required",
532531
"DocumentationUrl": "https://raw.githubusercontent.com/MicrosoftDocs/WindowsCommunityToolkitDocs/master/docs/animations/Blur.md"
533532
},

0 commit comments

Comments
 (0)