Developing Resolution-Independent Applications in WPF

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

Now suppose I specify the width of both the columns as 3* and 2*, in that case they will occupy 60% and 40% of the available space, which we can see 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, 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 which are 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 Auto would help to render the layout control the height or width, the child control I have place a TextBox whose width as 100px in 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 above figure, we can see that the second stack panel has set its width as 100 px. While the fist column has taken whatever space was available after the setting second columns space.

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

Hope this article will help you to have a basic understanding about the * and Auto in WPF and also would like to apologize for using weird colours for demonstration.