diff --git a/components/Media/samples/Assets/BrushAssets/PolkaDotsBackground.jpg b/components/Media/samples/Assets/BrushAssets/PolkaDotsBackground.jpg new file mode 100644 index 00000000..9e05b479 Binary files /dev/null and b/components/Media/samples/Assets/BrushAssets/PolkaDotsBackground.jpg differ diff --git a/components/Media/samples/Assets/BrushAssets/Trex.png b/components/Media/samples/Assets/BrushAssets/Trex.png new file mode 100644 index 00000000..d63e4f78 Binary files /dev/null and b/components/Media/samples/Assets/BrushAssets/Trex.png differ diff --git a/components/Media/samples/Assets/MediaBrushes.png b/components/Media/samples/Assets/MediaBrushes.png new file mode 100644 index 00000000..06cc0275 Binary files /dev/null and b/components/Media/samples/Assets/MediaBrushes.png differ diff --git a/components/Media/samples/Brushes.md b/components/Media/samples/Brushes.md new file mode 100644 index 00000000..31129154 --- /dev/null +++ b/components/Media/samples/Brushes.md @@ -0,0 +1,70 @@ +--- +title: Brushes +author: erinwoo +description: Brush effects that can be applied to images and backgrounds. +keywords: brush, acrylic, acrylicbrush, backdrop, blur, gamma, transfer, invert, saturation, sepia, tiles, tile, image, blend, brushes +dev_langs: + - csharp +category: Xaml +subcategory: Effects +discussion-id: 0 +issue-id: 0 +icon: Assets/MediaBrushes.png +--- + +A brush object is used to paint graphical objects in XAML and can be layered with other visual elements such as images and backgrounds. For examples and further explanation of drawing concepts represented by Brush, see [Use brushes](https://learn.microsoft.com/en-us/windows/uwp/graphics/using-brushes). + +## AcrylicBrush + +Acrylic is a type of Brush that creates a translucent texture. You can apply acrylic to app surfaces to add depth and help establish a visual hierarchy. +To learn more about the acrylic material in Windows: [link](https://learn.microsoft.com/en-us/windows/apps/design/style/acrylic) + +> [!SAMPLE AcrylicBrushSample] + +#### *UWP only:* +There are two modes for setting the BackgroundSource property when using an `AcrylicBrush`. +Setting it to `Backdrop` results in the acrylic effect being applied to whatever is *behind the brush* in the application. + +Setting BackgroundSource to `HostBackdrop` results in the acrylic effect being applied *behind the current application*. + +## BackdropBlurBrush + +A brush that blurs the background in the application. + +> [!SAMPLE BackdropBlurBrushSample] + +## BackdropGammaTransferBrush + +A brush which modifies the color values of the brush's background in the application. Map the color intensities of an image using a gamma function created using an amplitude, exponent, and offset you provide for each channel. + +> [!SAMPLE BackdropGammaTransferBrushSample] + +## BackdropInvertBrush + +A brush that inverts the colors of the brush's background in the application. + +> [!SAMPLE BackdropInvertBrushSample] + +## BackdropSaturationBrush + +A brush that can increase or decrease the saturation of the brush's background in the application. The `Saturation` property specifies a double value for the amount of Saturation to apply from 0.0 - 1.0. Zero being monochrome, and one being fully saturated. The default is 0.5. + +> [!SAMPLE BackdropSaturationBrushSample] + +## BackdropSepiaBrush + +A brush that applies the sepia effect to the brush's background. The `Intensity` property specifies a double value for the amount of Sepia to apply from 0.0 - 1.0. Zero being none, and one being full Sepia effect. The default is 0.5. + +> [!SAMPLE BackdropSepiaBrushSample] + +## ImageBlendBrush + +A brush that blends the provided image with whatever is behind it in the application with the provided blend mode. The ImageBlendMode property specifies how the image should be blended with the backdrop. More info about the effect modes can be found [here](https://microsoft.github.io/Win2D/WinUI2/html/T_Microsoft_Graphics_Canvas_Effects_BlendEffectMode.htm). + +> [!SAMPLE ImageBlendBrushSample] + +## TilesBrush + +A brush can be used to display a tiled image as a background. + +> [!SAMPLE TilesBrushSample] diff --git a/components/Media/samples/Brushes/AcrylicBrushSample.xaml b/components/Media/samples/Brushes/AcrylicBrushSample.xaml new file mode 100644 index 00000000..b7bc46f3 --- /dev/null +++ b/components/Media/samples/Brushes/AcrylicBrushSample.xaml @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + diff --git a/components/Media/samples/Brushes/AcrylicBrushSample.xaml.cs b/components/Media/samples/Brushes/AcrylicBrushSample.xaml.cs new file mode 100644 index 00000000..30ddd5e8 --- /dev/null +++ b/components/Media/samples/Brushes/AcrylicBrushSample.xaml.cs @@ -0,0 +1,16 @@ +// Licensed to the .NET Foundation under one or more agreements. +// The .NET Foundation licenses this file to you under the MIT license. +// See the LICENSE file in the project root for more information. + +using CommunityToolkit.WinUI.Media; + +namespace MediaExperiment.Samples.Brushes; + +[ToolkitSample(id: nameof(AcrylicBrushSample), "AcrylicBrush", description: $"A sample for showing how to apply a {nameof(CommunityToolkit.WinUI.Media.AcrylicBrush)} effect to a background.")] +public sealed partial class AcrylicBrushSample : Page +{ + public AcrylicBrushSample() + { + this.InitializeComponent(); + } +} diff --git a/components/Media/samples/Brushes/BackdropBlurBrushSample.xaml b/components/Media/samples/Brushes/BackdropBlurBrushSample.xaml new file mode 100644 index 00000000..f9fc7bb9 --- /dev/null +++ b/components/Media/samples/Brushes/BackdropBlurBrushSample.xaml @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + diff --git a/components/Media/samples/Brushes/BackdropBlurBrushSample.xaml.cs b/components/Media/samples/Brushes/BackdropBlurBrushSample.xaml.cs new file mode 100644 index 00000000..17ed9445 --- /dev/null +++ b/components/Media/samples/Brushes/BackdropBlurBrushSample.xaml.cs @@ -0,0 +1,16 @@ +// Licensed to the .NET Foundation under one or more agreements. +// The .NET Foundation licenses this file to you under the MIT license. +// See the LICENSE file in the project root for more information. + +using CommunityToolkit.WinUI.Media; + +namespace MediaExperiment.Samples.Brushes; + +[ToolkitSample(id: nameof(BackdropBlurBrushSample), "BackdropBlurBrush", description: $"A sample that uses a {nameof(BackdropBlurBrush)} to blur whatever is behind the application.")] +public sealed partial class BackdropBlurBrushSample : Page +{ + public BackdropBlurBrushSample() + { + this.InitializeComponent(); + } +} diff --git a/components/Media/samples/Brushes/BackdropGammaTransferBrushSample.xaml b/components/Media/samples/Brushes/BackdropGammaTransferBrushSample.xaml new file mode 100644 index 00000000..d2128098 --- /dev/null +++ b/components/Media/samples/Brushes/BackdropGammaTransferBrushSample.xaml @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + diff --git a/components/Media/samples/Brushes/BackdropGammaTransferBrushSample.xaml.cs b/components/Media/samples/Brushes/BackdropGammaTransferBrushSample.xaml.cs new file mode 100644 index 00000000..1db03776 --- /dev/null +++ b/components/Media/samples/Brushes/BackdropGammaTransferBrushSample.xaml.cs @@ -0,0 +1,16 @@ +// Licensed to the .NET Foundation under one or more agreements. +// The .NET Foundation licenses this file to you under the MIT license. +// See the LICENSE file in the project root for more information. + +using CommunityToolkit.WinUI.Media; + +namespace MediaExperiment.Samples.Brushes; + +[ToolkitSample(id: nameof(BackdropGammaTransferBrushSample), "BackdropGammaTransferBrush", description: $"A sample for showing how to apply a {nameof(CommunityToolkit.WinUI.Media.BackdropGammaTransferBrush)} effect to a background.")] +public sealed partial class BackdropGammaTransferBrushSample : Page +{ + public BackdropGammaTransferBrushSample() + { + this.InitializeComponent(); + } +} diff --git a/components/Media/samples/Brushes/BackdropInvertBrushSample.xaml b/components/Media/samples/Brushes/BackdropInvertBrushSample.xaml new file mode 100644 index 00000000..8f733aa3 --- /dev/null +++ b/components/Media/samples/Brushes/BackdropInvertBrushSample.xaml @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + diff --git a/components/Media/samples/Brushes/BackdropInvertBrushSample.xaml.cs b/components/Media/samples/Brushes/BackdropInvertBrushSample.xaml.cs new file mode 100644 index 00000000..a73fcba3 --- /dev/null +++ b/components/Media/samples/Brushes/BackdropInvertBrushSample.xaml.cs @@ -0,0 +1,16 @@ +// Licensed to the .NET Foundation under one or more agreements. +// The .NET Foundation licenses this file to you under the MIT license. +// See the LICENSE file in the project root for more information. + +using CommunityToolkit.WinUI.Media; + +namespace MediaExperiment.Samples.Brushes; + +[ToolkitSample(id: nameof(BackdropInvertBrushSample), "BackdropGammaTransferBrush", description: $"A sample for showing how to apply a {nameof(BackdropInvertBrush)} effect to a background.")] +public sealed partial class BackdropInvertBrushSample : Page +{ + public BackdropInvertBrushSample() + { + this.InitializeComponent(); + } +} diff --git a/components/Media/samples/Brushes/BackdropSaturationBrushSample.xaml b/components/Media/samples/Brushes/BackdropSaturationBrushSample.xaml new file mode 100644 index 00000000..3593ab43 --- /dev/null +++ b/components/Media/samples/Brushes/BackdropSaturationBrushSample.xaml @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + diff --git a/components/Media/samples/Brushes/BackdropSaturationBrushSample.xaml.cs b/components/Media/samples/Brushes/BackdropSaturationBrushSample.xaml.cs new file mode 100644 index 00000000..a5ba0397 --- /dev/null +++ b/components/Media/samples/Brushes/BackdropSaturationBrushSample.xaml.cs @@ -0,0 +1,16 @@ +// Licensed to the .NET Foundation under one or more agreements. +// The .NET Foundation licenses this file to you under the MIT license. +// See the LICENSE file in the project root for more information. + +using CommunityToolkit.WinUI.Media; + +namespace MediaExperiment.Samples.Brushes; + +[ToolkitSample(id: nameof(BackdropSaturationBrushSample), "BackdropGammaTransferBrush", description: $"A sample for showing how to apply a {nameof(BackdropSaturationBrush)} effect to a background.")] +public sealed partial class BackdropSaturationBrushSample : Page +{ + public BackdropSaturationBrushSample() + { + this.InitializeComponent(); + } +} diff --git a/components/Media/samples/Brushes/BackdropSepiaBrushSample.xaml b/components/Media/samples/Brushes/BackdropSepiaBrushSample.xaml new file mode 100644 index 00000000..72bcea39 --- /dev/null +++ b/components/Media/samples/Brushes/BackdropSepiaBrushSample.xaml @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + diff --git a/components/Media/samples/Brushes/BackdropSepiaBrushSample.xaml.cs b/components/Media/samples/Brushes/BackdropSepiaBrushSample.xaml.cs new file mode 100644 index 00000000..8a8c6b6c --- /dev/null +++ b/components/Media/samples/Brushes/BackdropSepiaBrushSample.xaml.cs @@ -0,0 +1,16 @@ +// Licensed to the .NET Foundation under one or more agreements. +// The .NET Foundation licenses this file to you under the MIT license. +// See the LICENSE file in the project root for more information. + +using CommunityToolkit.WinUI.Media; + +namespace MediaExperiment.Samples.Brushes; + +[ToolkitSample(id: nameof(BackdropSepiaBrushSample), "BackdropGammaTransferBrush", description: $"A sample for showing how to apply a {nameof(BackdropSepiaBrush)} effect to a background.")] +public sealed partial class BackdropSepiaBrushSample : Page +{ + public BackdropSepiaBrushSample() + { + this.InitializeComponent(); + } +} diff --git a/components/Media/samples/Brushes/ImageBlendBrushSample.xaml b/components/Media/samples/Brushes/ImageBlendBrushSample.xaml new file mode 100644 index 00000000..31384000 --- /dev/null +++ b/components/Media/samples/Brushes/ImageBlendBrushSample.xaml @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + diff --git a/components/Media/samples/Brushes/ImageBlendBrushSample.xaml.cs b/components/Media/samples/Brushes/ImageBlendBrushSample.xaml.cs new file mode 100644 index 00000000..cfb63d4b --- /dev/null +++ b/components/Media/samples/Brushes/ImageBlendBrushSample.xaml.cs @@ -0,0 +1,16 @@ +// Licensed to the .NET Foundation under one or more agreements. +// The .NET Foundation licenses this file to you under the MIT license. +// See the LICENSE file in the project root for more information. + +using CommunityToolkit.WinUI.Media; + +namespace MediaExperiment.Samples.Brushes; + +[ToolkitSample(id: nameof(ImageBlendBrushSample), "BackdropGammaTransferBrush", description: $"A sample for showing how to apply a {nameof(ImageBlendBrush)} effect to a background.")] +public sealed partial class ImageBlendBrushSample : Page +{ + public ImageBlendBrushSample() + { + this.InitializeComponent(); + } +} diff --git a/components/Media/samples/Brushes/PipelineBrushSample.xaml b/components/Media/samples/Brushes/PipelineBrushSample.xaml new file mode 100644 index 00000000..9074a371 --- /dev/null +++ b/components/Media/samples/Brushes/PipelineBrushSample.xaml @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/components/Media/samples/Brushes/PipelineBrushSample.xaml.cs b/components/Media/samples/Brushes/PipelineBrushSample.xaml.cs new file mode 100644 index 00000000..02f9c305 --- /dev/null +++ b/components/Media/samples/Brushes/PipelineBrushSample.xaml.cs @@ -0,0 +1,16 @@ +// Licensed to the .NET Foundation under one or more agreements. +// The .NET Foundation licenses this file to you under the MIT license. +// See the LICENSE file in the project root for more information. + +using CommunityToolkit.WinUI.Media; + +namespace MediaExperiment.Samples.Brushes; + +[ToolkitSample(id: nameof(PipelineBrushSample), "PipelineBrush", description: $"A sample for showing how to apply a {nameof(PipelineBrush)} effect to a background.")] +public sealed partial class PipelineBrushSample : Page +{ + public PipelineBrushSample() + { + this.InitializeComponent(); + } +} diff --git a/components/Media/samples/Brushes/PipelineVisualFactorySample.xaml b/components/Media/samples/Brushes/PipelineVisualFactorySample.xaml new file mode 100644 index 00000000..e343737e --- /dev/null +++ b/components/Media/samples/Brushes/PipelineVisualFactorySample.xaml @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + diff --git a/components/Media/samples/Brushes/PipelineVisualFactorySample.xaml.cs b/components/Media/samples/Brushes/PipelineVisualFactorySample.xaml.cs new file mode 100644 index 00000000..2e9ebc3c --- /dev/null +++ b/components/Media/samples/Brushes/PipelineVisualFactorySample.xaml.cs @@ -0,0 +1,16 @@ +// Licensed to the .NET Foundation under one or more agreements. +// The .NET Foundation licenses this file to you under the MIT license. +// See the LICENSE file in the project root for more information. + +using CommunityToolkit.WinUI.Media; + +namespace MediaExperiment.Samples.Brushes; + +[ToolkitSample(id: nameof(PipelineVisualFactorySample), "BackdropBlurBrush", description: $"A sample that uses a {nameof(PipelineVisualFactory)} to blur whatever is behind the application.")] +public sealed partial class PipelineVisualFactorySample : Page +{ + public PipelineVisualFactorySample() + { + this.InitializeComponent(); + } +} diff --git a/components/Media/samples/Brushes/TilesBrushSample.xaml b/components/Media/samples/Brushes/TilesBrushSample.xaml new file mode 100644 index 00000000..f2d35a3e --- /dev/null +++ b/components/Media/samples/Brushes/TilesBrushSample.xaml @@ -0,0 +1,28 @@ + + + + + + + + + + + + + diff --git a/components/Media/samples/Brushes/TilesBrushSample.xaml.cs b/components/Media/samples/Brushes/TilesBrushSample.xaml.cs new file mode 100644 index 00000000..12000626 --- /dev/null +++ b/components/Media/samples/Brushes/TilesBrushSample.xaml.cs @@ -0,0 +1,16 @@ +// Licensed to the .NET Foundation under one or more agreements. +// The .NET Foundation licenses this file to you under the MIT license. +// See the LICENSE file in the project root for more information. + +using CommunityToolkit.WinUI.Media; + +namespace MediaExperiment.Samples.Brushes; + +[ToolkitSample(id: nameof(TilesBrushSample), "Tiles Brush", description: $"A sample that uses a {nameof(TilesBrush)} to display a tiled image. Here, an image of polka dots is tiled to create a seamless repeated background.")] +public sealed partial class TilesBrushSample : Page +{ + public TilesBrushSample() + { + this.InitializeComponent(); + } +} diff --git a/components/Media/samples/Media.Samples.csproj b/components/Media/samples/Media.Samples.csproj index c69d83b1..1f3ac5d1 100644 --- a/components/Media/samples/Media.Samples.csproj +++ b/components/Media/samples/Media.Samples.csproj @@ -16,7 +16,13 @@ - + + + PreserveNewest + + + PreserveNewest + PreserveNewest @@ -26,5 +32,8 @@ PreserveNewest + + PreserveNewest + diff --git a/components/Media/samples/PipelineBrush.md b/components/Media/samples/PipelineBrush.md new file mode 100644 index 00000000..c6f5bf3c --- /dev/null +++ b/components/Media/samples/PipelineBrush.md @@ -0,0 +1,18 @@ +--- +title: PipelineBrush +author: erinwoo +description: A brush that renders a customizable Composition/Win2D effects pipeline. This allows for applying multiple effects into a single effect chain. +keywords: brush, pipeline, pipe +dev_langs: + - csharp +category: Xaml +subcategory: Effects +discussion-id: 0 +issue-id: 0 +icon: Assets/EffectAnimations.png +--- + +`Source` gets or sets the source for the current pipeline (defaults to a `BackdropSourceExtension` with `Microsoft.UI.Xaml.Media.AcrylicBackgroundSource.Backdrop` source). +Multiple effects can be nested within the `PipelineBrush` component. + +> [!SAMPLE PipelineBrushSample] diff --git a/components/Media/samples/PipelineVisualFactory.md b/components/Media/samples/PipelineVisualFactory.md new file mode 100644 index 00000000..7f25f67e --- /dev/null +++ b/components/Media/samples/PipelineVisualFactory.md @@ -0,0 +1,17 @@ +--- +title: PipelineVisualFactory +author: erinwoo +description: A helper type that can be used to create sprite visuals with custom Win2D/Composition effects chains and attach them to UI elements. +keywords: pipeline, visual, factory, pipe +dev_langs: + - csharp +category: Xaml +subcategory: Effects +discussion-id: 0 +issue-id: 0 +icon: Assets/EffectAnimations.png +--- + +PipelineVisualFactory can create the same visual brushes as the PipelineBrush type, but it can attach them directly on the underlying Visual instance backing a UI element. This can make the XAML code less verbose and more efficient, as there is no need to insert additional elements just so that a brush can be applied to them. + +> [!SAMPLE PipelineVisualFactorySample] diff --git a/components/Primitives/samples/ConstrainedBox/ConstrainedBoxMultipleSample.xaml b/components/Primitives/samples/ConstrainedBox/ConstrainedBoxMultipleSample.xaml index 661a8b16..bb8230a0 100644 --- a/components/Primitives/samples/ConstrainedBox/ConstrainedBoxMultipleSample.xaml +++ b/components/Primitives/samples/ConstrainedBox/ConstrainedBoxMultipleSample.xaml @@ -1,11 +1,11 @@ - + diff --git a/components/Primitives/samples/ConstrainedBox/ConstrainedBoxScaleSample.xaml b/components/Primitives/samples/ConstrainedBox/ConstrainedBoxScaleSample.xaml index 63a7b2bc..b8afd63b 100644 --- a/components/Primitives/samples/ConstrainedBox/ConstrainedBoxScaleSample.xaml +++ b/components/Primitives/samples/ConstrainedBox/ConstrainedBoxScaleSample.xaml @@ -1,11 +1,11 @@ - +