Skip to content

Added documentation for Render Surface brushes. #564

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

Open
wants to merge 9 commits into
base: main
Choose a base branch
from
Open

Added documentation for Render Surface brushes. #564

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
e9fd965
Added documentation for Render Surface brushes.
ratishphilip Sep 12, 2021
9db4cc7
Added additional documentation
ratishphilip Sep 12, 2021
a95ede6
Updated TOC.
ratishphilip Sep 12, 2021
b4666fe
Updated TOC
ratishphilip Sep 12, 2021
89e08ee
Fixed doc errors.
ratishphilip Sep 13, 2021
db4931e
Fixed additional doc errors.
ratishphilip Sep 13, 2021
2145774
updated documentation with fixes.
ratishphilip Sep 13, 2021
3c216d7
Fixed warnings.
ratishphilip Sep 13, 2021
5d12dd0
fixed blockquote warning.
ratishphilip Sep 13, 2021
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
73 changes: 73 additions & 0 deletions docs/brushes/GeometryMaskSurfaceBrush.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
---
title: GeometryMaskSurfaceBrush
author: ratishphilip
description: A composition brush that paints an area by creating a mask defined by the provided geometry.
keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, brush, Win2D, composition
---

# GeometryMaskSurfaceBrush

The [GeometryMaskSurfaceBrush](/dotnet/api/microsoft.toolkit.uwp.ui.media.geometrymasksurfacebrush) is a [Brush](/uwp/api/windows.ui.xaml.media.brush) that uses a [CanvasCoreGeometry](/dotnet/api/microsoft.toolkit.uwp.ui.media.geometry.canvascoregeometry) to paint an area.

