×
Namespaces

Variants
Actions

Placement Of UI Elements For various screen types

From Nokia Developer Wiki
Jump to: navigation, search

Note.pngNote: This is an entry in the Nokia Imaging and Big UI Wiki Competition 2013Q4.

Most of us have been using the WP 7/8 SDK for quite some time. The Visual Studio WP8 SDK provides all the essential UI tools serving as a great IDE. We drag and drop elements and then run our application on the emulator present and we do notice that the UI elements placed might look different when run on 720p emulator rather than WXGA or WVGA emulator.

Considering different screen sizes, we would want all our apps to be reusable on the varying screen resolutions and sizes. The XAML has provided us with a robust functionality of adding rows and columns into a grid. The whole Design screen is divided into a grid called “Layout Root” having one row and one column by default. What we can do is that we can go ahead and create more rows and columns by using the designer window or by XAML Code.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".33*"/>
<ColumnDefinition Width=".33*"/>
<ColumnDefinition Width=".33*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height=".4*"/>
<RowDefinition Height=".3*"/>
<RowDefinition Height=".1*"/>
<RowDefinition Height=".1*"/>
</Grid.RowDefinitions>
<Button Content="Button" Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Top" MinHeight="45" MinWidth="60" Grid.Row="1"/>
<TextBox HorizontalAlignment="Left" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" />
 
</Grid>

In the code above , I have divided the content panel Grid into rows and columns. As you can see above , the coulumns are 3 in number having a width of .33* where as the rows have different heights and are 4 in number.

The concept of dividing into rows and columns is that If there is a larger screen , the grid will resize itself . Now in the code above , I have put one button and one textbox . the point to be noticed is that I have removed their margins intentionally as well as their height and width but have given them a MinWidth and MinHeight. MinWidth and MinHeight attributes make sure that the size of those elements don’t reduce beyond a certain limit if going to a smaller screen for visibility Assigning each UI element as a part of a grid will help them to retain their shape and the grid will expand /collapse for a better UI perspective. In the code above , I have assigned both the UI elements(Button , TextBox) a Grid Row and column to make sure that they are placed at the same position on carrying scales of sizes. Additionally , you can use a stack panel to group different UI elements . Using stackpanel , it has to be made sure that the elements inside it don’t have a margin , and when the stack panel is assigned a row and columns , Its Margins are set to “Auto”

The above method can assure you that the screen appearance will be the same across all the screens sizes

This page was last modified on 13 December 2013, at 19:39.
57 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×