It’s kind of funny, you search and you search for the answer or keyword for achieving the resizing of controls within a WPF window at runtime but just can’t seem to get there easily. However, as soon as you find the right word there is an abundant supply of information about the topic. I mean for example, how do you find something if you don’t know what it’s called? I searched for a while on this topic until I finally found the keyword: Gridsplitter. Gridsplitter is what you need to implement within a WPF window in order to resize controls at run time. For example being able to change the width of a treeview and the height of a textbox or datagrid by clicking on the splitter located between to controls or user interface elements, as they are also called.
You need to have a good understanding of rows and columns. I think if you understand the TABLE tag in HTML and how to implement columns, rows, rowspan and column span then you should be able to implement this fairly easy. The WPF grid rows and columns apply this concept exactly as it exists in HTML.
First you need to implement your row and column WPF Grid Definitions, like the below for this example:
[sourcecode language="xml"]
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
[/sourcecode]
Above I have the GridSplitter in column and row 1. Remember that the count begins at 0 and not at 1, therefore I have the row and grid splitters in the middle, between controls.
Then you need to place the row and column references inside of each control within the grid:
[sourcecode language="xml"]
<TreeView Grid.Column="0" Grid.RowSpan="3"
HorizontalAlignment="Stretch" Margin="12,51,5,5"
Name="treeView1" VerticalAlignment="Stretch" />
[/sourcecode]
The treeview is in column 0 and spans all 3 rows and I want it to stretch horizontally and vertically.
[sourcecode language="xml"]
<DataGrid Grid.Column="2" Grid.Row="2"
AutoGenerateColumns="False"
HorizontalAlignment="Stretch" Margin="0,0,0,5"
Name="dataGrid1" VerticalAlignment="Stretch" />
[/sourcecode]
The datagrid is in column 2, the last column and in row 2, the last row. It does not span any columns or rows and I want it to stretch horizontally and vertically.
I recommend just making a test WPF project and playing with the values (* and Auto) in the Row and Column definitions, plus the Horizontal and Vertical settings (Top, Bottom, Stretch, etc…) so you can see and experience for yourself how changing one value impacts the other controls within the grid.
Lastly, I built my application without implementing this row and column definition functionality. It was not difficult to go back and implement. However, one recommendation I can make is to take out a piece of paper and draw out how you want the grid to be structured. I.e. which controls do you want within each row and column. Then place the Grid.Column, Grid.Row, Grid.ColumnSpan and Grid.RowSpan into each control (all of the controls) before you start trying to re-align the controls. It will look mixed up during the transition but most look and feel issues will be resolved once you get your controls into the right column, grid and you row/column spans are setup right. Plus, be sure to use the Margin property for setting the initial size, if you set the Height or Width then the stretch setting will not work, so consider removing any Height and Width setting.
I wrote another blog about resizing WPF controls here
Download the source