Universal Windows Platform – Tutorial Insider – Matrix Control

Standard

comentsys.wordpress.com today features a Universal Windows Platform tutorial showing how to create a Matrix Control to periodically display the current Time or Date.

Details

The Matrix.xaml User Control features a Grid within a ViewBox in the XAML View, then in the Code View there’s a byte[][] which represents the positions of elements to make up each Symbol or glyph for each number between 0 and 9 plus : and / – where 1 represents an element which will be visible and 0 represents an element which will not be visible. There’s a list of char to represent all the characters supported by the table of symbols, there’s values for the “columns”, “rows” and “size” of a Matrix element plus a byte[,] to represent the elements that will make up the full display.

There’s a helper method AsTwoDimensionalArray to convert a one-dimensional array used to represent a symbol in the “table” into a two-dimensional array – this is used by SetBoard which takes in a char[] of “characters” and sets the “board” to be have as many columns multiplied by how many characters there are and then using that helper method are applied to the correct position on the “board”. GetPixel returns a Rectangle with a given size and sets the “row” and “column” of this to the relevant ColumnProperty and RowProperty of a Grid. The Setup method then gets a Rectangle from the Grid and sets the Opacity based on the 1 and 0 values in the “board”, Layout then sets up the Display to have the correct number of rows and columns and then uses the GetPixel method to return the elements needed for the Display and sets the Height and Width. SetOutput is used to configure the Display and uses SetBoard to configure what to show and if the Length of the input changes then the Layout method is also called and is followed by call to Setup – this method is called when the Output is set.

In the MainPage.xaml there’s an event handler on the Display for a DispatcherTimer which will update the Display every 100 milliseconds and using a counter alternated between showing the current Time to showing the current Date.

Behind the Scenes

This example was based on the same idea and principle as a seven-segment display used in a previous example for a Digital Clock, but to extend this to a grid-like display and to extend that functionality to be able to display more than just the Time but the Date as well and this example demonstrates this and could be extended to show even more characters if needed. In order to create the glyphs or Symbols used in the example their layouts needed to be designed for the characters 0 – 9 plus : and /. The designs used * to represent what would become the 0, in the Table and # to represent the 1, in the Table – this was doing using Find-and-Replace based on the following designs for each glyph:

********
********
********
********
********
********
********

********
*######*
*##**##*
*##**##*
*##**##*
*######*
********

********
***##***
*####***
***##***
***##***
***##***
********

********
*######*
*****##*
*######*
*##*****
*######*
********

********
*######*
*****##*
*######*
*****##*
*######*
********

********
*##**##*
*##**##*
*######*
*****##*
*****##*
********

********
*######*
*##*****
*######*
*****##*
*######*
********

********
*######*
*##*****
*######*
*##**##*
*######*
********

********
*######*
*****##*
*****##*
*****##*
*****##*
********

********
*######*
*##**##*
*######*
*##**##*
*######*
********

********
*######*
*##**##*
*######*
*****##*
*######*
********

********
***##***
***##***
********
***##***
***##***
********

********
*****##*
****##**
***##***
**##****
*##*****
********

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 )

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