Universal Windows Platform – Shade Effect

Shade Effect demonstrates how to create a Shadow Effect on an element – in this case it’s the Visual Studio logo. The Shadow Effect is triggered with Accept and cleared with Clear.

Step 1

If not already, follow Setup and Start on how to Install and get Started with Visual Studio 2017 or in Windows 10 choose Start, and then from the Start Menu find and select Visual Studio 2017.

Step 2

Once Visual Studio Community 2017 has started, from the Menu choose File, then New then Project…

Step 3

From New Project choose Visual C# from Installed, Templates then choose Blank App (Universal Windows) and then type in a Name and select a Location and then select Ok to create the Project

Step 4

Then in New Universal Windows Project you need to select the Target Version this should be at least the Windows 10, version 1803 (10.0; Build 17134) which is the April 2018 Update and the Minimum Version to be the same.

The Target Version will control what features your application can use in Windows 10 so by picking the most recent version you’ll be able to take advantage of those features. To make sure you always have the most recent version, in Visual Studio 2017 select Tools Extensions and Updates… then and then see if there are any Updates

Step 5

In the Solution Explorer select MainPage.xaml

Step 6

From the Menu choose View and then Designer

Step 7

The Design View will be displayed along with the XAML View and in this between the Grid and /Grid elements, enter the following XAML:

<Viewbox Margin="100">
	<Grid Height="400" Width="400">
		<Border x:Name="ShadowElement"/>
		<Path Name="Logo" Fill="#FF5c2d91" Stretch="Uniform"
		Data="M27.021,0l8.897,3.592v28.815L26.938,36L12.653,21.796l-9.061,7.021L0,27.021V8.979l3.592-1.714l9.061,7.102 
		L27.021,0z M3.592,12.653v10.939l5.388-5.551L3.592,12.653z M17.633,18.041l9.306,7.348V10.693L17.633,18.041z">
		</Path>
	</Grid>
</Viewbox>
<CommandBar VerticalAlignment="Bottom">
	<AppBarButton Icon="Accept" Label="Accept" Click="Accept_Click"/>
	<AppBarButton Icon="Cancel" Label="Clear" Click="Clear_Click"/>
</CommandBar>

The first block of XAML features a Viewbox which contains a Grid with a Border which will represent a Shadow for the Shade Effect and Path within which represents the Logo itself. The second block of XAML is is the CommandBar which contains Accept – to apply the Shade Effect to the Logo and Clear – to remove the Shade Effect from the Logo.

Step 8

From the Menu choose View and then Code

Step 9

Once in the Code View, below the end of public MainPage() { … } the following Code should be entered:

private Windows.UI.Composition.SpriteVisual _visual;

private Windows.UI.Composition.Compositor Compositor
{
	get
	{
		return Windows.UI.Xaml.Hosting.ElementCompositionPreview.GetElementVisual(Logo).Compositor;
	}
}

private void Accept_Click(object sender, RoutedEventArgs e)
{
	_visual = Compositor.CreateSpriteVisual();
	_visual.Size = new System.Numerics.Vector2((float)Logo.ActualWidth, (float)Logo.ActualHeight);
	Windows.UI.Composition.DropShadow shadow = Compositor.CreateDropShadow();
	shadow.Color = Windows.UI.Colors.Black;
	shadow.Offset = new System.Numerics.Vector3(10, 10, 0);
	shadow.Mask = Logo.GetAlphaMask();
	_visual.Shadow = shadow;
	Windows.UI.Xaml.Hosting.ElementCompositionPreview.SetElementChildVisual(ShadowElement, _visual);
}

private void Clear_Click(object sender, RoutedEventArgs e)
{
	_visual.Shadow = null;
}

There is a SpriteVisual Member and Compositor Property the Accept_Click Event Handler uses CreateSpriteVisual combine with DropShadow to set up a Drop Shadow that will form the Shade Effect which will be applied to the Shadow Property of the SpriteVisual and then will use the SetElementChildVisual Method to set the Border to be associated with the SpriteVisual. The Clear_Click Event Handler will set the SpriteVisual property of Shadow to null.

Step 10

That completes the Universal Windows Platform Application so Save the Project then in Visual Studio select the Local Machine to run the Application

Step 11

Once the Application has started running you can then select Accept to enable the Shade Effect or use Clear to remove the effect

Step 12

To Exit the Application select the Close button in the top right of the Application

This example uses the 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.