PriorityStackPanel

August 13th, 2015

The PriorityStackPanel class is a Panel element that I built for my Windows Store app. The idea is that the panel should adapt the content to the display based on a set of rules. The existing panels in C# and WinRT are totally useless for this task because their rules are far too simplistic for my stack content.

Here is a test panel that is resized in each picture. The panel starts out wide enough to hold all of the content. As it shrinks, the content is either removed or shrunk so that the highest priority data is always visible. This data is actually typical of what someone might see in a Windows 10 app, since the title bar of the app is also used to hold buttons.

image

Full Width

image

Narrow But All Content Visible

image

Status Block and Some Text Removed

image

Second Status Block Removed

image

Just the Button and Title Left

image

Title Shrinking

As the control shrinks, perhaps because Windows 10 lets users run these apps in a Windows, or because the Windows 8.1 user snapped this to a split screen and changed the split size, the content shrinks.

Here is the XAML that defines the page content. Notice the attached Priority property that is used to declare the priority of each child control. The children that are allowed to change size are marked with an asterisk before the priority number – this is not like the asterisk after the numbers in grid sizing, it is just an indicator that the control can be resized.

And here is the code for the PriorityStackPanel. I saw a few forum posts where people had trouble with making their own panels. One problem was about how to deal with the alignment of the child control, which is easy to handle by just arranging the child within an area big enough for the child to align itself where ever it wants; don’t arrange it to the exact size it wants, tell it the area that it is allowed to be within. It is even possible in the code to ignore height and width values and just tell the control what size to be. My code does that in order to hide children. Setting their size to zero accomplishes the hiding. In fact, if a control is hidden before this code touches it, it will already have a measurement of zero.

Leave a Reply

You must be logged in to post a comment.