diff --git a/docs/brushes/GeometryMaskSurfaceBrush.md b/docs/brushes/GeometryMaskSurfaceBrush.md new file mode 100644 index 000000000..890196ae5 --- /dev/null +++ b/docs/brushes/GeometryMaskSurfaceBrush.md @@ -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 + + + + + + + + + + + + +``` + +## 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) diff --git a/docs/brushes/GeometrySurfaceBrush.md b/docs/brushes/GeometrySurfaceBrush.md new file mode 100644 index 000000000..383c45b9c --- /dev/null +++ b/docs/brushes/GeometrySurfaceBrush.md @@ -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 + + + + + + + + + + + + + + + + + + + + + + + + + +``` + +## 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) diff --git a/docs/brushes/ImageMaskSurfaceBrush.md b/docs/brushes/ImageMaskSurfaceBrush.md new file mode 100644 index 000000000..1b7a41aec --- /dev/null +++ b/docs/brushes/ImageMaskSurfaceBrush.md @@ -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 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` + +## 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) diff --git a/docs/brushes/ImageSurfaceBrush.md b/docs/brushes/ImageSurfaceBrush.md new file mode 100644 index 000000000..57f853753 --- /dev/null +++ b/docs/brushes/ImageSurfaceBrush.md @@ -0,0 +1,64 @@ +--- +title: ImageSurfaceBrush +author: ratishphilip +description: A composition brush that paints an area using the provided image. +keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, brush, Win2D, composition +--- + +# ImageSurfaceBrush + +The [ImageSurfaceBrush](/dotnet/api/microsoft.toolkit.uwp.ui.media.imagesurfacebrush) is a [Brush](/uwp/api/windows.ui.xaml.media.brush) that uses a image to paint an area. + +> [!div class="nextstepaction"] +> [Try it in the sample app](uwpct://Brushes?sample=ImageSurfaceBrush) + +## Syntax + +```xaml + + + + + + + + + +``` + +## Example Image + +![Image Surface brush](../resources/images/Brushes/ImageSurfaceBrush.jpg 'Image Surface Brush') + +## Properties + +| Property | Type | Description | +| ------------ | ------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | +| Background | Color | The color that is rendered in the transparent areas of the Image. The default value is Colors.Transparent. | +| Source | object | The object representing the image source. | +| ImageOptions | [ImageSurfaceOptions](/dotnet/api/microsoft.toolkit.uwp.ui.media.imagesurfaceoptions) | Additional options to configure the image used to create the brush. | + +## Sample Project + +[ImageSurfaceBrush sample page Source](https://github.com/windows-toolkit/WindowsCommunityToolkit/tree/rel/7.1.0/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ImageSurfaceBrush). You can [see this in action](uwpct://Brushes?sample=ImageSurfaceBrush) 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 + +- [ImageSurfaceBrush source code](https://github.com/windows-toolkit/WindowsCommunityToolkit/blob/rel/7.0.0/Microsoft.Toolkit.Uwp.UI.Media/Brushes/ImageSurfaceBrush.cs) + +## Related Topics + +- [Render Surfaces](RenderSurfaces.md) +- [XamlCompositionBrushBase Examples](/uwp/api/windows.ui.xaml.media.xamlcompositionbrushbase#examples) diff --git a/docs/brushes/ImageSurfaceOptions.md b/docs/brushes/ImageSurfaceOptions.md new file mode 100644 index 000000000..2a7d69b5b --- /dev/null +++ b/docs/brushes/ImageSurfaceOptions.md @@ -0,0 +1,38 @@ +--- +title: ImageSurfaceOptions +author: ratishphilip +description: A class encapsulating a set of properties which influence the rendering of the image on an ImageSurface or ImageSurfaceBrush. +keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, brush, Win2D, composition +--- + +# ImageSurfaceOptions + +The [ImageSurfaceOptions](/dotnet/api/microsoft.toolkit.uwp.ui.media.imagesurfaceoptions) class encapsulates a set of properties which influence the rendering of the image on the ImageSurface. + +## Properties + +| Property | Type | Description | Possible Values | +| ---------------------- | ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | +| AutoResize | bool | Specifies whether the surface should resize itself automatically to match the loaded image size. When set to true, the Stretch, HorizontalAlignment and VerticalAlignment options are ignored. | false | +| BlurRadius | double | The radius of the Gaussian blur to be applied to the IImageMaskSurface. This property is not used by IImageSurface. | Any positive double value. | +| HorizontalAlignment | AlignmentX | Describes how image is positioned horizontally in the ImageSurface. | Left, Center, Right | +| Interpolation | CanvasImageInterpolation | Specifies the interpolation used to render the image on the ImageSurface. | NearestNeighbor, Linear, Cubic, MultiSampleLinear, Anisotropic, HighQualityCubic | +| Opacity | float | Specifies the opacity of the rendered image. | 0 - 1f inclusive | +| Stretch | Stretch | Describes how image is resized to fill its allocated space. | None, Uniform, Fill, UniformToFill | +| SurfaceBackgroundColor | Color | Specifies the color which will be used to fill the ImageSurface before rendering the image. | All possible values that can be created. | +| VerticalAlignment | AlignmentY | Describes how image is positioned vertically in the ImageSurface. | Top, Center, Bottom | + +Here is how the image is aligned on the Visual based on the **HorizontalAlignment** and **VerticalAlignment** properties + +![Image Alignment](../resources/images/Surface/ImageSurfaceOptions_Alignment.png 'Alignment of image on the Image Surface') + +## 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 + +- [ImageSurfaceOptions source code](https://github.com/windows-toolkit/WindowsCommunityToolkit/blob/rel/7.0.0/Microsoft.Toolkit.Uwp.UI.Media/Surface/ImageSurfaceOptions.cs) diff --git a/docs/brushes/LinearGradientCanvasBrush.md b/docs/brushes/LinearGradientCanvasBrush.md new file mode 100644 index 000000000..66f80e106 --- /dev/null +++ b/docs/brushes/LinearGradientCanvasBrush.md @@ -0,0 +1,25 @@ +--- +title: LinearGradientCanvasBrush +author: ratishphilip +description: XAML equivalent of Win2d's CanvasLinearGradientBrush class which paints in linear gradient. +keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, brush, Win2D, composition +--- + +# LinearGradientCanvasBrush + +The [LinearGradientCanvasBrush](/dotnet/api/microsoft.toolkit.uwp.ui.media.lineargradientcanvasbrush) is the XAML equivalent of Win2d's CanvasLinearGradientBrush class which paints in linear gradient. This brush is primarily used by the Render Surface Brushes. + +> [!div class="nextstepaction"] + +## Properties + +| Property | Type | Description | +| ---------------------- | ---------------------- | ---------------------------------------------------------------------------------------------------- | +| AlphaMode | CanvasAphaMode | Gets or sets the way in which the Alpha channel affects color channels. | +| BufferPrecision | CanvasBufferPrecision | Gets or sets the precision used for computation. | +| EdgeBehavior | CanvasEdgeBehavior | Gets or sets the behavior of the pixels which fall outside of the gradient's typical rendering area. | +| EndPoint | Point | Gets or sets the point on the Canvas where the gradient stops. | +| PostInterpolationSpace | CanvasColorSpace | Gets or sets the the color space to be used after interpolation. | +| PreInterpolationSpace | CanvasColorSpace | Gets or sets the the color space to be used before interpolation. | +| StartPoint | Point | Gets or sets the point on the Canvas where the gradient starts. | +| Stops | GradientStopCollection | Gets or sets the gradient stops that comprise the brush. | diff --git a/docs/brushes/RadialGradientCanvasBrush.md b/docs/brushes/RadialGradientCanvasBrush.md new file mode 100644 index 000000000..4263bb6fb --- /dev/null +++ b/docs/brushes/RadialGradientCanvasBrush.md @@ -0,0 +1,29 @@ +--- +title: RadialGradientCanvasBrush +author: ratishphilip +description: XAML equivalent of Win2d's CanvasRadialGradientBrush class which paints in radial gradient. +keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, brush, Win2D, composition +--- + +# RadialGradientCanvasBrush + +The [RadialGradientCanvasBrush](/dotnet/api/microsoft.toolkit.uwp.ui.media.radialgradientcanvasbrush) is the XAML equivalent of Win2d's CanvasRadialGradientBrush class which paints in radial gradient. This brush is primarily used by the Render Surface Brushes. + +> [!div class="nextstepaction"] + +## Properties + +| Property | Type | Description | +| ---------------------- | ---------------------- | ---------------------------------------------------------------------------------------------------- | +| AlphaMode | CanvasAphaMode | Gets or sets the way in which the Alpha channel affects color channels. | +| BufferPrecision | CanvasBufferPrecision | Gets or sets the precision used for computation. | +| Center | Point | Gets or sets the center of the brush's radial gradient. | +| EdgeBehavior | CanvasEdgeBehavior | Gets or sets the behavior of the pixels which fall outside of the gradient's typical rendering area. | +| EndPoint | Point | Gets or sets the point on the Canvas where the gradient stops. | +| OriginOffset | Point | Gets or sets the displacement from Center, used to form the brush's radial gradient. | +| PostInterpolationSpace | CanvasColorSpace | Gets or sets the the color space to be used after interpolation. | +| PreInterpolationSpace | CanvasColorSpace | Gets or sets the the color space to be used before interpolation. | +| StartPoint | Point | Gets or sets the point on the Canvas where the gradient starts. | +| RadiusX | double | Gets or sets the horizontal radius of the brush's radial gradient. | +| RadiusY | double | Gets or sets the vertical radius of the brush's radial gradient. | +| Stops | GradientStopCollection | Gets or sets the gradient stops that comprise the brush. | diff --git a/docs/brushes/RenderCanvasBrushBase.md b/docs/brushes/RenderCanvasBrushBase.md new file mode 100644 index 000000000..efc22134d --- /dev/null +++ b/docs/brushes/RenderCanvasBrushBase.md @@ -0,0 +1,23 @@ +--- +title: RenderCanvasBrushBase +author: ratishphilip +description: Provides an abstract base class used to create XAML equivalent of Win2d brushes. +keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, brush, Win2D, composition +--- + +# RenderCanvasBrushBase + +The [RenderCanvasBrushBase](/dotnet/api/microsoft.toolkit.uwp.ui.media.rendercanvasbrushbase) is an abstract base class for SolidColorCanvasBrush, LinearGradientCanvasBrush and RadialGradientCanvasBrush which are XAML equivalents of Win2d brushes. + +> [!div class="nextstepaction"] + +## Properties + +| Property | Type | Description | +| --------- | --------------- | ------------------------------------------ | +| Opacity | double | The opacity of the brush. | +| Transform | MatrixTransform | The transform matrix applied to the brush. | + +Here is the interface hierarchy + +![Render Canvas Brush Hierarchy](../resources/images/Surface/RenderCanvasBrushHierarchy.png 'Render Canvas Brush Hierarchy') diff --git a/docs/brushes/RenderSurfaceBrushBase.md b/docs/brushes/RenderSurfaceBrushBase.md new file mode 100644 index 000000000..901979edb --- /dev/null +++ b/docs/brushes/RenderSurfaceBrushBase.md @@ -0,0 +1,20 @@ +--- +title: RenderSurfaceBrushBase +author: ratishphilip +description: Provides an abstract base class used to create XAML brushes that paint an area with a CompositionBrush. +keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, brush, Win2D, composition +--- + +# RenderSurfaceBrushBase + +The [RenderSurfaceBrushBase](/dotnet/api/microsoft.toolkit.uwp.ui.media.rendersurfacebrushbase) is an abstract base class used to create XAML brushes (mainly Render Surface Brushes) that paint an area with a CompositionBrush. + +> [!div class="nextstepaction"] + +## Properties + +| Property | Type | Description | +| ------------- | ---------------- | ------------------------------------- | +| Brush | CompositionBrush | Gets the associated CompositionBrush. | +| SurfaceHeight | double | The height of the Brush Surface. | +| SurfaceWidth | double | The width of the Brush Surface. | diff --git a/docs/brushes/RenderSurfaces.md b/docs/brushes/RenderSurfaces.md new file mode 100644 index 000000000..2a0297679 --- /dev/null +++ b/docs/brushes/RenderSurfaces.md @@ -0,0 +1,478 @@ +--- +title: Render Surfaces +author: ratishphilip +description: Detailed description about creating custom shaped visuals using various render surfaces. +keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, brush, Win2D, composition +--- + +# Render Surfaces + +Windows Community Toolkit provides five types of rendering surface interfaces which can be used for rendering custom shapes and images or creating masks from geometric shapes or images. + +- _`IRenderSurface`_ - This interface acts as the base interface for interfaces which render to the `ICompositionSurface`. It mainly contains references to an `ICompositionGenerator` object and an `ICompositionSurface` object which are the core objects required for rendering any geometry or image onto a `ICompositionSurface`. +- _`IGeometrySurface`_ - This interface is used for rendering custom shaped geometries onto `ICompositionSurface`. +- _`IGeometryMaskSurface`_ - This interface is used for rendering custom shaped geometries onto `ICompositionSurface` so that they can be useds as masks on Composition Visuals. +- _`IGaussianMaskSurface`_ - This interface derives from `IMaskSurface` and is used for rendering custom shaped geometries onto `ICompositionSurface` so that they can be useds as masks on Composition Visuals. You can apply a Gaussian Blur to the mask. +- _`IImageSurface`_ - This interface is used for rendering images onto `ICompositionSurface`. +- _`IImageMaskSurface`_ - This interface is used for creating a mask using the alpha values of the image pixels. + +Here is the interface hierarchy + +![Image Mask Surface brush](../resources/images/Surface/RenderSurfacesHierarchy.png 'Image Mask Surface Brush') + +Most of the APIs to create custom shaped surfaces are provided by the `CompositionGenerator` class. + +## Creating a custom shaped Visual + +### Using IGeometrySurface + +![Geometry Surface](../resources/images/Surface/GeometrySurface.jpg 'Rendering using Geometry Surface') + +```cs +var compositor = Window.Current.Compositor; + +// Get the Composition Generator +var generator = CompositionGenerator.Instance; + +// Create the visual +var visual = compositor.CreateSpriteVisual(); +visual.Size = new Vector2(400, 400); +visual.Offset = new Vector3(50, 50, 0); + +// Create the combined geometry +var ellipse1 = CanvasGeometry.CreateEllipse(generator.Device, 200, 200, 150, 75); +var ellipse2 = CanvasGeometry.CreateEllipse(generator.Device, 200, 200, 75, 150); +var combinedGeometry = ellipse1.CombineWith(ellipse2, Matrix3x2.Identity, CanvasGeometryCombine.Union); + +// Create the Geometry Surface filled with red color +var geometrySurface = generator.CreateGeometrySurface(visual.Size.ToSize(), combinedGeometry, Colors.Red); + +// Create the brush from the geometry surface +var brush = compositor.CreateSurfaceBrush(geometrySurface); + +// Apply the brush to the visual +visual.Brush = brush; + +ElementCompositionPreview.SetElementChildVisual(RenderGrid, visual); +``` + +### Using Animated Geometry Surface + +![Animated Geometry Surface](../resources/images/Surface/AnimatedGeometrySurface.gif 'Rendering using Animated Geometry Surface') + +Event though the visuals can be animated using CompositionAnimation, to animate the geometry, we need to manually calculate the intermediate values and update them periodically. Calling the Redraw method of the IGeometrySurface instance will cause the brush to be refreshed. Therefore you need to create the brush only once. In order to get a smooth animation, here Win2d's CanvasAnimatedControl is used, whose Draw event is fired at 60 fps. + +```cs +private CanvasGeometry _geometry; +private IGeometrySurface _animatedGeometrySurface; +private float _angle = 0; + +private void CreateAnimatedGeometrySurface() +{ + var compositor = Window.Current.Compositor; + + // Get the Composition Generator + var generator = CompositionGenerator.Instance; + + // Create the visual + var visual = compositor.CreateSpriteVisual(); + visual.Size = new Vector2(400, 400); + visual.Offset = new Vector3(50, 50, 0); + + // Create the combined geometry + var ellipse1 = CanvasGeometry.CreateEllipse(generator.Device, 200, 200, 150, 75); + var ellipse2 = CanvasGeometry.CreateEllipse(generator.Device, 200, 200, 75, 150); + _geometry = ellipse1.CombineWith(ellipse2, Matrix3x2.Identity, CanvasGeometryCombine.Union); + + // Create the Geometry Surface filled with red color + _animatedGeometrySurface = generator.CreateGeometrySurface(visual.Size.ToSize(), _geometry, Colors.Red); + + // Create the brush from the geometry surface + var brush = compositor.CreateSurfaceBrush(_animatedGeometrySurface); + + // Apply the brush to the visual + visual.Brush = brush; + + ElementCompositionPreview.SetElementChildVisual(AnimatedCanvas, visual); +} + +/// +/// Handler for the Draw event of CanvasAnimatedControl. +/// +/// CanvasAnimatedControl. +/// CanvasAnimatedDrawEventArgs. +private void OnDraw(ICanvasAnimatedControl sender, CanvasAnimatedDrawEventArgs args) +{ + _angle = (_angle + 0.5f) % 360f; + var angleInRadians = _angle * (float)Math.PI / 180f; + var transform = Matrix3x2.CreateRotation(angleInRadians, new Vector2(200, 200)); + var geometry = _geometry?.Transform(transform); + _animatedGeometrySurface?.Redraw(geometry); +} +``` + +### Using IGeometryMaskSurface + +![Geometry Mask Surface](../resources/images/Surface/GeometryMaskSurface.jpg 'Rendering using Geometry Mask Surface') + +This example consists of a ContainerVisual which has two SpriteVisuals as children. The SpriteVisual in the background is filled with blue color. The brush applied to the foreground SpriteVisual is created using an IGeometryMaskSurface. + +```cs +var compositor = Window.Current.Compositor; + +// Get the Composition Generator +var generator = CompositionGenerator.Instance; + +// Create the container visual to hold all visuals +var container = compositor.CreateContainerVisual(); +container.Size = new Vector2(400, 400); +container.Offset = new Vector3(50, 50, 0); + +// Create the background visual +var bgVisual = compositor.CreateSpriteVisual(); +bgVisual.Size = new Vector2(200, 200); +bgVisual.Offset = new Vector3(100, 100, 0); +bgVisual.Brush = compositor.CreateColorBrush(Colors.Blue); + +// Create the foreground visual +var visual = compositor.CreateSpriteVisual(); +visual.Size = new Vector2(400, 400); + +// Create the combined geometry +var ellipse1 = CanvasGeometry.CreateEllipse(generator.Device, 200, 200, 150, 75); +var ellipse2 = CanvasGeometry.CreateEllipse(generator.Device, 200, 200, 75, 150); +var combinedGeometry = ellipse1.CombineWith(ellipse2, Matrix3x2.Identity, CanvasGeometryCombine.Union); +var rectGeometry = CanvasGeometry.CreateRectangle(generator.Device, new Rect(0, 0, 400, 400)); +var finalGeometry = rectGeometry.CombineWith(combinedGeometry, Matrix3x2.Identity, CanvasGeometryCombine.Exclude); + +// Create the MaskSurface +var maskSurface = generator.CreateGeometryMaskSurface(visual.Size.ToSize(), finalGeometry); + +// Create SurfaceBrush from MaskSurface +var mask = compositor.CreateSurfaceBrush(maskSurface); +var source = compositor.CreateColorBrush(Colors.Red); + +// Create mask brush +var maskBrush = compositor.CreateMaskBrush(); +maskBrush.Mask = mask; +maskBrush.Source = source; + +// Apply the brush to the visual +visual.Brush = maskBrush; + +// Add the visuals to the container +container.Children.InsertAtBottom(bgVisual); +container.Children.InsertAtTop(visual); + +ElementCompositionPreview.SetElementChildVisual(RenderGrid, container); +``` + +### Using Animated Geometry Mask Surface + +![Animated Geometry Mask Surface](../resources/images/Surface/AnimatedGeometryMaskSurface.gif 'Rendering using Animated Geometry Mask Surface') + +Similar to the animated Geometry Surface example above, here also a CanvasAnimatedControl's Draw event is used to update the IGeometryMaskSurface to refresh the brush. + +```cs +private CanvasGeometry _geometry; +private CanvasGeometry _rectGeometry; +private IGeometryMaskSurface _animatedGeometryMaskSurface; +private float _angle = 0; + +private void CreateAnimatedGeometryMaskSurface() +{ + var compositor = Window.Current.Compositor; + + // Get the Composition Generator + var generator = CompositionGenerator.Instance; + + // Create the container visual to hold all visuals + var container = compositor.CreateContainerVisual(); + container.Size = new Vector2(400, 400); + container.Offset = new Vector3(50, 50, 0); + + // Create the background visual + var bgVisual = compositor.CreateSpriteVisual(); + bgVisual.Size = new Vector2(200, 200); + bgVisual.Offset = new Vector3(100, 100, 0); + bgVisual.Brush = compositor.CreateColorBrush(Colors.Blue); + + // Create the foreground visual + var visual = compositor.CreateSpriteVisual(); + visual.Size = new Vector2(400, 400); + + // Create the combined geometry + var ellipse1 = CanvasGeometry.CreateEllipse(generator.Device, 200, 200, 150, 75); + var ellipse2 = CanvasGeometry.CreateEllipse(generator.Device, 200, 200, 75, 150); + _geometry = ellipse1.CombineWith(ellipse2, Matrix3x2.Identity, CanvasGeometryCombine.Union); + _rectGeometry = CanvasGeometry.CreateRectangle(generator.Device, new Rect(0, 0, 400, 400)); + var finalGeometry = _rectGeometry.CombineWith(_geometry, Matrix3x2.Identity, CanvasGeometryCombine.Exclude); + + // Create the MaskSurface + _animatedGeometryMaskSurface = generator.CreateGeometryMaskSurface(visual.Size.ToSize(), finalGeometry); + + // Create SurfaceBrush from MaskSurface + var mask = compositor.CreateSurfaceBrush(_animatedGeometryMaskSurface); + var source = compositor.CreateColorBrush(Colors.Red); + + // Create mask brush + var maskBrush = compositor.CreateMaskBrush(); + maskBrush.Mask = mask; + maskBrush.Source = source; + + // Apply the brush to the visual + visual.Brush = maskBrush; + + // Add the visuals to the container + container.Children.InsertAtBottom(bgVisual); + container.Children.InsertAtTop(visual); + + ElementCompositionPreview.SetElementChildVisual(AnimatedCanvas, container); +} + +/// +/// Handler for the Draw event of CanvasAnimatedControl. +/// +/// CanvasAnimatedControl. +/// CanvasAnimatedDrawEventArgs. +private void OnDraw(ICanvasAnimatedControl sender, CanvasAnimatedDrawEventArgs args) +{ + _angle = (_angle + 0.5f) % 360f; + var angleInRadians = _angle * (float)Math.PI / 180f; + var transform = Matrix3x2.CreateRotation(angleInRadians, new Vector2(200, 200)); + var geometry = _geometry?.Transform(transform); + _animatedGeometryMaskSurface?.Redraw(_rectGeometry.CombineWith(_geometry, transform, CanvasGeometryCombine.Exclude)); +} +``` + +### Masked Backdrop Brush + +To create a masked backdrop brush, you can use either of the following Compositor extension methods + +```cs +public static CompositionEffectBrush CreateMaskedBackdropBrush(this Compositor compositor, IGeometryMaskSurface mask, Color blendColor, float blurAmount, CompositionBackdropBrush backdropBrush = null); +public static CompositionEffectBrush CreateGaussianMaskedBackdropBrush(this Compositor compositor, IGaussianMaskSurface mask, Color blendColor, float blurRadius, CompositionBackdropBrush backdropBrush = null); +``` + +![Masked Backdrop Brush](../resources/images/Surface/MaskedBackdropBrush.jpg 'Masked Backdrop Brush') + +The above example can be created using the following code + +```cs +var compositor = Window.Current.Compositor; + +// Get the Composition Generator +var generator = CompositionGenerator.Instance; + +// Create the container visual to hold all visuals +var container = compositor.CreateContainerVisual(); +container.Size = new Vector2(400, 400); +container.Offset = new Vector3(50, 50, 0); + +// Create the background visual +var bgVisual = compositor.CreateSpriteVisual(); +bgVisual.Size = new Vector2(200, 200); +bgVisual.Offset = new Vector3(100, 100, 0); +bgVisual.Brush = compositor.CreateColorBrush(Colors.Red); + +// Create the foreground visual +var visual = compositor.CreateSpriteVisual(); +visual.Size = new Vector2(400, 400); + +// Create the combined geometry +var ellipse1 = CanvasGeometry.CreateEllipse(generator.Device, 200, 200, 150, 75); +var ellipse2 = CanvasGeometry.CreateEllipse(generator.Device, 200, 200, 75, 150); +var combinedGeometry = ellipse1.CombineWith(ellipse2, Matrix3x2.Identity, CanvasGeometryCombine.Union); +var rectGeometry = CanvasGeometry.CreateRoundedRectangle(generator.Device, new Rect(0, 0, 400, 400), 20, 20); +var finalGeometry = rectGeometry.CombineWith(combinedGeometry, Matrix3x2.Identity, CanvasGeometryCombine.Exclude); + +// Create the MaskedBackdropSurfaceBrush +var maskSurface = generator.CreateGeometryMaskSurface(visual.Size.ToSize(), finalGeometry); +var maskedBackdropSurfaceBrush = compositor.CreateMaskedBackdropBrush(maskSurface, Colors.AntiqueWhite, 20, compositor.CreateBackdropBrush()); + +// Apply the brush to the visual +visual.Brush = maskedBackdropSurfaceBrush; + +// Add the visuals to the container +container.Children.InsertAtBottom(bgVisual); +container.Children.InsertAtTop(visual); + +ElementCompositionPreview.SetElementChildVisual(RenderGrid, container); +``` + +### Animated Masked Backdrop Brush + +Just like the animated GeometrySurface and animated GeometryMaskSurface, the MaskedBackdropBrush can also be animated. + +![Animated Masked Backdrop Brush](../resources/images/Surface/AnimatedMaskedBackdropBrush.gif 'Animated Masked Backdrop Brush') + +```cs +private CanvasGeometry _geometry; +private CanvasGeometry _rectGeometry; +private IGeometryMaskSurface _animatedGeometryMaskSurface; +private float _angle = 0; + +private void CreateAnimatedMaskedBackdropSurface() +{ + var compositor = Window.Current.Compositor; + + // Get the Composition Generator + var generator = CompositionGenerator.Instance; + + // Create the container visual to hold all visuals + var container = compositor.CreateContainerVisual(); + container.Size = new Vector2(400, 400); + container.Offset = new Vector3(50, 50, 0); + + // Create the background visual + var bgVisual = compositor.CreateSpriteVisual(); + bgVisual.Size = new Vector2(200, 200); + bgVisual.Offset = new Vector3(100, 100, 0); + bgVisual.Brush = compositor.CreateColorBrush(Colors.Blue); + + // Create the foreground visual + var visual = compositor.CreateSpriteVisual(); + visual.Size = new Vector2(400, 400); + + // Create the combined geometry + var ellipse1 = CanvasGeometry.CreateEllipse(generator.Device, 200, 200, 150, 75); + var ellipse2 = CanvasGeometry.CreateEllipse(generator.Device, 200, 200, 75, 150); + _geometry = ellipse1.CombineWith(ellipse2, Matrix3x2.Identity, CanvasGeometryCombine.Union); + _rectGeometry = CanvasGeometry.CreateRectangle(generator.Device, new Rect(0, 0, 400, 400)); + var finalGeometry = _rectGeometry.CombineWith(_geometry, Matrix3x2.Identity, CanvasGeometryCombine.Exclude); + + // Create the MaskSurface + _animatedGeometryMaskSurface = generator.CreateGeometryMaskSurface(visual.Size.ToSize(), finalGeometry); + var maskedBackdropSurfaceBrush = compositor.CreateMaskedBackdropBrush(_animatedGeometryMaskSurface, Colors.AntiqueWhite, 20, compositor.CreateBackdropBrush()); + + // Apply the brush to the visual + visual.Brush = maskedBackdropSurfaceBrush; + + // Add the visuals to the container + container.Children.InsertAtBottom(bgVisual); + container.Children.InsertAtTop(visual); + + ElementCompositionPreview.SetElementChildVisual(AnimatedCanvas, container); +} + +/// +/// Handler for the Draw event of CanvasAnimatedControl. +/// +/// CanvasAnimatedControl. +/// CanvasAnimatedDrawEventArgs. +private void OnDraw(ICanvasAnimatedControl sender, CanvasAnimatedDrawEventArgs args) +{ + _angle = (_angle + 0.5f) % 360f; + var angleInRadians = _angle * (float)Math.PI / 180f; + var transform = Matrix3x2.CreateRotation(angleInRadians, new Vector2(200, 200)); + var geometry = _geometry?.Transform(transform); + _animatedGeometryMaskSurface?.Redraw(_rectGeometry.CombineWith(_geometry, transform, CanvasGeometryCombine.Exclude)); +} +``` + +### Using GaussianMaskSurface + +![Gaussian Mask Surface Brush](../resources/images/Surface/GaussianMaskSurface.gif 'Gaussian Mask Surface Brush') + +```cs +var compositor = Window.Current.Compositor; + +// Get the Composition Generator +var generator = CompositionGenerator.Instance; + +var size = new Vector2(400, 400); + +// Create the image visual +var imageVisual = compositor.CreateSpriteVisual(); +imageVisual.Size = size; +var imageSurface = await generator.CreateImageSurfaceAsync(new Uri("ms-appx:///Assets/Images/cat.png"), size.ToSize(), ImageSurfaceOptions.Default); +imageVisual.Brush = compositor.CreateSurfaceBrush(imageSurface); +ElementCompositionPreview.SetElementChildVisual(ImageGrid, imageVisual); + +// Create the mask visual +var maskVisual = compositor.CreateSpriteVisual(); +maskVisual.Size = size; + +// Create the combined geometry +var ellipse1 = CanvasGeometry.CreateEllipse(generator.Device, 200, 200, 150, 75); +var ellipse2 = CanvasGeometry.CreateEllipse(generator.Device, 200, 200, 75, 150); +var combinedGeometry = ellipse1.CombineWith(ellipse2, Matrix3x2.Identity, CanvasGeometryCombine.Union); + +ElementCompositionPreview.SetElementChildVisual(MaskGrid, maskVisual); + +// Create SurfaceBrush from MaskSurface +var outputVisual = compositor.CreateSpriteVisual(); +outputVisual.Size = size; + +var maskedBrush = compositor.CreateMaskBrush(); +maskedBrush.Source = imageVisual.Brush; +var gaussianSurface = generator.CreateGaussianMaskSurface(size.ToSize(), combinedGeometry, Vector2.Zero, 0); +maskedBrush.Mask = compositor.CreateSurfaceBrush(gaussianSurface); + +maskVisual.Brush = compositor.CreateSurfaceBrush(gaussianSurface); +outputVisual.Brush = maskedBrush; + +ElementCompositionPreview.SetElementChildVisual(OutputGrid, outputVisual); +``` + +### Using ImageSurface + +![Image Surface Brush](../resources/images/Surface/ImageSurface.jpg 'Image Surface Brush') + +```cs +var compositor = Window.Current.Compositor; + +// Get the Composition Generator +var generator = CompositionGenerator.Instance; + +var size = new Vector2(400, 400); + +// Create the image visual +var sourceImageVisual = compositor.CreateSpriteVisual(); +sourceImageVisual.Size = size; +var sourceImageSurface = await generator.CreateImageSurfaceAsync(new Uri("ms-appx:///Assets/Images/cat.png"), size.ToSize(), ImageSurfaceOptions.Default); +sourceImageVisual.Brush = compositor.CreateSurfaceBrush(sourceImageSurface); +ElementCompositionPreview.SetElementChildVisual(ImageGrid, sourceImageVisual); +``` + +### Using ImageMaskSurface + +![Image Mask Surface Brush](../resources/images/Surface/ImageMaskSurface.gif 'Image Mask Surface Brush') + +```cs +var compositor = Window.Current.Compositor; + +// Get the Composition Generator +var generator = CompositionGenerator.Instance; + +var size = new Vector2(400, 400); + +// Create the image visual +var sourceImageVisual = compositor.CreateSpriteVisual(); +sourceImageVisual.Size = size; +var sourceImageSurface = await generator.CreateImageSurfaceAsync(new Uri("ms-appx:///Assets/Images/cat.png"), size.ToSize(), ImageSurfaceOptions.Default); +sourceImageVisual.Brush = compositor.CreateSurfaceBrush(sourceImageSurface); +ElementCompositionPreview.SetElementChildVisual(ImageGrid, sourceImageVisual); + +// Create the mask visual +var maskVisual = compositor.CreateSpriteVisual(); +maskVisual.Size = size; + +// Create the image mask surface from source image surface +var imageMaskSurface = generator.CreateImageMaskSurface(sourceImageSurface, size.ToSize(), new Thickness(5), ImageSurfaceOptions.GetDefaultImageMaskOptionsForBlur(10)); + +ElementCompositionPreview.SetElementChildVisual(MaskGrid, maskVisual); + +// Create SurfaceBrush from MaskSurface +var outputVisual = compositor.CreateSpriteVisual(); +outputVisual.Size = size; + +var maskedBrush = compositor.CreateMaskBrush(); +maskedBrush.Source = sourceImageVisual.Brush; +maskedBrush.Mask = compositor.CreateSurfaceBrush(imageMaskSurface); + +maskVisual.Brush = compositor.CreateSurfaceBrush(imageMaskSurface); +outputVisual.Brush = maskedBrush; + +ElementCompositionPreview.SetElementChildVisual(OutputGrid, outputVisual); +``` diff --git a/docs/brushes/SolidColorCanvasBrush.md b/docs/brushes/SolidColorCanvasBrush.md new file mode 100644 index 000000000..ed0b7344d --- /dev/null +++ b/docs/brushes/SolidColorCanvasBrush.md @@ -0,0 +1,18 @@ +--- +title: SolidColorCanvasBrush +author: ratishphilip +description: XAML equivalent of Win2d's CanvasSolidColorBrush class which paints in solid color. +keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, brush, Win2D, composition +--- + +# SolidColorCanvasBrush + +The [SolidColorCanvasBrush](/dotnet/api/microsoft.toolkit.uwp.ui.media.solidcolorcanvasbrush) is the XAML equivalent of Win2d's CanvasSolidColorBrush class which paints in solid color. This brush is primarily used by the Render Surface Brushes. + +> [!div class="nextstepaction"] + +## Properties + +| Property | Type | Description | +| -------- | ----- | ------------------------------------ | +| Color | Color | Gets or sets the color of the brush. | diff --git a/docs/resources/images/Brushes/GeometryMaskSurfaceBrush.jpg b/docs/resources/images/Brushes/GeometryMaskSurfaceBrush.jpg new file mode 100644 index 000000000..379601947 Binary files /dev/null and b/docs/resources/images/Brushes/GeometryMaskSurfaceBrush.jpg differ diff --git a/docs/resources/images/Brushes/GeometrySurfaceBrush.jpg b/docs/resources/images/Brushes/GeometrySurfaceBrush.jpg new file mode 100644 index 000000000..9c95b1f78 Binary files /dev/null and b/docs/resources/images/Brushes/GeometrySurfaceBrush.jpg differ diff --git a/docs/resources/images/Brushes/ImageMaskSurfaceBrush.jpg b/docs/resources/images/Brushes/ImageMaskSurfaceBrush.jpg new file mode 100644 index 000000000..f076cef3e Binary files /dev/null and b/docs/resources/images/Brushes/ImageMaskSurfaceBrush.jpg differ diff --git a/docs/resources/images/Brushes/ImageSurfaceBrush.jpg b/docs/resources/images/Brushes/ImageSurfaceBrush.jpg new file mode 100644 index 000000000..34ab6a3c8 Binary files /dev/null and b/docs/resources/images/Brushes/ImageSurfaceBrush.jpg differ diff --git a/docs/resources/images/Surface/AnimatedGeometryMaskSurface.gif b/docs/resources/images/Surface/AnimatedGeometryMaskSurface.gif new file mode 100644 index 000000000..ed853e0bb Binary files /dev/null and b/docs/resources/images/Surface/AnimatedGeometryMaskSurface.gif differ diff --git a/docs/resources/images/Surface/AnimatedGeometrySurface.gif b/docs/resources/images/Surface/AnimatedGeometrySurface.gif new file mode 100644 index 000000000..87bd91811 Binary files /dev/null and b/docs/resources/images/Surface/AnimatedGeometrySurface.gif differ diff --git a/docs/resources/images/Surface/AnimatedMaskedBackdropBrush.gif b/docs/resources/images/Surface/AnimatedMaskedBackdropBrush.gif new file mode 100644 index 000000000..70cdce15e Binary files /dev/null and b/docs/resources/images/Surface/AnimatedMaskedBackdropBrush.gif differ diff --git a/docs/resources/images/Surface/GaussianMaskSurface.gif b/docs/resources/images/Surface/GaussianMaskSurface.gif new file mode 100644 index 000000000..031e69fb7 Binary files /dev/null and b/docs/resources/images/Surface/GaussianMaskSurface.gif differ diff --git a/docs/resources/images/Surface/GeometryMaskSurface.jpg b/docs/resources/images/Surface/GeometryMaskSurface.jpg new file mode 100644 index 000000000..8a2ec3c36 Binary files /dev/null and b/docs/resources/images/Surface/GeometryMaskSurface.jpg differ diff --git a/docs/resources/images/Surface/GeometrySurface.jpg b/docs/resources/images/Surface/GeometrySurface.jpg new file mode 100644 index 000000000..e461cda31 Binary files /dev/null and b/docs/resources/images/Surface/GeometrySurface.jpg differ diff --git a/docs/resources/images/Surface/ImageMaskSurface.gif b/docs/resources/images/Surface/ImageMaskSurface.gif new file mode 100644 index 000000000..bc8db2c67 Binary files /dev/null and b/docs/resources/images/Surface/ImageMaskSurface.gif differ diff --git a/docs/resources/images/Surface/ImageSurface.jpg b/docs/resources/images/Surface/ImageSurface.jpg new file mode 100644 index 000000000..33d3f1d50 Binary files /dev/null and b/docs/resources/images/Surface/ImageSurface.jpg differ diff --git a/docs/resources/images/Surface/ImageSurfaceOptions_Alignment.png b/docs/resources/images/Surface/ImageSurfaceOptions_Alignment.png new file mode 100644 index 000000000..8da80c585 Binary files /dev/null and b/docs/resources/images/Surface/ImageSurfaceOptions_Alignment.png differ diff --git a/docs/resources/images/Surface/MaskedBackdropBrush.jpg b/docs/resources/images/Surface/MaskedBackdropBrush.jpg new file mode 100644 index 000000000..7832e0f98 Binary files /dev/null and b/docs/resources/images/Surface/MaskedBackdropBrush.jpg differ diff --git a/docs/resources/images/Surface/RenderCanvasBrushHierarchy.png b/docs/resources/images/Surface/RenderCanvasBrushHierarchy.png new file mode 100644 index 000000000..213f10852 Binary files /dev/null and b/docs/resources/images/Surface/RenderCanvasBrushHierarchy.png differ diff --git a/docs/resources/images/Surface/RenderSurfacesHierarchy.png b/docs/resources/images/Surface/RenderSurfacesHierarchy.png new file mode 100644 index 000000000..34cf3964e Binary files /dev/null and b/docs/resources/images/Surface/RenderSurfacesHierarchy.png differ diff --git a/docs/toc.md b/docs/toc.md index 79b1e7bc4..03c4b4736 100644 --- a/docs/toc.md +++ b/docs/toc.md @@ -1,4 +1,5 @@ + # [Windows Community Toolkit Documentation](index.md) # Setup @@ -269,12 +270,34 @@ ### [BackdropSepiaBrush](brushes/BackdropSepiaBrush.md) +### [GeometryMaskSurfaceBrush](brushes/GeometryMaskSurfaceBrush.md) + +### [GeometrySurfaceBrush](brushes/GeometrySurfaceBrush.md) + ### [ImageBlendBrush](brushes/ImageBlendBrush.md) +### [ImageSurfaceBrush](brushes/ImageSurfaceBrush.md) + +### [ImageMaskSurfaceBrush](brushes/ImageMaskSurfaceBrush.md) + +### [ImageSurfaceOptions](brushes/ImageSurfaceOptions.md) + +### [LinearGradientCanvasBrush](brushes/LinearGradientCanvasBrush.md) + ### [PipelineBrush](brushes/PipelineBrush.md) ### [PipelineVisualFactory](brushes/PipelineVisualFactory.md) +### [RadialGradientCanvasBrush](brushes/RadialGradientCanvasBrush.md) + +### [RenderCanvasBrushBase](brushes/RenderCanvasBrushBase.md) + +### [RenderSurfaces](brushes/RenderSurfaces.md) + +### [RenderSurfaceBrushBase](brushes/RenderSurfaceBrushBase.md) + +### [SolidColorCanvasBrush](brushes/SolidColorCanvasBrush.md) + ### [TilesBrush](brushes/TilesBrush.md) ## Helpers