AvalonDock: How to auto-resize the control? - wpf

Question

I seem to be unable to auto-resize an AvalonDock control when its host window is resized. (In addition, the control should dock to the full window at startup, which is also eluding me.)
I've tried the HorizontalAlignment and VerticalAlignment properties, as advised here and several other places here on SO, but they're not working for this control. No control resizing takes place when the window is resized.
From the sound of it, the properties govern resizing a control for its child controls. However, I need to resize the control with its parent (the window).
Here's my XAML, copied from the Xceed sample and modified slightly to run in my environment:
<Window
x:Class="Docker"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
xmlns:xcad="http://schemas.xceed.com/wpf/xaml/avalondock"
xmlns:s="clr-namespace:System;assembly=mscorlib"
Title="AvalonDock">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0"
Text="Usage:"
Style="{StaticResource Header}" />
<StackPanel Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<xcad:DockingManager x:Name="_dockingManager"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
AllowMixedOrientation="True"
BorderBrush="Gray"
BorderThickness="1">
<xcad:DockingManager.DocumentHeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding IconSource}"
Margin="0,0,4,0" />
<TextBlock Text="{Binding Title}" />
</StackPanel>
</DataTemplate>
</xcad:DockingManager.DocumentHeaderTemplate>
<xcad:LayoutRoot x:Name="_layoutRoot">
<xcad:LayoutPanel Orientation="Horizontal">
<xcad:LayoutAnchorablePane DockWidth="200">
<xcad:LayoutAnchorable ContentId="properties"
Title="Properties"
CanHide="False"
CanClose="False"
AutoHideWidth="240"
IconSource="..\Images\table-gear.png">
<xctk:PropertyGrid NameColumnWidth="110"
SelectedObject="{Binding ElementName=_layoutRoot, Path=LastFocusedDocument.Content}"
AutoGenerateProperties="False">
<xctk:PropertyGrid.PropertyDefinitions>
<xctk:PropertyDefinition TargetProperties="Background" />
<xctk:PropertyDefinition TargetProperties="BorderBrush" />
<xctk:PropertyDefinition TargetProperties="BorderThickness" />
<xctk:PropertyDefinition TargetProperties="FontSize" />
<xctk:PropertyDefinition TargetProperties="FontStyle" />
<xctk:PropertyDefinition TargetProperties="Width" />
<xctk:PropertyDefinition TargetProperties="Height" />
</xctk:PropertyGrid.PropertyDefinitions>
</xctk:PropertyGrid>
</xcad:LayoutAnchorable>
</xcad:LayoutAnchorablePane>
<xcad:LayoutDocumentPaneGroup>
<xcad:LayoutDocumentPane>
<xcad:LayoutDocument ContentId="document1"
Title="Document 1"
IconSource="..\Images\document.png">
<Button Content="Document 1 Content"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</xcad:LayoutDocument>
<xcad:LayoutDocument ContentId="document2"
Title="Document 2"
IconSource="..\Images\document.png">
<TextBox Text="Document 2 Content"
AcceptsReturn="True" />
</xcad:LayoutDocument>
</xcad:LayoutDocumentPane>
</xcad:LayoutDocumentPaneGroup >
<xcad:LayoutAnchorablePaneGroup DockWidth="125">
<xcad:LayoutAnchorablePane>
<xcad:LayoutAnchorable ContentId="alarms"
Title="Alarms"
IconSource="..\Images\alarm.png"
CanClose="True">
<ListBox>
<s:String>Alarm 1</s:String>
<s:String>Alarm 2</s:String>
<s:String>Alarm 3</s:String>
</ListBox>
</xcad:LayoutAnchorable>
<xcad:LayoutAnchorable ContentId="journal"
Title="Journal">
<RichTextBox>
<FlowDocument>
<Paragraph FontSize="14"
FontFamily="Segoe">
This is the content of the Journal Pane.
<LineBreak />
A
<Bold>RichTextBox</Bold> has been added here
</Paragraph>
</FlowDocument>
</RichTextBox>
</xcad:LayoutAnchorable>
</xcad:LayoutAnchorablePane>
</xcad:LayoutAnchorablePaneGroup>
</xcad:LayoutPanel>
<xcad:LayoutRoot.LeftSide>
<xcad:LayoutAnchorSide>
<xcad:LayoutAnchorGroup>
<xcad:LayoutAnchorable Title="Agenda"
ContentId="agenda"
IconSource="..\Images\book_open.png">
<TextBlock Text="Agenda Content"
Margin="10"
FontSize="18"
FontWeight="Black"
TextWrapping="Wrap" />
</xcad:LayoutAnchorable>
<xcad:LayoutAnchorable Title="Contacts"
ContentId="contacts"
IconSource="..\Images\address_book-edit.png">
<TextBlock Text="Contacts Content"
Margin="10"
FontSize="18"
FontWeight="Black"
TextWrapping="Wrap" />
</xcad:LayoutAnchorable>
</xcad:LayoutAnchorGroup>
</xcad:LayoutAnchorSide>
</xcad:LayoutRoot.LeftSide>
</xcad:LayoutRoot>
</xcad:DockingManager>
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Center">
<Button Content="Save AvalonDock"
Margin="5"
Padding="5"
Click="SaveButton_Click" />
<Button Content="Load AvalonDock"
Margin="5"
Padding="5"
Click="LoadButton_Click" />
</StackPanel>
</StackPanel>
</Grid>
</Window>

