Skip to content

Commit 4591f91

Browse files
Sergio0694michael-hawkerazchohfi
authored
Refactoring/Improvements based on Community Feedback to Pipeline Brushes (#3304)
* Added missing ContentProperty to BlendEffect * Removed unnecessary placement parameter for cross fade * Added CrossFadeEffect type * Updated ShadeEffect default intensity value * Inverted blend effect placement mode * Added CrossFadeEffect to shallow copy page * Improved XML docs * Added clamping for XAML effects for Win2D * Added auto clamping for AcrylicBrush tint opacity * Clamped AcrylicBrush blur property for negative value * Fixed default value for OpacityEffect Co-authored-by: Alexandre Zollinger Chohfi <[email protected]> * Added ranges in XML docs for exposure effect Co-authored-by: Michael Hawker MSFT (XAML Llama) <[email protected]> Co-authored-by: Alexandre Zollinger Chohfi <[email protected]>
1 parent ced5b7d commit 4591f91

File tree

16 files changed

+188
-95
lines changed

16 files changed

+188
-95
lines changed

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/PipelineBrush/PipelineBrushPage.xaml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
<effects:ExposureEffect/>
2727
<effects:GrayscaleEffect/>
2828
<effects:HueRotationEffect/>
29+
<effects:CrossFadeEffect/>
2930
</media:PipelineBrush>
3031
</Border.Background>
3132
</Border>

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/PipelineBrush/PipelineBrushXaml.bind

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@
2626
<effects:BlendEffect Mode="Multiply" Source="{effects:BackdropSource}"/>
2727
<effects:BlurEffect Amount="16"/>
2828
<effects:ShadeEffect Color="#FF222222" Intensity="0.2"/>
29-
<effects:BlendEffect Mode="Overlay" Placement="Background" Source="{effects:TileSource Uri=ms-appx:///Assets/BrushAssets/NoiseTexture.png}"/>
30-
<effects:BlendEffect Mode="Overlay" Placement="Background" Source="{effects:ImageSource Uri=ms-appx:///SamplePages/DropShadowPanel/Unicorn.png}"/>
29+
<effects:BlendEffect Mode="Overlay" Source="{effects:TileSource Uri=ms-appx:///Assets/BrushAssets/NoiseTexture.png}"/>
30+
<effects:BlendEffect Mode="Overlay" Source="{effects:ImageSource Uri=ms-appx:///SamplePages/DropShadowPanel/Unicorn.png}"/>
3131
</brushes:PipelineBrush>
3232
</Border.Background>
3333
</Border>

Microsoft.Toolkit.Uwp.UI.Media/Brushes/AcrylicBrush.cs

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -66,13 +66,13 @@ private static void OnSourcePropertyChanged(DependencyObject d, DependencyProper
6666
}
6767

6868
/// <summary>
69-
/// Gets or sets the blur amount for the effect
69+
/// Gets or sets the blur amount for the effect (must be a positive value)
7070
/// </summary>
7171
/// <remarks>This property is ignored when the active mode is <see cref="AcrylicBackgroundSource.HostBackdrop"/></remarks>
7272
public double BlurAmount
7373
{
7474
get => (double)GetValue(BlurAmountProperty);
75-
set => SetValue(BlurAmountProperty, value);
75+
set => SetValue(BlurAmountProperty, Math.Max(value, 0));
7676
}
7777

7878
/// <summary>
@@ -132,12 +132,12 @@ private static void OnTintColorPropertyChanged(DependencyObject d, DependencyPro
132132
}
133133

134134
/// <summary>
135-
/// Gets or sets the tint opacity factor for the effect
135+
/// Gets or sets the tint opacity factor for the effect (default is 0.5, must be in the [0, 1] range)
136136
/// </summary>
137137
public double TintOpacity
138138
{
139139
get => (double)GetValue(TintOpacityProperty);
140-
set => SetValue(TintOpacityProperty, value);
140+
set => SetValue(TintOpacityProperty, Math.Clamp(value, 0, 1));
141141
}
142142

143143
/// <summary>
@@ -147,7 +147,7 @@ public double TintOpacity
147147
nameof(TintOpacity),
148148
typeof(double),
149149
typeof(AcrylicBrush),
150-
new PropertyMetadata(0.0, OnTintOpacityPropertyChanged));
150+
new PropertyMetadata(0.5, OnTintOpacityPropertyChanged));
151151

152152
/// <summary>
153153
/// Updates the UI when <see cref="TintOpacity"/> changes

Microsoft.Toolkit.Uwp.UI.Media/Effects/BlendEffect.cs

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,15 @@
55
using System.Collections.Generic;
66
using Microsoft.Graphics.Canvas.Effects;
77
using Microsoft.Toolkit.Uwp.UI.Media.Pipelines;
8+
using Windows.UI.Xaml.Markup;
89

