Universal Windows Platform – Light Effect

Light Effect demonstrates how to create a PointLight Effect on an element – in this case it’s the Visual Studio Logo and uses an animation to demonstrate the effect passing over the logo. The PointLight 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.

vs2017

Step 2

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

vs2017-file-new-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
vs2017-new-project-window

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.

vs2017-target-platform

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

vs2017-mainpage

Step 6

From the Menu choose View and then Designer

vs2017-view-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">
		<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 Path within which represents the Logo. The second block of XAML is is the CommandBar which contains Accept – to apply the Light Effect to the Logo and Clear – to remove the Light Effect from the Logo.

Step 8

From the Menu choose View and then Code

vs2017-view-code

Step 9

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

private Windows.UI.Composition.PointLight _light;

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

private void Accept_Click(object sender, RoutedEventArgs e)
{
	Windows.UI.Composition.Visual visual =
		Windows.UI.Xaml.Hosting.ElementCompositionPreview.GetElementVisual(Logo);
	_light = Compositor.CreatePointLight();
	_light.Color = Windows.UI.Colors.White;
	_light.CoordinateSpace = visual;
	_light.Targets.Add(visual);
	_light.Offset =
		new System.Numerics.Vector3(-(float)Logo.ActualWidth * 2, (float)Logo.ActualHeight / 2, (float)Logo.ActualHeight);
	Windows.UI.Composition.ScalarKeyFrameAnimation animation = Compositor.CreateScalarKeyFrameAnimation();
	animation.InsertKeyFrame(1, 2 * (float)Logo.ActualWidth);
	animation.Duration = TimeSpan.FromSeconds(5.0f);
	animation.IterationBehavior = Windows.UI.Composition.AnimationIterationBehavior.Forever;
	_light.StartAnimation("Offset.X", animation);
}

private void Clear_Click(object sender, RoutedEventArgs e)
{
	if (_light != null)
	{
		_light.Targets.RemoveAll();
	}
}

There is a PointLight Member and Compositor Property the Accept_Click Event Handler uses GetElementVisual to get the Logo to apply the effect to then the PointLight is set up, a ScalarKeyFrameAnimation Animation is set up which will “move” the PointLight across the Logo. The Clear_Click Event Handler will use RemoveAll to clear the Light Effect, it also has a null check to prevent a NullReferenceException

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

vs2017-local-machine

Step 11

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

uwp-ran-light-effect

Step 12

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

vs2017-close

This example uses the Composition features in Windows 10 available since the November and Anniversary updates, in this case it uses a PointLight. The first thing to do is to get the Visual which is the Visual Studio logo then a Compositor is used which is based on this to create a point light with a given colour – in the example it’s White then the CoordinateSpace is set to the Visual that defines the bounds for the point light and the Targets is set to to logo plus an Offset is then set. An animation is set up which wil cause the point light to seem to pass over the logo and this happens in a loop.

Creative Commons License

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