WPF how to make expander move content

Question

Hi I wish to add WPF control to ElementHost in my WinForms application. The behavior of my control is depicted on picture. I wish expanding any expander make my treeview control resize to smaller size. And on the beginning I wish my expanders to be collapsed.

I was trying sth like that:

<UserControl x:Class="LeftPane"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" >
<Grid VerticalAlignment="Stretch" Margin="3,3,3,3">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>            
    </Grid.RowDefinitions>
    <TreeView Grid.Row="0" Name="treeView1" VerticalAlignment="Stretch" >

    </TreeView>
    <StackPanel  Grid.Row="1" Name="StackPanel1" VerticalAlignment="Bottom">
        <ListBox SelectedIndex="1">
            <ListBoxItem VerticalAlignment="Stretch">
                <Expander Grid.Row="1" ExpandDirection="Down" Header="expander1" VerticalAlignment="Stretch" Name="expander1" IsExpanded="False">
                    <ListBox>
                        <ListBoxItem Content="Unit 1"/>
                        <ListBoxItem Content="Unit 2"/>
                    </ListBox>
                </Expander>
            </ListBoxItem>
            <ListBoxItem VerticalAlignment="Stretch">
                <Expander Grid.Row="2" ExpandDirection="Down" Header="expander2" VerticalAlignment="Stretch" Name="expander2" IsExpanded="False">
                    <ListBox>
                        <ListBoxItem Content="Unit 1"/>
                        <ListBoxItem Content="Unit 2"/>
                    </ListBox>
                </Expander>
            </ListBoxItem>
        </ListBox>
    </StackPanel>
</Grid>

and:

public void AddControl(ElementHost host)
    {
        this.parentHost = host;
        host.Child = this;
        this.Height = host.Size.Height;
        treeView1.MaxHeight = this.Height - 60;

    }

But it doesn't work correctly. What is more I would like this control resize while I resize my winForms window.

Can anyone help me how to set aligment etc.

Answer 1

This is how I would achieve this... first, I would change the Grid to the following:

<Grid.RowDefinitions>
    <RowDefinition Height="*" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
</Grid.RowDefinitions>

This will provide the two Expander controls with as much space as they need and the TreeView with all of the rest:

<TreeView Grid.Row="0" Name="treeView1" />
<Expander Grid.Row="1" Header="expander1" Name="expander1" IsExpanded="False">
    <ListBox>
        <ListBoxItem Content="Unit 1"/>
        <ListBoxItem Content="Unit 2"/>
    </ListBox>
 </Expander>
<Expander Grid.Row="2" Header="expander2" Name="expander2" IsExpanded="False">
    <ListBox>
        <ListBoxItem Content="Unit 1"/>
        <ListBoxItem Content="Unit 2"/>
    </ListBox>
 </Expander>