CompositionProToolkit Your New Windows.UI.Composition Helper
- Posted: Sep 21, 2016 at 6:00AM
Ratish Philip, whom we've highlighted before Adding a modern spark to your WPF apps, with WPFSpark, is back! This time with a very cool set of controls and helper classes for anyone doing UWP dev with Windows.UI.Composition.
Collection of Helper classes and controls (using Win2d) for Windows.UI.Composition
Table of Contents
- Installing from NuGet
- CompositionProToolkit Internals
- Rendering Surfaces
- Creating custom shaped
- Creating Masked Backdrop Brush using
- Creating a Frosted Glass Effect Brush using
- Loading Images on Visual using
- Creating the Reflection of a
- CompositionProToolkit Controls
- CompositionProToolkit Expressions
- Updates Chronology
CompositionProToolkit is a collection of helper classes for Windows.UI.Composition. It also contains controls which can be used in UWP applications. It has dependency on the Win2D and the CompositionExpressionToolkit libraries
1. Rendering Surfaces
CompositionProToolkit provides three types of rendering surface interfaces which can be used for creating mask, rendering custom shapes and 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.
- IGeometrySurface - This interface is used for rendering custom shaped geometries onto ICompositionSurface.
- IImageSurface - This interface is used for rendering images onto ICompositionSurface.
IMaskSurface, IGeometrySurface and IImageSurface derive from IRenderSurface. Here is the interface hierarchy
2. Creating custom shaped
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
Maskis 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 static class CompositionGeneratorFactory. There are two APIS to obtain the CompositionGenerator - by providing a Compositor or by providing a CompositionGraphicDevice.
3. Creating Masked Backdrop Brush using
CompositionProToolkit now provides the following extension method for Compositor to create a masked Backdrop brush.
Using this method, you can apply a BackdropBrush with a custom shape to a visual. You can provide a Color to blend with the BackdropBrush, the amount by which the BackdropBrush should be blurred and an optional CompositionBackdropBrush. If no CompositionBackdropBrush is provided by the user then this method creates one.
Note : Create only one instance of CompositionBackdropBrush and reuse it within your application. It provides a better performance.
4. Creating a Frosted Glass Effect Brush using
CompositionProToolkit now provides the following extension method for Compositor to create a Frosted Glass effect brush.
5. Loading Images on Visual using
IImageSurface is an interface which encapsulates a CompositionDrawingSurface onto which an image can be loaded by providing a Uri. You can then use the CompositionDrawingSurface to create a CompositionSurfaceBrush which can be applied to any Visual.
FluidProgressRing is a concept design for a modern version of the ProgressRing control in UWP. The ProgressRing control has remained the same since Windows 8 and it is high time it got a refresh. The FluidProgressRing consists of a set of small circles (nodes) rotating about a common center. Each node rotates until it hits the adjacent node (then it slows down to a stop). The adjacent node then rotates and hits the next node and this process continues. The animations are done using the Windows.UI.Composition APIs and provide a smooth look and feel.