CompositionProToolkit v0.7 Released

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

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.
  • Track – 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

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.
  • 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! 🙂

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s