Skip to content

Commit 9208107

Browse files
michael-hawkerErin Wooerinpwoo
authored
Erinwoo/media samples (#654)
* Added tiles brush section * Added tiles brush section * Added acrylic brush sample * Adding backdrop blur brush sample * Updated with Trex png * Added all brush sample types * Added markdowns for sample * Updated acrylic and backdrop blur brush samples * Updated brush samples * Updating all the brush samples * PipelineVisualFactory sample changes * Renaming namespace * Naming bug fix * Icon update + xaml styler * Small comments * Update AcrylicBrush.md * Remove AcrylicBrushHostBackdropSample and update XAML files. * Updated Media .csproj file with new icon asset * Removing new categories / subcategories * Moved all samples to single markdown - Brushes section * Update XAML Styling --------- Co-authored-by: Erin Woo <erinwoo@microsoft.com> Co-authored-by: Erin Woo <erinpwoo@yahoo.com>
1 parent 591266f commit 9208107

29 files changed

Lines changed: 587 additions & 5 deletions

‎components/Media/samples/Assets/BrushAssets/PolkaDotsBackground.jpg‎

4.19 KB
Loading

‎components/Media/samples/Assets/BrushAssets/Trex.png‎

5.57 KB
Loading

‎components/Media/samples/Assets/MediaBrushes.png‎

3.17 KB
Loading

‎components/Media/samples/Brushes.md‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
---
2+
title: Brushes
3+
author: erinwoo
4+
description: Brush effects that can be applied to images and backgrounds.
5+
keywords: brush, acrylic, acrylicbrush, backdrop, blur, gamma, transfer, invert, saturation, sepia, tiles, tile, image, blend, brushes
6+
dev_langs:
7+
- csharp
8+
category: Xaml
9+
subcategory: Effects
10+
discussion-id: 0
11+
issue-id: 0
12+
icon: Assets/MediaBrushes.png
13+
---
14+
15+
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).
16+
17+
## AcrylicBrush
18+
19+
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.
20+
To learn more about the acrylic material in Windows: [link](https://learn.microsoft.com/en-us/windows/apps/design/style/acrylic)
21+
22+
> [!SAMPLE AcrylicBrushSample]
23+
24+
#### *UWP only:*
25+
There are two modes for setting the BackgroundSource property when using an `AcrylicBrush`.
26+
Setting it to `Backdrop` results in the acrylic effect being applied to whatever is *behind the brush* in the application.
27+
28+
Setting BackgroundSource to `HostBackdrop` results in the acrylic effect being applied *behind the current application*.
29+
30+
## BackdropBlurBrush
31+
32+
A brush that blurs the background in the application.
33+
34+
> [!SAMPLE BackdropBlurBrushSample]
35+
36+
## BackdropGammaTransferBrush
37+
38+
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.
39+
40+
> [!SAMPLE BackdropGammaTransferBrushSample]
41+
42+
## BackdropInvertBrush
43+
44+
A brush that inverts the colors of the brush's background in the application.
45+
46+
> [!SAMPLE BackdropInvertBrushSample]
47+
48+
## BackdropSaturationBrush
49+
50+
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.
51+
52+
> [!SAMPLE BackdropSaturationBrushSample]
53+
54+
## BackdropSepiaBrush
55+
56+
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.
57+
58+
> [!SAMPLE BackdropSepiaBrushSample]
59+
60+
## ImageBlendBrush
61+
62+
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).
63+
64+
> [!SAMPLE ImageBlendBrushSample]
65+
66+
## TilesBrush
67+
68+
A brush can be used to display a tiled image as a background.
69+
70+
> [!SAMPLE TilesBrushSample]

‎components/Media/samples/Brushes/AcrylicBrushSample.xaml‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<Page x:Class="MediaExperiment.Samples.Brushes.AcrylicBrushSample"
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:media="using:CommunityToolkit.WinUI.Media"
7+
xmlns:ui="using:CommunityToolkit.WinUI"
8+
mc:Ignorable="d">
9+
10+
<StackPanel VerticalAlignment="Center"
11+
Spacing="32">
12+
<Grid>
13+
<!-- Background image -->
14+
<Image Height="400"
15+
Source="ms-appx:///Assets/Bloom.jpg" />
16+
<!-- Brush area -->
17+
<Border Width="550"
18+
Height="300"
19+
HorizontalAlignment="Center"
20+
VerticalAlignment="Center"
21+
BorderBrush="Black"
22+
BorderThickness=".5">
23+
<Border.Background>
24+
<media:AcrylicBrush BlurAmount="15"
25+
TintColor="Black"
26+
TintOpacity=".6" />
27+
</Border.Background>
28+
<!-- Foreground image -->
29+
<Image Height="100"
30+
VerticalAlignment="Center"
31+
Source="ms-appx:///Assets/BrushAssets/Trex.png" />
32+
</Border>
33+
</Grid>
34+
</StackPanel>
35+
</Page>

