Introduction
In today's environment of the development for the WPF based applications, we usually come across the requirement of developing the resolution independent application. What it actually means is that no matter what the resolution of our screen, our application should behave perfectly. Considering all these things in mind, *(Asteriks) and Auto comes to our rescue.
CodeProject
Let's see where both can be used and how they can be utilized.
* Can be used to get the available height and width for the control. Suppose I have a control which I have placed in the Column of the grid. The column will take all the available space after rendering all the controls. If we place two columns inside a grid and specify the width of both the controls as *, in that case both 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 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.