> [!div class="nextstepaction"]
> [Try it in the sample app](uwpct://Brushes?sample=GeometryMaskSurfaceBrush)

## Syntax

```xaml
<Grid>
<Grid.Background>
<media:GeometryMaskSurfaceBrush BlurRadius="0"
OffsetX="0"
OffsetY="0"
SurfaceHeight="600"
SurfaceWidth="899.25">
<media:GeometryMaskSurfaceBrush.Target>
<media:ImageSurfaceBrush Source="ms-appx:///Assets/Photos/SpeedTripleAtristsPoint.jpg"
SurfaceHeight="600"
SurfaceWidth="899.25" />
</media:GeometryMaskSurfaceBrush.Target>
<media:GeometryMaskSurfaceBrush.Mask>
<geometry:CanvasRoundedRectangleGeometry Width="200"
Height="200"
RadiusX="30"
RadiusY="30" />
</media:GeometryMaskSurfaceBrush.Mask>
</media:GeometryMaskSurfaceBrush>
</Grid.Background>
</Grid>
```

## Example Image

![Geometry Mask Surface brush](../resources/images/Brushes/GeometryMaskSurfaceBrush.jpg 'Geometry Mask Surface Brush')

## Properties

| Property | Type | Description |
| ---------- | -------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
| Target | [RenderCanvasBrushBase](/dotnet/api/microsoft.toolkit.uwp.ui.media.rendercanvasbrushbase) | The Render Surface Brush on which the mask is applied. |
| Mask | [CanvasCoreGeometry](/dotnet/api/microsoft.toolkit.uwp.ui.media.geometry.canvascoregeometry) | The geometry that is used to create the mask. |
| OffsetX | double | The offset on the x-axis from the top left corner of the Brush Surface where the Geometry is rendered. |
| OffsetY | double | The offset on the y-axis from the top left corner of the Brush Surface where the Geometry is rendered. |
| BlurRadius | double | The radius of the Gaussian blur to be applied on the mask. |

## Sample Project

[GeometryMaskSurfaceBrush sample page Source](https://github.com/windows-toolkit/WindowsCommunityToolkit/tree/rel/7.1.0/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/GeometryMaskSurfaceBrush). You can [see this in action](uwpct://Brushes?sample=GeometryMaskSurfaceBrush) in the [Windows Community Toolkit Sample App](https://aka.ms/windowstoolkitapp).

## Requirements

| Device family | Universal, 10.0.17134.0 or higher |
| ------------- | ------------------------------------------------------------------------------------------------ |
| Namespace | Microsoft.Toolkit.Uwp.UI.Media |
| NuGet package | [Microsoft.Toolkit.Uwp.UI.Media](https://www.nuget.org/packages/Microsoft.Toolkit.Uwp.UI.Media/) |

## API

- [GeometryMaskSurfaceBrush source code](https://github.com/windows-toolkit/WindowsCommunityToolkit/blob/rel/7.0.0/Microsoft.Toolkit.Uwp.UI.Media/Brushes/GeometryMaskSurfaceBrush.cs)

## Related Topics

- [Render Surfaces](RenderSurfaces.md)
- [XamlCompositionBrushBase Examples](/uwp/api/windows.ui.xaml.media.xamlcompositionbrushbase#examples)
87 changes: 87 additions & 0 deletions docs/brushes/GeometrySurfaceBrush.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
---
title: GeometrySurfaceBrush
author: ratishphilip
description: A composition brush that paints an area defined by the provided geometry.
keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, brush, Win2D, composition
---

# GeometrySurfaceBrush

The [GeometrySurfaceBrush](/dotnet/api/microsoft.toolkit.uwp.ui.media.geometrysurfacebrush) is a [Brush](/uwp/api/windows.ui.xaml.media.brush) that uses a [CanvasCoreGeometry](/dotnet/api/microsoft.toolkit.uwp.ui.media.geometry.canvascoregeometry) to paint an area.

> [!div class="nextstepaction"]
> [Try it in the sample app](uwpct://Brushes?sample=GeometrySurfaceBrush)

## Syntax

```xaml
<Grid>
<Grid.Background>
<media:GeometrySurfaceBrush x:Name="surfaceBrush"
StrokeThickness="15"
SurfaceHeight="800"
SurfaceWidth="800">
<media:GeometrySurfaceBrush.RenderStrokeStyle>
<geometry:StrokeStyle />
</media:GeometrySurfaceBrush.RenderStrokeStyle>
<media:GeometrySurfaceBrush.Stroke>
<media:SolidColorCanvasBrush Color="Blue" />
</media:GeometrySurfaceBrush.Stroke>
<media:GeometrySurfaceBrush.FillBrush>
<media:SolidColorCanvasBrush Color="Yellow" />
</media:GeometrySurfaceBrush.FillBrush>
<media:GeometrySurfaceBrush.Geometry>
<geometry:CanvasCombinedGeometry GeometryCombineMode="Exclude">
<geometry:CanvasCombinedGeometry.Geometry1>
<geometry:CanvasPathGeometry Data="F1 M 417.661,109.978 L 508.676,294.396 L 751.683,329.707 L 575.842,501.110 L 610.607,703.805 C 613.366,719.893 596.479,732.162 582.031,724.566 L 400.000,628.867 L 217.969,724.566 C 203.521,732.162 186.634,719.893 189.393,703.805 L 224.158,501.110 L 48.317,329.707 L 291.324,294.396 L 382.339,109.978 C 389.564,95.341 410.436,95.341 417.661,109.978 Z" />
</geometry:CanvasCombinedGeometry.Geometry1>
<geometry:CanvasCombinedGeometry.Geometry2>
<geometry:CanvasRoundedRectangleGeometry x:Name="MaskGeometry2"
Width="200"
Height="200"
RadiusX="30"
RadiusY="30"
X="300"
Y="350" />
</geometry:CanvasCombinedGeometry.Geometry2>
</geometry:CanvasCombinedGeometry>
</media:GeometrySurfaceBrush.Geometry>
</media:GeometrySurfaceBrush>
</Grid.Background>
</Grid>
```

## Example Image

![Geometry Surface brush](../resources/images/Brushes/GeometrySurfaceBrush.jpg 'Geometry Surface Brush')

## Properties

| Property | Type | Description |
| ----------------- | -------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
| BackgroundBrush | [RenderCanvasBrushBase](/dotnet/api/microsoft.toolkit.uwp.ui.media.rendercanvasbrushbase) | The Canvas brush with which the background of the brush surface will be rendered. |
| FillBrush | [RenderCanvasBrushBase](/dotnet/api/microsoft.toolkit.uwp.ui.media.rendercanvasbrushbase) | The Canvas brush that is used to fill the Geometry. |
| Geometry | [CanvasCoreGeometry](/dotnet/api/microsoft.toolkit.uwp.ui.media.geometry.canvascoregeometry) | The geometry that is used to paint the surface of the brush. |
| Stroke | [RenderCanvasBrushBase](/dotnet/api/microsoft.toolkit.uwp.ui.media.rendercanvasbrushbase) | The Canvas brush that is used to render the outlining stroke of the Geometry. |
| RenderStrokeStyle | [StrokeStyle](/dotnet/api/microsoft.toolkit.uwp.ui.media.geometry.strokestyle)] | The style of the outline of the geometry. |
| StrokeThickness | double | The thickness of the outline of the geometry. |

## Sample Project

[GeometrySurfaceBrush sample page Source](https://github.com/windows-toolkit/WindowsCommunityToolkit/tree/rel/7.1.0/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/GeometrySurfaceBrush). You can [see this in action](uwpct://Brushes?sample=GeometrySurfaceBrush) in the [Windows Community Toolkit Sample App](https://aka.ms/windowstoolkitapp).

## Requirements

| Device family | Universal, 10.0.17134.0 or higher |
| ------------- | ------------------------------------------------------------------------------------------------ |
| Namespace | Microsoft.Toolkit.Uwp.UI.Media |
| NuGet package | [Microsoft.Toolkit.Uwp.UI.Media](https://www.nuget.org/packages/Microsoft.Toolkit.Uwp.UI.Media/) |

## API

- [GeometrySurfaceBrush source code](https://github.com/windows-toolkit/WindowsCommunityToolkit/blob/rel/7.0.0/Microsoft.Toolkit.Uwp.UI.Media/Brushes/GeometrySurfaceBrush.cs)

## Related Topics

- [Render Surfaces](RenderSurfaces.md)
- [XamlCompositionBrushBase Examples](/uwp/api/windows.ui.xaml.media.xamlcompositionbrushbase#examples)
103 changes: 103 additions & 0 deletions docs/brushes/ImageMaskSurfaceBrush.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
---
title: ImageMaskSurfaceBrush
author: ratishphilip
description: A composition brush that paints an area by creating a mask defined by the provided image.
keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, brush, Win2D, composition
---

# ImageMaskSurfaceBrush

The [ImageMaskSurfaceBrush](/dotnet/api/microsoft.toolkit.uwp.ui.media.imagemasksurfacebrush) is a [Brush](/uwp/api/windows.ui.xaml.media.brush) that uses an Image to create a mask to be applied on a [RenderSurfaceBrushBase](/dotnet/api/microsoft.toolkit.uwp.ui.media.rendersurfacebrushbase) derivative.

> [!div class="nextstepaction"]
> [Try it in the sample app](uwpct://Brushes?sample=ImageMaskSurfaceBrush)

## Syntax

```xaml
<Grid x:Name="MaskGrid"
Grid.Row="1">
<Grid.Background>
<media:ImageSurfaceBrush x:Name="MaskImageBrush"
Source="ms-appx:///SamplePages/ImageMaskSurfaceBrush/MaskImage1.png"
SurfaceHeight="600"
SurfaceWidth="600">
<media:ImageSurfaceBrush.ImageOptions>
<media:ImageSurfaceOptions HorizontalAlignment="Center"
VerticalAlignment="Center"
Stretch="Uniform" />
</media:ImageSurfaceBrush.ImageOptions>
</media:ImageSurfaceBrush>
</Grid.Background>
</Grid>
<Grid x:Name="TargetGrid"
Grid.Row="1"
Grid.Column="1">
<Grid.Background>
<media:ImageSurfaceBrush x:Name="TargetImageBrush"
Source="ms-appx:///Assets/Photos/PaintedHillsPathway.jpg"
SurfaceHeight="600"
SurfaceWidth="600">
<media:ImageSurfaceBrush.ImageOptions>
<media:ImageSurfaceOptions HorizontalAlignment="Center"
VerticalAlignment="Center"
Stretch="Uniform" />
</media:ImageSurfaceBrush.ImageOptions>
</media:ImageSurfaceBrush>
</Grid.Background>
</Grid>
<Grid Grid.Row="2"
Grid.ColumnSpan="2">
<Grid.Background>
<media:ImageMaskSurfaceBrush x:Name="ImageMaskBrush"
Padding="30"
Mask="{Binding ElementName=MaskImageBrush, Path=Source}"
SurfaceHeight="600"
SurfaceWidth="600">
<media:ImageMaskSurfaceBrush.ImageOptions>
<media:ImageSurfaceOptions x:Name="MaskImageOptions"
BlurRadius="5" />
</media:ImageMaskSurfaceBrush.ImageOptions>
<media:ImageMaskSurfaceBrush.Target>
<media:ImageSurfaceBrush x:Name="MaskTargetImageBrush"
Source="{Binding ElementName=TargetImageBrush, Path=Source}"
SurfaceHeight="800"
SurfaceWidth="800" />
</media:ImageMaskSurfaceBrush.Target>
</media:ImageMaskSurfaceBrush>
</Grid.Background>
</Grid>
```

## Example Image

![Image Mask Surface brush](../resources/images/Brushes/ImageMaskSurfaceBrush.jpg 'Image Mask Surface Brush')

## Properties

| Property | Type | Description |
| ------------ | ----------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Target | [RenderCanvasBrushBase](/dotnet/api/microsoft.toolkit.uwp.ui.media.rendercanvasbrushbase) | The Render Surface Brush on which the mask is applied. |
| Mask | [RenderCanvasBrushBase](/dotnet/api/microsoft.toolkit.uwp.ui.media.rendercanvasbrushbase) | URI of the image (in string format) which is used to create the mask. |
| ImageOptions | [ImageSurfaceOptions](/dotnet/api/microsoft.toolkit.uwp.ui.media.imagesurfaceoptions) | Additional options to configure the image used to create the mask for the brush. |
| Padding | Thickness | The padding between the outer bounds of the brush and the bounds of the area where the mask, created from the loaded image's alpha values, should be rendered. |

## Sample Project

[ImageMaskSurfaceBrush sample page Source](https://github.com/windows-toolkit/WindowsCommunityToolkit/tree/rel/7.1.0/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ImageMaskSurfaceBrush). You can [see this in action](uwpct://Brushes?sample=ImageMaskSurfaceBrush) in the [Windows Community Toolkit Sample App](https://aka.ms/windowstoolkitapp).

## Requirements

| Device family | Universal, 10.0.17134.0 or higher |
| ------------- | ------------------------------------------------------------------------------------------------ |
| Namespace | Microsoft.Toolkit.Uwp.UI.Media |
| NuGet package | [Microsoft.Toolkit.Uwp.UI.Media](https://www.nuget.org/packages/Microsoft.Toolkit.Uwp.UI.Media/) |

## API

- [ImageMaskSurfaceBrush source code](https://github.com/windows-toolkit/WindowsCommunityToolkit/blob/rel/7.0.0/Microsoft.Toolkit.Uwp.UI.Media/Brushes/ImageMaskSurfaceBrush.cs)

## Related Topics

- [Render Surfaces](RenderSurfaces.md)
- [XamlCompositionBrushBase Examples](/uwp/api/windows.ui.xaml.media.xamlcompositionbrushbase#examples)
Loading