Universal Windows Platform – Tutorial Insider – Stacked Control


comentsys.wordpress.com today features a Universal Windows Platform tutorial showing how to create a Stacked Control to display values in the form of a horizontal stacked bar chart – in this case displaying the first few values of the Fibonacci sequence.


The User Control is based off a Grid for the XAML View, then in the Code View there’s a list of Color for the colour palette and double for the values. The Percentages method converts the values into a list of percentages out of the total of all the values. The GetRectangle method takes a Colour and int parameter which sets the Fill of a Rectangle and the Grid.ColumnProperty. Layout uses Percentages to get those values then for each of those gets a GridLength of that value then an item is added to the Grid with GetRectangle and there’s two properties to represent “Palette” and “Items” – the latter uses Layout when it is set.

Behind the Scenes

This control is used to display some of the Fibonacci numbers as an example and has a basic colour palette set which the example uses to set how many item to add to the chart. This was a straightforward example and it could be changed so you could also set an “Orientation” or style it in any way desired – this is probably most familiar as being similar to a space used indicator and certainly could be used as such.

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 )

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