910
namespace Microsoft.Toolkit.Uwp.UI.Media.Effects
1011
{
1112
/// <summary>
1213
/// A blend effect that merges the current builder with an input one
1314
/// </summary>
1415
/// <remarks>This effect maps to the Win2D <see cref="Graphics.Canvas.Effects.BlendEffect"/> effect</remarks>
16+
[ContentProperty(Name = nameof(Effects))]
1517
public sealed class BlendEffect : IPipelineEffect
1618
{
1719
/// <summary>

Microsoft.Toolkit.Uwp.UI.Media/Effects/BlurEffect.cs

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
// The .NET Foundation licenses this file to you under the MIT license.
33
// See the LICENSE file in the project root for more information.
44

5+
using System;
56
using Microsoft.Toolkit.Uwp.UI.Media.Pipelines;
67

78
namespace Microsoft.Toolkit.Uwp.UI.Media.Effects
@@ -12,10 +13,16 @@ namespace Microsoft.Toolkit.Uwp.UI.Media.Effects
1213
/// <remarks>This effect maps to the Win2D <see cref="Graphics.Canvas.Effects.GaussianBlurEffect"/> effect</remarks>
1314
public sealed class BlurEffect : IPipelineEffect
1415
{
16+
private double amount;
17+
1518
/// <summary>
16-
/// Gets or sets the amount of gaussian blur to apply to the background.
19+
/// Gets or sets the blur amount for the effect (must be a positive value)
1720
/// </summary>
18-
public double Amount { get; set; }
21+
public double Amount
22+
{
23+
get => this.amount;
24+
set => this.amount = Math.Max(value, 0);
25+
}
1926

2027
/// <inheritdoc/>
2128
public PipelineBuilder AppendToPipeline(PipelineBuilder builder)
Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
// Licensed to the .NET Foundation under one or more agreements.
2+
// The .NET Foundation licenses this file to you under the MIT license.
3+
// See the LICENSE file in the project root for more information.
4+
5+
using System;
6+
using System.Collections.Generic;
7+
using Microsoft.Toolkit.Uwp.UI.Media.Pipelines;
8+
using Windows.UI.Xaml.Markup;
9+
10+
namespace Microsoft.Toolkit.Uwp.UI.Media.Effects
11+
{
12+
/// <summary>
13+
/// A blend effect that merges the current builder with an input one
14+
/// </summary>
15+
/// <remarks>This effect maps to the Win2D <see cref="Graphics.Canvas.Effects.CrossFadeEffect"/> effect</remarks>
16+
[ContentProperty(Name = nameof(Effects))]
17+
public sealed class CrossFadeEffect : IPipelineEffect
18+
{
19+
/// <summary>
20+
/// Gets or sets the input to merge with the current instance (defaults to a <see cref="BackdropSourceExtension"/> with <see cref="Windows.UI.Xaml.Media.AcrylicBackgroundSource.Backdrop"/> source).
21+
/// </summary>
22+
public PipelineBuilder Source { get; set; }
23+
24+
/// <summary>
25+
/// Gets or sets the effects to apply to the input to merge with the current instance
26+
/// </summary>
27+
public List<IPipelineEffect> Effects { get; set; } = new List<IPipelineEffect>();
28+
29+
private double factor = 0.5;
30+
31+
/// <summary>
32+
/// Gets or sets the The cross fade factor to blend the input effects (default to 0.5, should be in the [0, 1] range)
33+
/// </summary>
34+
public double Factor
35+
{
36+
get => this.factor;
37+
set => this.factor = Math.Clamp(value, 0, 1);
38+
}
39+
40+
/// <inheritdoc/>
41+
public PipelineBuilder AppendToPipeline(PipelineBuilder builder)
42+
{
43+
PipelineBuilder inputBuilder = Source ?? PipelineBuilder.FromBackdrop();
44+
45+
foreach (IPipelineEffect effect in this.Effects)
46+
{
47+
inputBuilder = effect.AppendToPipeline(inputBuilder);
48+
}
49+
50+
return builder.CrossFade(inputBuilder, (float)Factor);
51+
}
52+
}
53+
}

Microsoft.Toolkit.Uwp.UI.Media/Effects/ExposureEffect.cs

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
// The .NET Foundation licenses this file to you under the MIT license.
33
// See the LICENSE file in the project root for more information.
44

5+
using System;
56
using Microsoft.Toolkit.Uwp.UI.Media.Pipelines;
67

78
namespace Microsoft.Toolkit.Uwp.UI.Media.Effects
@@ -12,10 +13,16 @@ namespace Microsoft.Toolkit.Uwp.UI.Media.Effects
1213
/// <remarks>This effect maps to the Win2D <see cref="Graphics.Canvas.Effects.ExposureEffect"/> effect</remarks>
1314
public sealed class ExposureEffect : IPipelineEffect
1415
{
16+
private double amount;
17+
1518
/// <summary>
1619
/// Gets or sets the amount of exposure to apply to the background (defaults to 0, should be in the [-2, 2] range).
1720
/// </summary>
18-
public double Amount { get; set; }
21+
public double Amount
22+
{
23+
get => this.amount;
24+
set => this.amount = Math.Clamp(value, -2, 2);
25+
}
1926

2027
/// <inheritdoc/>
2128
public PipelineBuilder AppendToPipeline(PipelineBuilder builder)

Microsoft.Toolkit.Uwp.UI.Media/Effects/Extensions/AcrylicSourceExtension.cs

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,21 +22,33 @@ public sealed class AcrylicSourceExtension : MarkupExtension
2222
/// </summary>
2323
public AcrylicBackgroundSource BackgroundSource { get; set; } = AcrylicBackgroundSource.Backdrop;
2424

25+
private double blurAmount;
26+
2527
/// <summary>
26-
/// Gets or sets the blur amount for the effect
28+
/// Gets or sets the blur amount for the effect (must be a positive value)
2729
/// </summary>
2830
/// <remarks>This property is ignored when the active mode is <see cref="AcrylicBackgroundSource.HostBackdrop"/></remarks>
29-
public double BlurAmount { get; set; }
31+
public double BlurAmount
32+
{
33+
get => this.blurAmount;
34+
set => this.blurAmount = Math.Max(value, 0);
35+
}
3036

3137
/// <summary>
3238
/// Gets or sets the tint for the effect
3339
/// </summary>
3440
public Color TintColor { get; set; }
3541

42+
private double tintOpacity = 0.5f;
43+
3644
/// <summary>
37-
/// Gets or sets the color for the tint effect
45+
/// Gets or sets the color for the tint effect (default is 0.5, must be in the [0, 1] range)
3846
/// </summary>
39-
public double TintOpacity { get; set; }
47+
public double TintOpacity
48+
{
49+
get => this.tintOpacity;
50+
set => this.tintOpacity = Math.Clamp(value, 0, 1);
51+
}
4052

4153
/// <summary>
4254
/// Gets or sets the <see cref="Uri"/> to the texture to use

Microsoft.Toolkit.Uwp.UI.Media/Effects/OpacityEffect.cs

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
// The .NET Foundation licenses this file to you under the MIT license.
33
// See the LICENSE file in the project root for more information.
44

5+
using System;
56
using Microsoft.Toolkit.Uwp.UI.Media.Pipelines;
67

78
namespace Microsoft.Toolkit.Uwp.UI.Media.Effects
@@ -12,10 +13,16 @@ namespace Microsoft.Toolkit.Uwp.UI.Media.Effects
1213
/// <remarks>This effect maps to the Win2D <see cref="Graphics.Canvas.Effects.OpacityEffect"/> effect</remarks>
1314
public sealed class OpacityEffect : IPipelineEffect
1415
{
16+
private double value = 1;
17+
1518
/// <summary>
1619
/// Gets or sets the opacity value to apply to the background (defaults to 1, should be in the [0, 1] range).
1720
/// </summary>
18-
public double Value { get; set; } = 1;
21+
public double Value
22+
{
23+
get => this.value;
24+
set => this.value = Math.Clamp(value, 0, 1);
25+
}
1926

2027
/// <inheritdoc/>
2128
public PipelineBuilder AppendToPipeline(PipelineBuilder builder)

Microsoft.Toolkit.Uwp.UI.Media/Effects/SaturationEffect.cs

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
// The .NET Foundation licenses this file to you under the MIT license.
33
// See the LICENSE file in the project root for more information.
44

5+
using System;
56
using Microsoft.Toolkit.Uwp.UI.Media.Pipelines;
67

78
namespace Microsoft.Toolkit.Uwp.UI.Media.Effects
@@ -12,10 +13,16 @@ namespace Microsoft.Toolkit.Uwp.UI.Media.Effects
1213
/// <remarks>This effect maps to the Win2D <see cref="Graphics.Canvas.Effects.SaturationEffect"/> effect</remarks>
1314
public sealed class SaturationEffect : IPipelineEffect
1415
{
16+
private double value = 1;
17+
1518
/// <summary>
1619
/// Gets or sets the saturation amount to apply to the background (defaults to 1, should be in the [0, 1] range).
1720
/// </summary>
18-
public double Value { get; set; } = 1;
21+
public double Value
22+
{
23+
get => this.value;
24+
set => this.value = Math.Clamp(value, 0, 1);
25+
}
1926

2027
/// <inheritdoc/>
2128
public PipelineBuilder AppendToPipeline(PipelineBuilder builder)

0 commit comments

Comments
 (0)