AdaptivePanel: a smarter way to restrict the size of your controls

AdaptivePanel: a smarter way to restrict the size of your controls

One of the big challenge when you write an UWP application is to adapt your UI to 5″ screens (phones) as well as to 84″ screens (Surface Hub).

Let be honest: it’s not the easiest task, especially because the framework misses some controls made for your adaptive UI, for example MinWidth and MaxWidth (+ MinHeight/MaxHeight or course).

In order to simplify this article, we will only focus on the horizontal plan (MinWidth, Width, MaxWidth and HorizontalAlignment), of course, all the content can be also apply to the vertical plan (Height, MinHeight, MaxHeight and VerticalAlignment).

Here is some scenarios almost impossible to solve with the standard controls, we will then try to fix them with a new control:

Problem 1: Use the maximum of space, with alignment to the left/right and with a maxWidth

If you write something like:


<Grid Background="White" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" MaxWidth="600" MaxHeight="400">
</Grid>

Capture

The Grid will be aligned to the center, using the maximum of the space but limited to MaxWidth, so whatever the content of the Grid, the width will be only limited by the size of the parent items (the window for example).

Because we use MaxWidth instead of Width, even if the window is resized, the content of the Grid continue to fit well:

Capture

But what if we want to align the control to the left or right?


<Grid Background="White" HorizontalAlignment="Right"
VerticalAlignment="Stretch" MaxWidth="600" MaxHeight="400">
</Grid>

 

Here is the result:

Capture

It’s not really the behavior we expected… This time the width of the control depends first of the content (and not the MaxWidth). The only way to force the width of the Grid is to set Width, but our UI will break if we resize the window:

Capture2

Problem to solve: Have a way to say Stretch the content not only aligned to the center but also to the left and right.

Problem 2: Use MinWidth and window resizing:

Use MinWidth to force a control to not be too small whatever the content is a very common trick, especially with dynamic contents (GridView, etc…), but a drawback is that you can break your adaptive UI. Let cut a long story short with an example:


<Grid Background="White" HorizontalAlignment="Right"
MinWidth="600">
</Grid>

Whatever the content, the width of our Grid will always be 600px or higher. But what happens if we decrease the size of the window to 500px or if we display this UI on a mobile phone?

CaptureConclusion: every times you use MinWidth, there is a risk to break your adaptive-design.

Problem to solve: improve MinWidth to take into account the size available and not force the width when there’s no enough space available.

Solution: AdaptivePanel, a smart control for adaptive-design

In order to fix these 2 annoying issues, I created a new control named “AdaptivePanel”, it’s a standard Panel but with 2 extra properties: VerticalBehavior and HorizontalBehavior.

Using these two properties, you can override the behavior of MinWidth and MaxWidth to improve the adaptability of your UI.

Here is the 3 possible values :

  • Standard: the control will behave similarly to all other controls
  • StretchToMaxSizeIfPossible: the control will try to use the maximum space available taking into account the size of the parent and the MaxWidth property (or MaxHeight)
  • MinSizeOnlyIfAvailable: the control will use the minimum space available taking into account the size of the parent and the MinWidth property (or MinHeight)

 

So let try to solve our 2 problems:

Problem 1

(Use the maximum of space, with alignment to the left/right and with a maxWidth).

You can easily solve this issue using the behavior StretchToMaxSizeIfPossible:


<huyn:AdaptivePanel Background="White" HorizontalAlignment="Right"
MaxWidth="600" HorizontalBehavior="StretchToMaxSizeIfPossible">
</huyn:AdaptivePanel>

Your control will use the maximum of the size available and take into account the size of the parent.

Problem 2

(Use MinWidth and window resizing)

You can solve this issue using MinSizeOnlyIfAvailable with the following code:


<huyn:AdaptivePanel Background="White" HorizontalAlignment="Right"
MinWidth="600" HorizontalBehavior="MinSizeOnlyIfAvailable">
</huyn:AdaptivePanel>

Whatever the size of the window or the parent item, your control will always be fully visible.

Source code of AdaptivePanel

https://github.com/rudyhuyn/AdaptivePanel-UWP/blob/master/AdaptivePanel/Controls/AdaptivePanel.cs

Sample project

https://github.com/rudyhuyn/AdaptivePanel-UWP

 

Comments are closed.