This update of CompositionProToolkit brings a breaking change and introduces two new controls which are completely written using Composition APIs.

Breaking Change : CompositionGeneratorFactory is deprecated!

CompositionGeneratorFactory class has been deprecated and removed. Now you can use the Compositor‘s CreateCompositionGenerator() method to instantiate the CompositionGenerator.

var generator = compositor.CreateCompositionGenerator();

FluidToggleSwitch

FluidToggleSwitch is a toggleswitch control which uses Composition Visuals to render its components and provides a richer look and feel to the ToggleSwitch control. There are three primary components within the ToggleSwitch

Background – The outermost circular area.

– The outermost circular area. Track – The pill shaped area.

– The pill shaped area. Thumb – The innermost circular area.

The reason FluidToggleSwitch is encapsulated with a circular background component is because the hit area for a touch input is normally circular.

The following properties allow you to customize the FluidToggleSwitch

Dependency Property Type Description Default Value ActiveColor Color Gets or sets the Color of the FluidToggleSwitch in Checked state. #4cd964 InactiveColor Color Gets or sets the Color of the FluidToggleSwitch in Unchecked state. #dfdfdf DisabledColor Color Gets or sets the Color of the FluidToggleSwitch in Disabled state. #eaeaea

The above properties define the color of the Background component. The color of the Track component is derived automatically from the above properties. The color of the Thumb is white.

ProfileControl

ProfileControl allows you to display an image (normally a user profile image) in an intuitive way. This control is mainly implemented using Composition Visuals and animations which provide a rich user experience. Depending on the width and height of the ProfileControl, its shape can be either circular or elliptical. There are two main components within the ProfileControl

Background Visual – The outermost circular or elliptical area. This area is filled with the CompositionBackdropBrush which blends the control with whatever is rendered beneath the control.

– The outermost circular or elliptical area. This area is filled with the CompositionBackdropBrush which blends the control with whatever is rendered beneath the control. Image Visual – The innermost circular or elliptical area. This area renders the image provided.

The following properties allow you to customize the ProfileControl

Dependency Property Type Description Default Value BlurRadius Double Gets or sets the amount by which the brush of the Background Visual must be blurred. 20.0 BorderGap Double Gets or sets the uniform gap between the Background visual and the Image visual. 10.0 FluidReveal Boolean Indicates whether the reveal animation should automatically be played when the Source property of the ProfileControl changes. If set to False, the image specified by the Source property is displayed directly without any animation. True RevealDuration TimeSpan Gets or sets the duration of the reveal animation. 1 sec Source Uri Gets or sets the Uri of the image to be displayed in the ProfileControl. null Stretch Stretch Indicates how the image content is resized to fill its allocated space in the Image Visual. Stretch.Uniform Tint Color Gets or sets the color overlay on the background of the ProfileControl. Colors.White

I shall provide more details into how these controls were implemented using Composition APIs in my next post.

Source Code, Nuget & Documentation

Happy Coding! 🙂