CompositionProToolkit Your New Windows.UI.Composition Helper

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.

ratishphilip/CompositionProToolkit

image

Collection of Helper classes and controls (using Win2d) for Windows.UI.Composition

Table of Contents

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 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 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 IMaskSurface

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.

562d255c-32ea-11e6-8952-424a513741ea

...

4. Creating a Frosted Glass Effect Brush using IMaskSurface

CompositionProToolkit now provides the following extension method for Compositor to create a Frosted Glass effect brush.

...

5. Loading Images on Visual using IImageSurface

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.

image

...

CompositionProToolkit Controls

1. FluidProgressRing

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.

838f2eec-3f50-11e6-825c-20e07300339c

... [Click through to see them all]



Tags:

Follow the discussion

  • Oops, something didn't work.

    Getting subscription
    Subscribe to this conversation
    Unsubscribing
    Subscribing

No comments

Sorry, no comments have been submitted yet.

Please make a comment below or check back later.

Comment on the post

Already have a Channel 9 account? Please sign in