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.

Details

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.

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