Developing Resolution-Independent Applications in WPF

In today's WPF based application development environment we usually come across a requirement to develop a resolution-independent application. What that actually means is that no matter what the resolution of our screen is, our application should behave perfectly. Considering all these things in mind, * (Asterik) and Auto comes to our rescue.

Let's see where both can be used for and how they can be utilized.

* (Asterik)  can be used to get the available height and width for the control. Suppose I have a control that I have placed in the Column of the grid. The column will take all the available space after the rendering of all the controls. If we place two columns inside a grid and specify the width of both of the controls as * then both of the columns will equally divide the space among themselves as shown in the figure below.

<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Background="Red"></StackPanel>
<StackPanel Grid.Column="1" Background="Green"></StackPanel>

* also represents the percentage of the width or height the layout control can take. As seen in the previous example, both of the columns have equally divided the available width among themselves since both of the columns have * as the specified width.

Now suppose we specify the width of both of the columns as 3* and 2* then in that case they will occupy 60% and 40% of the available space. We can see that in the following figure.

<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"></ColumnDefinition>
<ColumnDefinition Width="2*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Background="Red"></StackPanel>
<StackPanel Grid.Column="1" Background="Green"></StackPanel>

Now if I replace * with Auto in one of the columns then in that case the visual would be as shown below because there is no control in the second column whose width the column should take. That is why the second column's width is not applicable and the UI would be as shown below. This shows that Auto would help the layout control to take the width or height of the controls present as children of the layout.

<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Background="Red"></StackPanel>
<StackPanel Grid.Column="1" Background="Green"></StackPanel>

To confirm our belief that the Auto would help to render the layout control of the height or width of the child control I have placed a TextBox whose width is 100px in the second stackpanel as shown below.

<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Background="Red"></StackPanel>
<StackPanel Grid.Column="1" Background="Green">
<TextBox Width="100"></TextBox>
</StackPanel>

In the preceding figure we can see that the second stack panel has set its width as 100 px. Whereas the fist column has taken whatever space was available after the setting of the second column's space.

Using these basic principles of the * and Auto for the settings of the Height and Control of the layout panels we can develop resolution-independent applications in WPF based on our requirements.

I hope this article will help you to have a basic understanding of the * and Auto in WPF. I also would like to apologize for using weird colours for the demonstrations.