Universal Windows Platform – Tutorial Insider – Lights Control

Standard

comentsys.wordpress.com today features a Universal Windows Platform tutorial showing how to create a Lights Control to display indicator lights – in this case was used to display the sequence of lights for a UK Traffic Light.

Details

A User Control is created called Lights and the XAML View consists of a ItemsControl inside a ViewBox, the DataTemplate of this is a Grid with a two Ellipse elements – one has the Fill bound to a “Colour” property, and the other is filled with “Black” and the Visibility bound to a Off property. The ItemsPanelTemplate is set to a StackPanel with the Orientation bound to an “Orientation” property.

The Code View of the User Control consists of an Item Class with a flag to represent the “IsOn” and “Off” properties to control the state of the displayed elements and the “Colour” property to control the colour of the main Ellipse element – this Class implements the INotifyPropertyChanged event for updating the UI of the control. There’s an ObservableCollection of “Items” for the list of items and the Orientation property plus when the control is loaded the DataContext is set for bound elements.

Behind the Scenes

The control is used to cycle through the light sequence from a UK Traffic light to demonstrate the principle of using the lights and to show they update accordingly. This was based on an earlier example written for a Coding Club but was ideal to be expanded upon. Originally the example was going to be far more complex but the whole idea of these examples is to make it as simple as possible – as an introduction, however it could be expanded upon to display differently or as-is with more combinations of “lights” or appear more like traffic lights or even less like them to represent something else.

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