The Universal app concept was first introduced in Windows 8. But it wasn’t completely universal. Because the developer had to develop separate projects for Windows 8 and Windows 8 phone. But with Windows 10 the universal concept is complete. Because now a single app can be used in all Windows 10 devices. This universal concept has an impact on the developer because now the developer has to pay attention about the look (UI) of the app in different screen sizes which means Adaptive resolutions.
This is where the all new Relative Panel comes in handy. Because it’s very easy to handle the UI for different screen sizes with this Relative Panel . In the end it’s just another panel/container like a grid but it has some cool features which helps us to arrange the children controls. With this panel we can define the Alignment and the position of a children control based on another children control.
When you add a control into a relative panel, that control get some properties which are related to its’ alignment and position.
Alignment
- RelativePanel.AlignHorizontalCenterWith
- .AlignHorizontalCenterWithPanel
- .AlignVerticalCenterWith
- .AlignVerticalCenterWithPanel
- .AlignLeftWith
- .AlignLeftWithPanel
- .AlignRightWithPanel
- .AlignRightWith
- .AlignTopWith
- .AlignTopWithPanel
- .AlignBottomWith
- .AlignBottomWithPanel
- RelativePanel.Above
- .Below
- .LeftOf
- .RightOf
With these properties we can play around and create complex Adaptive user interfaces. Let’s see an example,
![new]()
Create a new blank universal app project.
Make the xaml look like the following,
![xaml]()
Then run the app. It should look like the following.
![app]()
You can place the blue rectangle in these 9 places.
![places]()
The importance of this panel is you can position a control with a control and you can align it with another control. So in this way it’s really easy to build great UI for any screen size. And the Relative panel is the key to this adaptive resolution.