Skip to content

PipelineBrush and effects refactoring #3298

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
michael-hawker merged 36 commits into from
May 27, 2020
Merged

PipelineBrush and effects refactoring #3298

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
36 commits
Select commit Hold shift + click to select a range
afa5047
Merge pull request #10 from windows-toolkit/master
Sergio0694 Mar 15, 2020
e8cd4f7
Merge pull request #18 from windows-toolkit/master
Sergio0694 Mar 27, 2020
cbc80ef
Merge pull request #19 from windows-toolkit/master
Sergio0694 Apr 3, 2020
4079a75
Merge remote-tracking branch 'upstream/master' into master2
Sergio0694 Apr 9, 2020
f0b5bf0
Merge remote-tracking branch 'upstream/master' into master2
Sergio0694 Apr 23, 2020
6129c69
Merge remote-tracking branch 'upstream/master' into master2
Sergio0694 Apr 30, 2020
fdaa307
Merge remote-tracking branch 'upstream/master' into master2
Sergio0694 May 6, 2020
db41e0d
Merge remote-tracking branch 'upstream/master' into master2
Sergio0694 May 13, 2020
6bb8323
Merge remote-tracking branch 'upstream/master' into master2
Sergio0694 May 16, 2020
b5029a7
Merge remote-tracking branch 'upstream/master' into master2
Sergio0694 May 18, 2020
8de5d11
Merge remote-tracking branch 'upstream/master' into master2
Sergio0694 May 20, 2020
d18b5b2
Code refactoring
Sergio0694 May 23, 2020
7c36d47
Code refactoring to Win2D effect mappings
Sergio0694 May 23, 2020
aefd351
Minor refactoring
Sergio0694 May 23, 2020
dbcfe5d
Updated sample page XAML code
Sergio0694 May 23, 2020
856a0e7
More code refactoring
Sergio0694 May 23, 2020
ed33efb
Removed Abstract namespace, code refactoring
Sergio0694 May 23, 2020
bec2112
Removed unnecessary async state machine
Sergio0694 May 24, 2020
99508b6
Renamed IPipeline[Input|Node] interfaces
Sergio0694 May 24, 2020
091fcab
Renamed input effects to source effects
Sergio0694 May 24, 2020
8e40ae4
Refactored inputs to markup extensions
Sergio0694 May 25, 2020
c5ad88d
Renamed some APIs for consistency
Sergio0694 May 25, 2020
8184cc6
More renames
Sergio0694 May 25, 2020
ebeaf78
Simplified code, improved XML docs
Sergio0694 May 25, 2020
3d415ff
Fixed XML comment reference
Sergio0694 May 25, 2020
43989a1
Set default backdrop source to backdrop
Sergio0694 May 25, 2020
31644bf
Fixed incorrect property
Sergio0694 May 25, 2020
c9c08f4
Renamed some parameter for consistency
Sergio0694 May 25, 2020
638b648
Updated PipelineBrush sample code
Sergio0694 May 25, 2020
0db6b4c
Merge branch 'master' into refactoring/win2d-apis
Sergio0694 May 26, 2020
b2d193c
Merge branch 'master' into refactoring/win2d-apis
Sergio0694 May 26, 2020
cb5f9fc
Added default pipeline/blend sources
Sergio0694 May 26, 2020
8db80ea
Merge branch 'master' into refactoring/win2d-apis
Sergio0694 May 26, 2020
1becb7a
Removed .Base namespace
Sergio0694 May 26, 2020
6b1d27c
Merge branch 'master' into refactoring/win2d-apis
Sergio0694 May 26, 2020
c38640c
Updated AcrylicBrush sample page
Sergio0694 May 27, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions Microsoft.Toolkit.Uwp.SampleApp/SamplePages/AcrylicBrush/AcrylicBrushXaml.bind
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,9 @@
Grid.Column="2"
Height="400">
<Border.Background>
<brushes:AcrylicBrush Source="@[Source:Enum:AcrylicBackgroundSource.Backdrop]"
Tint="@[Tint:Brush:DarkCyan]"
TintMix="@[TintMix:DoubleSlider:0.2:0.0-1.0]"
<brushes:AcrylicBrush BackgroundSource="@[Source:Enum:AcrylicBackgroundSource.Backdrop]"
TintColor="@[Tint:Brush:DarkCyan]"
TintOpacity="@[TintMix:DoubleSlider:0.2:0.0-1.0]"
BlurAmount="@[BlurAmount:DoubleSlider:12:0.0-32.0]"
TextureUri="ms-appx:///Assets/BrushAssets/NoiseTexture.png"/>
</Border.Background>
Expand Down
67 changes: 21 additions & 46 deletions Microsoft.Toolkit.Uwp.SampleApp/SamplePages/PipelineBrush/PipelineBrushPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,62 +20,37 @@
VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="Red" Width="200" Height="200"/>
<Border>
<Border.Background>
<media:PipelineBrush>
<media:PipelineBrush.Effects>
<effects:AcrylicEffect/>
<effects:BlendEffect>
<effects:BlendEffect.Input>
<effects:BackdropEffect Source="Backdrop"/>
</effects:BlendEffect.Input>
</effects:BlendEffect>
<effects:BlurEffect/>
<effects:ExposureEffect/>
<effects:GrayscaleEffect/>
<effects:HueRotationEffect/>
</media:PipelineBrush.Effects>
<media:PipelineBrush Source="{effects:AcrylicSource}">
<effects:BlendEffect Source="{effects:BackdropSource BackgroundSource=Backdrop}"/>
<effects:BlurEffect/>
<effects:ExposureEffect/>
<effects:GrayscaleEffect/>
<effects:HueRotationEffect/>
</media:PipelineBrush>
</Border.Background>
</Border>
<Border>
<Border.Background>
<media:PipelineBrush>
<media:PipelineBrush.Effects>
<effects:AcrylicEffect/>
<effects:HueRotationEffect/>
<effects:BlendEffect>
<effects:BlendEffect.Input>
<effects:ImageEffect Uri="ms-appx:///Assets/BrushAssets/NoiseTexture.png"/>
</effects:BlendEffect.Input>
</effects:BlendEffect>
<effects:InvertEffect/>
<effects:LuminanceToAlphaEffect/>
<effects:OpacityEffect/>
<effects:SaturationEffect/>
<effects:SepiaEffect/>
</media:PipelineBrush.Effects>
<media:PipelineBrush Source="{effects:AcrylicSource}">
<effects:HueRotationEffect/>
<effects:BlendEffect Source="{effects:ImageSource Uri=ms-appx:///Assets/BrushAssets/NoiseTexture.png}"/>
<effects:InvertEffect/>
<effects:LuminanceToAlphaEffect/>
<effects:OpacityEffect/>
<effects:SaturationEffect/>
<effects:SepiaEffect/>
</media:PipelineBrush>
</Border.Background>
</Border>
<Border>
<Border.Background>
<media:PipelineBrush>
<media:PipelineBrush.Effects>
<effects:AcrylicEffect/>
<effects:SepiaEffect/>
<effects:ShadeEffect/>
<effects:BlendEffect>
<effects:BlendEffect.Input>
<effects:SolidColorEffect/>
</effects:BlendEffect.Input>
</effects:BlendEffect>
<effects:TemperatureAndTintEffect/>
<effects:BlendEffect>
<effects:BlendEffect.Input>
<effects:TileEffect Uri="ms-appx:///Assets/BrushAssets/NoiseTexture.png"/>
</effects:BlendEffect.Input>
</effects:BlendEffect>
<effects:TintEffect/>
</media:PipelineBrush.Effects>
<media:PipelineBrush Source="{effects:AcrylicSource}">
<effects:SepiaEffect/>
<effects:ShadeEffect/>
<effects:BlendEffect Source="{effects:SolidColorSource}"/>
<effects:TemperatureAndTintEffect/>
<effects:BlendEffect Source="{effects:TileSource Uri=ms-appx:///Assets/BrushAssets/NoiseTexture.png}"/>
<effects:TintEffect/>
</media:PipelineBrush>
</Border.Background>
</Border>
Expand Down
31 changes: 8 additions & 23 deletions Microsoft.Toolkit.Uwp.SampleApp/SamplePages/PipelineBrush/PipelineBrushXaml.bind
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,29 +20,14 @@
Grid.Column="2"
Height="400">
<Border.Background>
<brushes:PipelineBrush>
<brushes:PipelineBrush.Effects>
<effects:BackdropEffect Source="Backdrop"/>
<effects:LuminanceToAlphaEffect/>
<effects:OpacityEffect Value="0.4"/>
<effects:BlendEffect Mode="Multiply">
<effects:BlendEffect.Input>
<effects:BackdropEffect Source="Backdrop"/>
</effects:BlendEffect.Input>
</effects:BlendEffect>
<effects:BlurEffect Value="16"/>
<effects:ShadeEffect Color="#FF222222" Intensity="0.2"/>
<effects:BlendEffect Mode="Overlay" Placement="Background">
<effects:BlendEffect.Input>
<effects:TileEffect Uri="ms-appx:///Assets/BrushAssets/NoiseTexture.png"/>
</effects:BlendEffect.Input>
</effects:BlendEffect>
<effects:BlendEffect Mode="Overlay" Placement="Background">
<effects:BlendEffect.Input>
<effects:ImageEffect Uri="ms-appx:///SamplePages/DropShadowPanel/Unicorn.png"/>
</effects:BlendEffect.Input>
</effects:BlendEffect>
</brushes:PipelineBrush.Effects>
<brushes:PipelineBrush Source="{effects:BackdropSource}">
<effects:LuminanceToAlphaEffect/>
<effects:OpacityEffect Value="0.4"/>
<effects:BlendEffect Mode="Multiply" Source="{effects:BackdropSource}"/>
<effects:BlurEffect Amount="16"/>
<effects:ShadeEffect Color="#FF222222" Intensity="0.2"/>
<effects:BlendEffect Mode="Overlay" Placement="Background" Source="{effects:TileSource Uri=ms-appx:///Assets/BrushAssets/NoiseTexture.png}"/>
<effects:BlendEffect Mode="Overlay" Placement="Background" Source="{effects:ImageSource Uri=ms-appx:///SamplePages/DropShadowPanel/Unicorn.png}"/>
</brushes:PipelineBrush>
</Border.Background>
</Border>
Expand Down
99 changes: 51 additions & 48 deletions Microsoft.Toolkit.Uwp.UI.Media/Brushes/AcrylicBrush.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
// See the LICENSE file in the project root for more information.

