How do I stretch the contents of a HeaderedContentControl?

Question

I have a HeaderedContentControl that contains a TreeView.

    <HeaderedContentControl Header="Steps" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <TreeView Name="WizardSteps" ItemsSource="{Binding WizardSteps}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <!-- Hierarchical data templates here -->
        </TreeView>
    </HeaderedContentControl>

Although the HeaderedContentControl stretches to fill the area inside its parent grid, my TreeView control only occupies a small portion of the space available.

How do I get my TreeView to expand to fill the content area of my HeaderedContentControl?

Answer 1

The default control template for HeaderedContentControl is something like this:

<ControlTemplate TargetType="{x:Type HeaderedContentControl}">
    <StackPanel>
        <ContentPresenter ContentSource="Header" />
        <ContentPresenter />
    </StackPanel>
</ControlTemplate>

The StackPanel lets each child have its own desired height, so the TreeView won't stretch. You could replace it with a template that uses a DockPanel:

<HeaderedContentControl Header="Steps" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" VerticalContentAlignment="Stretch" >
    <HeaderedContentControl.Template>
        <ControlTemplate TargetType="HeaderedContentControl">
            <DockPanel>
                <ContentPresenter DockPanel.Dock="Top" ContentSource="Header" />
                <ContentPresenter />
            </DockPanel>
        </ControlTemplate>
    </HeaderedContentControl.Template>

If you want to make it more reusable, set the template in a Style and use VerticalContentAlignment:

<Style TargetType="HeaderedContentControl">
    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="HeaderedContentControl">
                <DockPanel>
                    <ContentPresenter DockPanel.Dock="Top" ContentSource="Header" />
                    <ContentPresenter VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                </DockPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

That way, all your HeaderedContentControls will have their content fill by default, and you can override that by setting VerticalContentAlignment on an individual control.

Alternately, you could use a DockPanel directly instead of a HeaderedContentControl.