Universal Windows Platform – Tutorial Insider – Docking Control

Standard

comentsys.wordpress.com today features a Universal Windows Platform tutorial showing how to create Docking Control, which is a panel where the elements can be docked to the Top, Bottom, Left or Right of the control.

The Docking Class Inherits the Panel Class and then has a bool value for ignoring property changes then defines an enum for the “Dock” positions of Left, Top, Right and Bottom. There’s an OnLastChildFillPropertyChanged event handler to call InvalidateArrange and OnDockPropertyChanged event handler which checkes the “_ignorePropertyChange” value and returns if true or gets the UIElement and checks the NewValue and adjusts the DockProperty accordingly based on it being none of the Dock values and then calls the InvalidateMeasure if needed if it’s a nested Docking Control.

There’s a pair of DependencyProperty for “LastChildFill” and “Dock” which set the relevent bool and Dock values. ArrangeOverride responds to Size changes that require the layout to be updated and goes through all the UIElement Children and creates a Rect to then get the correct sizes based on the Dock value to set the correct Width or Height. MeasureOverride returns a Size based on working out for each UIElement of the control and getting the correct sizes based on the Dock values and works out the Size to return based from the calculated “maxWidth” and “maxHeight”.

Behind the Scenes

Docking Control is based off the Dock Panel in the Silverlight Toolkit by Microsoft although with the Metro, Modern and Fluent design language progression this control doesn’t fit with the current guidelines for interfaces in general based on the Universal Windows Platform it may still be useful for certain pages within an application where being able to dock elements to the Top, Bottom, Left or Right.

Universal Windows Platform – Tutorial Insider – Uniform Control

Standard

comentsys.wordpress.com today features a Universal Windows Platform tutorial showing how to create Uniform Control, which is a panel where all the elements are sized the same way based from the first item in the panel.

Details

The Uniform Class Inherits the Panel class and then has Columns, FirstColumn and Rows properties. The UpdateComputedValues method gets the Columns and Rows and adjusts the layout accordingly based on the Visibility of the elements to produce the correct number of Rows and Columns needed. ArrangeOverride respnds to Size changes that require the layout to be updated and arranges these based from a Rect from the Width and Height plus the number of rows and columns. MeasureOverride returns a Size by first using UpdateComputedValues then setting the Available size and then resizing each Child of the control to be the desired Size value.

Behind the Scenes

Uniform Control is based off the Uniform Grid in the WinRTXamlToolkit by Filip Skakun and is quite a useful control to have, in the example all the other items in the control are sized based from the initial element so they all have a uniform size – this makes it easy to create proportional layouts with the correct spacing based on the largest elements, something that might come in useful when creating applications.

Universal Windows Platform – Tutorial Insider – Directs Control

Standard

comentsys.wordpress.com today features a Universal Windows Platform tutorial showing how to create Directs Control, which is a Directional Pad control which is used to indicate which direction has been selected.

Details

The User Control has a XAML View which is a Grid which forms the basis of the Pad and is a 3×3 grid, there are four Path UI elements for Up, Down, Left and Right with their positions set within the Grid so they display as needed to form the Pad. The Code View defines an enum for the directions the pad supports then there’s a Direction event which is triggered with the related Direction and when the “Pad” is loaded the DataContext is set.

When PointedMoved event is triggered for any of the Path elements corresponding to the available directions, the PointerPoint is obtained and if the PointerDeviceType is a Mouse and if IsLeftButtonPressed is true or it’s something else such a Pen or Touch and IsInContact is true then bool “fire” is set to true – if this is the case then the relevant Path will be obtained from the object “sender” of the event and the Direction event triggered with the value from the enum corresponding to the name of the Path which would be either Up, Down, Left or Right.

Behind the Scenes

This control shows how easy it is to create a simple control that emulates the behaviour of a physicaly directional pad – that is when you press a direction it continues to register that direction plus when it’s changed to another one this can be with a continuous press of a mouse, pen or touch to switch between the different directions, although this example is simple to display text in a Label to show the direction, it could form the basis of a game controller.

Universal Windows Platform – Tutorial Insider – Stacked Control

Standard

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.

Details

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.

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.

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:

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

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

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

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

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

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

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

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

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

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

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

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

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

Universal Windows Platform – Tutorial Insider – Custom ComboBox

Standard

comentsys.wordpress.com today features a Universal Windows Platform tutorial showing how to create a Custom ComboBox with a customised look-and-feel for the ComboBox control.

Details

Within the App.xaml is defined an Application.Resources with a Style of “CustomComboBox” and a TargetType of ComboBox – this example takes a copy of the style for the standard ComboBox and customises many of the properties including Foreground set to “Gold”, during the VisualState of PointerOver a BorderBrush has been set to “GoldenRod”.

The Border has the default BorderBrush set to “Salmon” and the Background to “LightSalmon” with a CornerRadius set to “15” and the HighlightBackground has the BorderBrush set to “Gold” and the CornerRadius set to “15”, the ContentPresenter also has the CornerRadius set to “15”. The Popup has it’s BorderBrush set to “Salmon” and the Background to “LightSalmon” – some other elements including the Header have been removed to simplify the ComboBox.

Behind the Scenes

This is a straightforward example of customising the Style of a Control, Expression Blend was used to create a copy of the Style for a ComboBox which was then customised with a look-and-feel that’s been used in previous tutorials just to demonstrate how different a standard input control can be modified to look completelt different from the standard, this could be to confirm to a corporate colour scheme or part of a fully customised design, this is just the start of how far you can take customising controls for an application.