using System;
using Microsoft.Toolkit.Uwp.UI.Media.Base;
using Microsoft.Toolkit.Uwp.UI.Media.Pipelines;
using Windows.UI;
using Windows.UI.Composition;
Expand All @@ -20,42 +19,42 @@ public sealed class AcrylicBrush : XamlCompositionEffectBrushBase
/// <summary>
/// The <see cref="EffectSetter{T}"/> instance in use to set the blur amount
/// </summary>
/// <remarks>This is only set when <see cref="Source"/> is <see cref="AcrylicBackgroundSource.Backdrop"/></remarks>
/// <remarks>This is only set when <see cref="BackgroundSource"/> is <see cref="AcrylicBackgroundSource.Backdrop"/></remarks>
private EffectSetter<float> blurAmountSetter;

/// <summary>
/// The <see cref="EffectSetter{T}"/> instance in use to set the tint color
/// </summary>
private EffectSetter<Color> tintSetter;
private EffectSetter<Color> tintColorSetter;

/// <summary>
/// The <see cref="EffectSetter{T}"/> instance in use to set the tint mix amount
/// </summary>
private EffectSetter<float> tintMixSetter;
private EffectSetter<float> tintOpacitySetter;

/// <summary>
/// Gets or sets the source mode for the effect
/// Gets or sets the background source mode for the effect (the default is <see cref="AcrylicBackgroundSource.Backdrop"/>).
/// </summary>
public AcrylicBackgroundSource Source
public AcrylicBackgroundSource BackgroundSource
{
get => (AcrylicBackgroundSource)GetValue(SourceProperty);
set => SetValue(SourceProperty, value);
get => (AcrylicBackgroundSource)GetValue(BackgroundSourceProperty);
set => SetValue(BackgroundSourceProperty, value);
}