‎components/Media/samples/Brushes/AcrylicBrushSample.xaml.cs‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
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 CommunityToolkit.WinUI.Media;
6+
7+
namespace MediaExperiment.Samples.Brushes;
8+
9+
[ToolkitSample(id: nameof(AcrylicBrushSample), "AcrylicBrush", description: $"A sample for showing how to apply a {nameof(CommunityToolkit.WinUI.Media.AcrylicBrush)} effect to a background.")]
10+
public sealed partial class AcrylicBrushSample : Page
11+
{
12+
public AcrylicBrushSample()
13+
{
14+
this.InitializeComponent();
15+
}
16+
}

‎components/Media/samples/Brushes/BackdropBlurBrushSample.xaml‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<Page x:Class="MediaExperiment.Samples.Brushes.BackdropBlurBrushSample"
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:media="using:CommunityToolkit.WinUI.Media"
7+
xmlns:ui="using:CommunityToolkit.WinUI"
8+
mc:Ignorable="d">
9+
10+
<StackPanel VerticalAlignment="Center"
11+
Spacing="32">
12+
<Grid>
13+
<!-- Background image -->
14+
<Image Height="400"
15+
Source="ms-appx:///Assets/Bloom.jpg" />
16+
<!-- Brush area -->
17+
<Border Width="550"
18+
Height="300"
19+
HorizontalAlignment="Center"
20+
VerticalAlignment="Center"
21+
BorderBrush="Black"
22+
BorderThickness=".5">
23+
<Border.Background>
24+
<media:BackdropBlurBrush Amount="5.0" />
25+
</Border.Background>
26+
</Border>
27+
<!-- Foreground image -->
28+
<Image Height="100"
29+
VerticalAlignment="Center"
30+
Source="ms-appx:///Assets/BrushAssets/Trex.png" />
31+
</Grid>
32+
</StackPanel>
33+
</Page>

‎components/Media/samples/Brushes/BackdropBlurBrushSample.xaml.cs‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
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 CommunityToolkit.WinUI.Media;
6+
7+
namespace MediaExperiment.Samples.Brushes;
8+
9+
[ToolkitSample(id: nameof(BackdropBlurBrushSample), "BackdropBlurBrush", description: $"A sample that uses a {nameof(BackdropBlurBrush)} to blur whatever is behind the application.")]
10+
public sealed partial class BackdropBlurBrushSample : Page
11+
{
12+
public BackdropBlurBrushSample()
13+
{
14+
this.InitializeComponent();
15+
}
16+
}

‎components/Media/samples/Brushes/BackdropGammaTransferBrushSample.xaml‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<Page x:Class="MediaExperiment.Samples.Brushes.BackdropGammaTransferBrushSample"
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:media="using:CommunityToolkit.WinUI.Media"
7+
xmlns:ui="using:CommunityToolkit.WinUI"
8+
mc:Ignorable="d">
9+
10+
<StackPanel VerticalAlignment="Center"
11+
Spacing="32">
12+
<Grid>
13+
<!-- Background image -->
14+
<Image Height="400"
15+
Source="ms-appx:///Assets/Bloom.jpg" />
16+
<!-- Brush area -->
17+
<Border Width="550"
18+
Height="300"
19+
HorizontalAlignment="Center"
20+
VerticalAlignment="Center"
21+
BorderBrush="Black"
22+
BorderThickness=".5">
23+
<Border.Background>
24+
<media:BackdropGammaTransferBrush AlphaOffset=".2"
25+
RedAmplitude="10" />
26+
</Border.Background>
27+
</Border>
28+
</Grid>
29+
</StackPanel>
30+
</Page>

‎components/Media/samples/Brushes/BackdropGammaTransferBrushSample.xaml.cs‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
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 CommunityToolkit.WinUI.Media;
6+
7+
namespace MediaExperiment.Samples.Brushes;
8+
9+
[ToolkitSample(id: nameof(BackdropGammaTransferBrushSample), "BackdropGammaTransferBrush", description: $"A sample for showing how to apply a {nameof(CommunityToolkit.WinUI.Media.BackdropGammaTransferBrush)} effect to a background.")]
10+
public sealed partial class BackdropGammaTransferBrushSample : Page
11+
{
12+
public BackdropGammaTransferBrushSample()
13+
{
14+
this.InitializeComponent();
15+
}
16+
}

0 commit comments

Comments
 (0)