<img src="https://user-images.githubusercontent.com/7021835/83192114-f2d39c80-a0e9-11ea-807a-b1e8bb17bcf8.png" alt="CompositionProToolkit"></img>

What's new in v1.0.1?

CompositioProToolkit v1.0.1 is built using Windows Insider SDK 18362 and is based on Microsoft.NETCore.UniversalWindowsPlatform v6.2.1. The project is split into two Nuget packages

• CompositionProToolkit - contains the core helper classes for Composition and Win2d.
• CompositionProToolkit.Controls - contains UI controls made using Composition.

Table of Contents

• What's new in v1.0.1?
• Table of Contents
• Installing from NuGet
• CompositionProToolkit Internals
  • 1. Rendering Surfaces
  • 2. Creating custom shaped Visual using CanvasGeometry
    • Using IMaskSurface
      • Example
    • Using IGeometrySurface
  • 3. Creating Masked Backdrop Brush using IMaskSurface
  • 4. Creating a Frosted Glass Effect Brush using IMaskSurface
  • 5. Creating a blurred mask using IGaussianMaskSurface
  • 6. Loading Images on Visual using IImageSurface
    • ImageSurfaceOptions
    • Example
  • 7. Using the Alpha values of an Image to create an IImageMaskSurface
  • 8. Creating the Reflection of a ContainerVisual
  • 9. Creating Composition Geometry
  • 10. Custom Cubic Bezier Easing Functions
  • 11. Composition and Win2d Mini Path Language
• CompositionProToolkit Expressions
• Win2d Helpers
  • ICanvasStroke and CanvasStroke
  • CanvasDrawingSession extension methods
  • Win2d Mini Language specification
  • Parsing Win2d Mini Language with CanvasObject
    • Color
      • From Hexadecimal Color String or High Dynamic Range Color String
      • From High Dynamic Range Color string
    • CanvasGeometry
    • ICanvasBrush
    • CanvasStrokeStyle
    • ICanvasStroke
  • CanvasPathBuilder extension methods
  • Creating a Squircle
  • Creating multilayer Vector shapes with CanvasElement
• CompositionProToolkit Controls
  • 1. FluidWrapPanel
  • 2. FluidToggleSwitch
  • 3. ColorShadow
  • 4. FluidBanner
  • 5. ImageFrame
    • ImageFrame Source
    • ImageFrame Transitions
    • Guidelines for Disposing ImageFrame effectively
  • 6. FrostedGlass
  • 7. ProfileControl
  • 8. FluidProgressRing
  • 9. ProgressRing3d
• Utility methods and Constants
  • ToSingle extension method
• Updates Chronology

CompositionProToolkit is a collection of helper classes for the Windows.UI.Composition namespace and the Win2d project. It also contains several controls which can be used in UWP applications.

Installing from NuGet

To install CompositionProToolkit, run the following command in the Package Manager Console

Install-Package CompositionProToolkit -Version 1.0.1

More details available here.

To install CompositionProToolkit.Controls, run the following command in the Package Manager Console

Install-Package CompositionProToolkit.Controls -Version 1.0.1

More details available here.

CompositionProToolkit Internals

1. Rendering Surfaces

CompositionProToolkit 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.
• IMaskSurface - 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.
• IGeometrySurface - This interface is used for rendering custom shaped geometries onto ICompositionSurface.
• 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

<img src="https://user-images.githubusercontent.com/7021835/82592865-67409580-9b56-11ea-83bd-70e0221d41f2.png" width='800'>

2. Creating custom shaped Visual using CanvasGeometry

As of now, you can customize the shape of Visuals by applying a mask on the Visual. The mask is defined using a CompositionMaskBrush. In the CompositionMaskBrush the Mask is defined by a CompositionSurfaceBrush. Into the CompositionSurfaceBrush, an image, which defines the mask, is loaded. In this image, the areas which are to masked in the Visual are transparent whereas the areas to be shown in the Visual are white.

Using CompositionProToolkit you can now define a mask for the Visual using Win2D's CanvasGeometry. First you need an object implementing the ICompositionGenerator interface. It can be obtained by the CreateCompositionGenerator() extension method of the Compositor. There are two APIS to obtain the CompositionGenerator - by providing a Compositor or by providing a CompositionGraphicDevice.

public static ICompositionGenerator GetCompositionGenerator(Compositor compositor,
    bool useSharedCanvasDevice = true, bool useSoftwareRenderer = false);
public static ICompositionGenerator GetCompositionGenerator(CompositionGraphicsDevice graphicsDevice);

The first API also has couple of optional parameters

• useSharedCanvasDevice - indicates whether the CompositionGenerator should use a shared CanvasDevice or creates a new one.
• useSoftwareRenderer - this parameter is provided as a argument when creating a new CanvasDevice (i.e. when usedSharedCanvasDevice is false).

Using IMaskSurface

Using the ICompositionGenerator an object implementing the IMaskSurface can be created. This object represents the mask that needs to be applied to the Visual using a CompositionMaskBrush.

The following API is provided in ICompositionGenerator to create a IMaskSurface

IMaskSurface CreateMaskSurface(Size size, CanvasGeometry geometry);
IMaskSurface CreateMaskSurface(Size size, CanvasGeometry geometry, Vector2 offset);

In this API, the provided geometry is filled with White color.

Example

The following code

// Get the Generator
var generator = compositor.CreateCompositionGenerator();

//Create the visual
var visual = compositor.CreateSpriteVisual();
visual.Size = new Vector2(400, 400);
visual.Offset = new Vector3(200, 0, 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 MaskSurface
var maskSurface = generator.CreateMaskSurface(visual.Size.ToSize(), combinedGeometry);

// Create SurfaceBrush from MaskSurface
var mask = compositor.CreateSurfaceBrush(maskSurface);
var source = compositor.CreateColorBrush(Colors.Blue);

// Create mask brush
var maskBrush = compositor.CreateMaskBrush();
maskBrush.Mask = mask;
maskBrush.Source = source;

visual.Brush = maskBrush;

creates the following output.

<img src="https://cloud.githubusercontent.com/assets/7021835/15728977/0f9f397a-2815-11e6-9df2-65b9ad1f5e9f.PNG" />

IMaskSurface provides the following APIs which allow you to update its geometry and size (and thus the shape of the Visual).

void Redraw();
void Redraw(CanvasGeometry geometry);
void Redraw(CanvasGeometry geometry, Vector2 offset);
void Redraw(Size size, CanvasGeometry geometry);
void Redraw(Size size, CanvasGeometry geometry, Vector2 offset);
void Resize(Size size);

Using IGeometrySurface

If you want to render CanvasGeometry with a stroke, fill color and a background color, you ha