/// <summary>
/// Identifies the <see cref="Source"/> dependency property.
/// Identifies the <see cref="BackgroundSource"/> dependency property.
/// </summary>
public static readonly DependencyProperty SourceProperty = DependencyProperty.Register(
nameof(Source),
public static readonly DependencyProperty BackgroundSourceProperty = DependencyProperty.Register(
nameof(BackgroundSource),
typeof(AcrylicBackgroundSource),
typeof(AcrylicBrush),
new PropertyMetadata(AcrylicBackgroundSource.Backdrop, OnSourcePropertyChanged));

/// <summary>
/// Updates the UI when <see cref="Source"/> changes
/// Updates the UI when <see cref="BackgroundSource"/> changes
/// </summary>
/// <param name="d">The current <see cref="AcrylicBrush"/> instance</param>
/// <param name="e">The <see cref="DependencyPropertyChangedEventArgs"/> instance for <see cref="SourceProperty"/></param>
/// <param name="e">The <see cref="DependencyPropertyChangedEventArgs"/> instance for <see cref="BackgroundSourceProperty"/></param>
private static void OnSourcePropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
if (d is AcrylicBrush brush &&
Expand Down Expand Up @@ -86,14 +85,14 @@ public double BlurAmount
new PropertyMetadata(0.0, OnBlurAmountPropertyChanged));

/// <summary>
/// Updates the UI when <see cref="Source"/> changes
/// Updates the UI when <see cref="BackgroundSource"/> changes
/// </summary>
/// <param name="d">The current <see cref="AcrylicBrush"/> instance</param>
/// <param name="e">The <see cref="DependencyPropertyChangedEventArgs"/> instance for <see cref="SourceProperty"/></param>
/// <param name="e">The <see cref="DependencyPropertyChangedEventArgs"/> instance for <see cref="BackgroundSourceProperty"/></param>
private static void OnBlurAmountPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
if (d is AcrylicBrush brush &&
brush.Source != AcrylicBackgroundSource.HostBackdrop && // Blur is fixed by OS when using HostBackdrop source.
brush.BackgroundSource != AcrylicBackgroundSource.HostBackdrop && // Blur is fixed by OS when using HostBackdrop source.
brush.CompositionBrush is CompositionBrush target)
{
brush.blurAmountSetter?.Invoke(target, (float)(double)e.NewValue);
Expand All @@ -103,60 +102,64 @@ private static void OnBlurAmountPropertyChanged(DependencyObject d, DependencyPr
/// <summary>
/// Gets or sets the tint for the effect
/// </summary>
public Color Tint
public Color TintColor
{
get => (Color)GetValue(TintProperty);
set => SetValue(TintProperty, value);
get => (Color)GetValue(TintColorProperty);
set => SetValue(TintColorProperty, value);
}

/// <summary>
/// Identifies the <see cref="Tint"/> dependency property.
/// Identifies the <see cref="TintColor"/> dependency property.
/// </summary>
public static readonly DependencyProperty TintProperty = DependencyProperty.Register(
nameof(Tint),
public static readonly DependencyProperty TintColorProperty = DependencyProperty.Register(
nameof(TintColor),
typeof(Color),
typeof(AcrylicBrush),
new PropertyMetadata(default(Color), OnTintPropertyChanged));
new PropertyMetadata(default(Color), OnTintColorPropertyChanged));

/// <summary>
/// Updates the UI when <see cref="Tint"/> changes
/// Updates the UI when <see cref="TintColor"/> changes
/// </summary>
/// <param name="d">The current <see cref="AcrylicBrush"/> instance</param>
/// <param name="e">The <see cref="DependencyPropertyChangedEventArgs"/> instance for <see cref="TintProperty"/></param>
private static void OnTintPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
/// <param name="e">The <see cref="DependencyPropertyChangedEventArgs"/> instance for <see cref="TintColorProperty"/></param>
private static void OnTintColorPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
if (d is AcrylicBrush brush &&
brush.CompositionBrush is CompositionBrush target)
{
brush.tintSetter?.Invoke(target, (Color)e.NewValue);
brush.tintColorSetter?.Invoke(target, (Color)e.NewValue);
}
}

/// <summary>
/// Gets or sets the tint mix factor for the effect
/// Gets or sets the tint opacity factor for the effect
/// </summary>
public double TintMix { get; set; }
public double TintOpacity
{
get => (double)GetValue(TintOpacityProperty);
set => SetValue(TintOpacityProperty, value);
}

/// <summary>
/// Identifies the <see cref="TintMix"/> dependency property.
/// Identifies the <see cref="TintOpacity"/> dependency property.
/// </summary>
public static readonly DependencyProperty TintMixProperty = DependencyProperty.Register(
nameof(TintMix),
public static readonly DependencyProperty TintOpacityProperty = DependencyProperty.Register(
nameof(TintOpacity),
typeof(double),
typeof(AcrylicBrush),
new PropertyMetadata(0.0, OnTintMixPropertyChanged));
new PropertyMetadata(0.0, OnTintOpacityPropertyChanged));

/// <summary>
/// Updates the UI when <see cref="TintMix"/> changes
/// Updates the UI when <see cref="TintOpacity"/> changes
/// </summary>
/// <param name="d">The current <see cref="AcrylicBrush"/> instance</param>
/// <param name="e">The <see cref="DependencyPropertyChangedEventArgs"/> instance for <see cref="TintMixProperty"/></param>
private static void OnTintMixPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
/// <param name="e">The <see cref="DependencyPropertyChangedEventArgs"/> instance for <see cref="TintOpacityProperty"/></param>
private static void OnTintOpacityPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
if (d is AcrylicBrush brush &&
brush.CompositionBrush is CompositionBrush target)
{
brush.tintMixSetter?.Invoke(target, (float)(double)e.NewValue);
brush.tintOpacitySetter?.Invoke(target, (float)(double)e.NewValue);
}
}

Expand Down Expand Up @@ -196,25 +199,25 @@ private static void OnTextureUriPropertyChanged(DependencyObject d, DependencyPr
/// <inheritdoc/>
protected override PipelineBuilder OnBrushRequested()
{
switch (this.Source)
switch (BackgroundSource)
{
case AcrylicBackgroundSource.Backdrop:
return PipelineBuilder.FromBackdropAcrylic(
Tint,
out tintSetter,
(float)TintMix,
out tintMixSetter,
TintColor,
out this.tintColorSetter,
(float)TintOpacity,
out this.tintOpacitySetter,
(float)BlurAmount,
out this.blurAmountSetter,
out blurAmountSetter,
TextureUri);
case AcrylicBackgroundSource.HostBackdrop:
return PipelineBuilder.FromHostBackdropAcrylic(
Tint,
out tintSetter,
(float)TintMix,
out tintMixSetter,
TintColor,
out this.tintColorSetter,
(float)TintOpacity,
out this.tintOpacitySetter,
TextureUri);
default: throw new ArgumentOutOfRangeException(nameof(this.Source), $"Invalid acrylic source: {this.Source}");
default: throw new ArgumentOutOfRangeException(nameof(BackgroundSource), $"Invalid acrylic source: {BackgroundSource}");
}
}
}
Expand Down
7 changes: 3 additions & 4 deletions Microsoft.Toolkit.Uwp.UI.Media/Brushes/BackdropBlurBrush.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@

//// Example brush from https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.media.xamlcompositionbrushbase

using Microsoft.Toolkit.Uwp.UI.Media.Base;
using Microsoft.Toolkit.Uwp.UI.Media.Pipelines;
using Windows.UI.Composition;
using Windows.UI.Xaml;
Expand All @@ -20,7 +19,7 @@ public class BackdropBlurBrush : XamlCompositionEffectBrushBase
/// <summary>
/// The <see cref="EffectSetter{T}"/> instance currently in use
/// </summary>
private EffectSetter<float> setter;
private EffectSetter<float> amountSetter;

/// <summary>
/// Gets or sets the amount of gaussian blur to apply to the background.
Expand Down Expand Up @@ -50,14 +49,14 @@ private static void OnAmountChanged(DependencyObject d, DependencyPropertyChange
if (d is BackdropBlurBrush brush &&
brush.CompositionBrush is CompositionBrush target)
{
brush.setter?.Invoke(target, (float)brush.Amount);
brush.amountSetter?.Invoke(target, (float)brush.Amount);
}
}

/// <inheritdoc/>
protected override PipelineBuilder OnBrushRequested()
{
return PipelineBuilder.FromBackdrop().Blur((float)Amount, out setter);
return PipelineBuilder.FromBackdrop().Blur((float)Amount, out this.amountSetter);
}
}
}
1 change: 0 additions & 1 deletion Microsoft.Toolkit.Uwp.UI.Media/Brushes/BackdropInvertBrush.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@

//// Example brush from https://blogs.windows.com/buildingapps/2017/07/18/working-brushes-content-xaml-visual-layer-interop-part-one/#z70vPv1QMAvZsceo.97

using Microsoft.Toolkit.Uwp.UI.Media.Base;
using Microsoft.Toolkit.Uwp.UI.Media.Pipelines;
using Windows.UI.Xaml.Media;

Expand Down
1 change: 0 additions & 1 deletion Microsoft.Toolkit.Uwp.UI.Media/Brushes/BackdropSaturationBrush.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
// The .NET Foundation licenses this file to you under the MIT license.
// See the LICENSE file in the project root for more information.

using Microsoft.Toolkit.Uwp.UI.Media.Base;
using Microsoft.Toolkit.Uwp.UI.Media.Pipelines;
using Windows.UI.Composition;
using Windows.UI.Xaml;
Expand Down
Loading