Some Dev Design Tips

Some Dev Design Tips

Hi there,

Today, I want us to look into some Windows Development tips.

This is particular to developers using XAML to design the UI of their apps.

Many times, I get questions of developers trying to make their controls fit into the screen of an app on one device and fit into another device of another screen size and resolution.

Worry not, XAML makes your dreams come true in very easy ways.

The ISSUE

Some of the things you have to know beforehand…

  • Screen sizes and resolutions differ
  • Setting the exact width or height of a control makes it static for all screen sizes and resolutions

Way OUT

So you want your controls to properly feel the same way on a 4″, 4.5″, 5″, 7″, 8″, 13″, 15.6″ even up to 84″?

The introduction of what is called star sizing is normally what I would use and recommend.

THE DEVICE SCREEN

There are different screen sizes as you know ranging from 4″ to the Surface Hub Screens and there are also different resolutions…

480×640, 480×800, 720×1280 and 768×1280 (that’s for mobile)

800×600, 1024×768, 1366×768, 1920×1280, on and on….

How do you want to make your app fit to all these sizes? We’ll handle that.

Alignments

Alignments simply describe the side to which controls go. Either to the top, left, center or wherever you want it to go.

The are 2 broad alignment categories – Horizontal and Vertical.

Horizontal Alignment

Horizontal Alignment defines the side your control will fall to on the screen.

There are 4 types of this. We have Left, Right, Center, Stretch

Vertical Alignment

Horizontal Alignment defines the side your control will fall to on the screen.

There are 4 types of this. We have Top, Bottom, Center, Stretch

Below is the default blank screen on a Windows 10 Mobile

This is the lowest resolution.

To really show what I want to achieve, I will divide my phone screen to 3 equal parts using Grid.RowDefinition

<Grid.RowDefinitions>


<RowDefinition Height=”*”/>


<RowDefinition Height=”*”/>


<RowDefinition Height=”*”/>


</Grid.RowDefinitions>


<Button Content=”Button” Width=”120″/>


<Button Width=”Auto” Content=”Button” Grid.Row=”1″/>


<Button Grid.Row=”2″ Content=”Button” Width=”320″/>

The resulting Designer display will then look like this..

On a 4″ emulator

On a 4.5″ emulator

On a 6″ emulator…

You will see that as the screen sizes increased the amount of whitespace left on the right hand size of the last button becomes too much to make the app beautiful.

So, it is generally advised that you leave your controls in their default sizes or make them fill in their container.

Margins

Margins are another very important part of making your app look good to the user.

For example, look at this app…

And have a look at this..

Which would appeal more to you?

Here is the simple XAML code for that.

<StackPanel Margin=”6″>


<Button Content=”My First Button” Margin=”0,6,0,6″/>


<Button Content=”My Second Button” Margin=”0,6,0,6″/>


<Button Content=”My Third Button” Margin=”0,6,0,6″/>


<Button Content=”My Fourth Button” Margin=”0,6,0,6″/>


</StackPanel>

These are just some few tips for the day.

Watch out for the next..

Share this post

There are no comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Start typing and press Enter to search

Shopping Cart