Universal Windows Platform – Tutorial Insider – Shade Effect

Standard

Overview

comentsys.wordpress.com today features a Universal Windows Platform tutorial showing a Shade Effect. This allows you to create a Drop Shadow effect on an element – in this case it’s the Visual Studio logo. The shade effect is triggered with Accept and cleared with Clear.

Details

This tutorial uses the new Composition features in Windows 10 available since the November and Anniversary updates and makes use of a SpriteVisual. The first thing to do is to get the SpriteVisual which is the Visual Studio logo then a Compositor is used to create a DropDhadow with a given colour – in the example it’s Black then the Offset is set which is sets the position of the effect and then there’s the Mask that defines the part of the Shade Effect that won’t be in Shadow. The SpriteVisual then has a Child Visual Element set to be the DropShadow.

Behind the Scenes

Drop Shadows are a useful way of creating visual emphasis and make elements stand out – it’s clear before and after the Shade Effect is applied how much of a difference it makes to the the Visual Studio logo. There’s a new design system from Microsoft that was announced in May 2017 which makes good use of the Composition features like using DropShadow so is a useful to thing to learn for the future.

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s