Answer 1

Get rid of the StackPanel on the second row of the Grid. A StackPanel doesn't resize its children.
Also note that the default values of the HorizontalAlignment and the VerticalAlignment of a Grid are both Stretch so you don't need to set these explicitly.
Try this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="Usage:" Style="{StaticResource Header}" />
<xcad:DockingManager x:Name="_dockingManager"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
AllowMixedOrientation="True"
Grid.Row="1"
BorderBrush="Gray"
BorderThickness="1">
<xcad:DockingManager.DocumentHeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding IconSource}"
Margin="0,0,4,0" />
<TextBlock Text="{Binding Title}" />
</StackPanel>
</DataTemplate>
</xcad:DockingManager.DocumentHeaderTemplate>
<xcad:LayoutRoot x:Name="_layoutRoot">
<xcad:LayoutPanel Orientation="Horizontal">
<xcad:LayoutAnchorablePane DockWidth="200">
<xcad:LayoutAnchorable ContentId="properties"
Title="Properties"
CanHide="False"
CanClose="False"
AutoHideWidth="240"
IconSource="..\Images\table-gear.png">
<xctk:PropertyGrid NameColumnWidth="110"
SelectedObject="{Binding ElementName=_layoutRoot, Path=LastFocusedDocument.Content}"
AutoGenerateProperties="False">
<xctk:PropertyGrid.PropertyDefinitions>
<xctk:PropertyDefinition TargetProperties="Background" />
<xctk:PropertyDefinition TargetProperties="BorderBrush" />
<xctk:PropertyDefinition TargetProperties="BorderThickness" />
<xctk:PropertyDefinition TargetProperties="FontSize" />
<xctk:PropertyDefinition TargetProperties="FontStyle" />
<xctk:PropertyDefinition TargetProperties="Width" />
<xctk:PropertyDefinition TargetProperties="Height" />
</xctk:PropertyGrid.PropertyDefinitions>
</xctk:PropertyGrid>
</xcad:LayoutAnchorable>
</xcad:LayoutAnchorablePane>
<xcad:LayoutDocumentPaneGroup>
<xcad:LayoutDocumentPane>
<xcad:LayoutDocument ContentId="document1"
Title="Document 1"
IconSource="..\Images\document.png">
<Button Content="Document 1 Content"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</xcad:LayoutDocument>
<xcad:LayoutDocument ContentId="document2"
Title="Document 2"
IconSource="..\Images\document.png">
<TextBox Text="Document 2 Content"
AcceptsReturn="True" />
</xcad:LayoutDocument>
</xcad:LayoutDocumentPane>
</xcad:LayoutDocumentPaneGroup >
<xcad:LayoutAnchorablePaneGroup DockWidth="125">
<xcad:LayoutAnchorablePane>
<xcad:LayoutAnchorable ContentId="alarms"
Title="Alarms"
IconSource="..\Images\alarm.png"
CanClose="True">
<ListBox>
<s:String>Alarm 1</s:String>
<s:String>Alarm 2</s:String>
<s:String>Alarm 3</s:String>
</ListBox>
</xcad:LayoutAnchorable>
<xcad:LayoutAnchorable ContentId="journal"
Title="Journal">
<RichTextBox>
<FlowDocument>
<Paragraph FontSize="14"
FontFamily="Segoe">
This is the content of the Journal Pane.
<LineBreak />
A
<Bold>RichTextBox</Bold> has been added here
</Paragraph>
</FlowDocument>
</RichTextBox>
</xcad:LayoutAnchorable>
</xcad:LayoutAnchorablePane>
</xcad:LayoutAnchorablePaneGroup>
</xcad:LayoutPanel>
<xcad:LayoutRoot.LeftSide>
<xcad:LayoutAnchorSide>
<xcad:LayoutAnchorGroup>
<xcad:LayoutAnchorable Title="Agenda"
ContentId="agenda"
IconSource="..\Images\book_open.png">
<TextBlock Text="Agenda Content"
Margin="10"
FontSize="18"
FontWeight="Black"
TextWrapping="Wrap" />
</xcad:LayoutAnchorable>
<xcad:LayoutAnchorable Title="Contacts"
ContentId="contacts"
IconSource="..\Images\address_book-edit.png">
<TextBlock Text="Contacts Content"
Margin="10"
FontSize="18"
FontWeight="Black"
TextWrapping="Wrap" />
</xcad:LayoutAnchorable>
</xcad:LayoutAnchorGroup>
</xcad:LayoutAnchorSide>
</xcad:LayoutRoot.LeftSide>
</xcad:LayoutRoot>
</xcad:DockingManager>
<StackPanel Grid.Row="2" Orientation="Horizontal" HorizontalAlignment="Center">
<Button Content="Save AvalonDock"
Margin="5"
Padding="5"
Click="SaveButton_Click" />
<Button Content="Load AvalonDock"
Margin="5"
Padding="5"
Click="LoadButton_Click" />
</StackPanel>
</Grid>