How to resize the Expander.Content?

Question

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="auto"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <!-- … -->
    </Grid.RowDefinitions>
    <TextBlock Grid.Column="0">
        This should be allways visible, even if the expander isn’t expanded!
    </TextBlock>
    <Expander ExpandDirection="Left" Grid.Column="1">
        <Expander.Header>
            <!-- … -->
        </Expander.Header>
        <TreeView MinWidth="50"/>
    </Expander>
    <!-- … -->
</Grid>

I want the user to be able to resize the TreeView. I tried to warp the TreeView in a Grid with 2 columns and a GridSplitter in the first column, but that didn't work. Does anybody have an idea how to make that work?

~~P.S.: A XAML-only answer would be great.~~

You're TreeView does not need `Grid.Column="1"` because it is a Child in the Expander control tag, not in the Grid control tag. Also, I don't see any GridSplitter in your XAML? — myermian, Oct 01 '11 at 14:58
I removed that `GridSplitter` because it didn't work and that `Grid.Column="1"` is also a leftover from that try. — Marcel B, Oct 01 '11 at 16:03
Would [this](http://stackoverflow.com/questions/5553383/combine-expander-and-grid-resizable-expander) be what you are looking for? — H.B., Oct 03 '11 at 08:04

score 6 · Accepted Answer · edited Jun 20 '20 at 09:12

You may solve your problem using Expander.Collapsed and Expander.Expanded events as Attached Event. I do not have the idea about only using Xaml now, but the following code works well in my case.

Xaml

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow">
    <Grid Expander.Collapsed="Grid_Collapsed" Expander.Expanded="Grid_Expanded">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="auto"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <!-- … -->
        </Grid.RowDefinitions>
        <TextBlock Grid.Column="0" TextWrapping="Wrap">
        This should be allways visible, even if the expander isn’t expanded!
        </TextBlock>
        <GridSplitter HorizontalAlignment="Right" VerticalAlignment="Stretch" Width="2" />
        <Expander Background="Yellow" ExpandDirection="Left" Grid.Column="1">
            <Expander.Header>test</Expander.Header>
            <TreeView MinWidth="50"/>
        </Expander>
        <!-- … -->
    </Grid>
</Window>

Codebehinde

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private GridLength _rememberWidth = GridLength.Auto;

    private void Grid_Collapsed(object sender, RoutedEventArgs e)
    {
        var grid = sender as Grid;
        if(grid != null)
        {
            _rememberWidth = grid.ColumnDefinitions[1].Width;
            grid.ColumnDefinitions[1].Width = GridLength.Auto;
        }
    }

    private void Grid_Expanded(object sender, RoutedEventArgs e)
    {
        var grid = sender as Grid;
        if (grid != null)
        {
            grid.ColumnDefinitions[1].Width = _rememberWidth;
        }
    }
}

I tried something similar(but way more complicated) and it didn’t work… But this one works as expected and is pretty simple… Thanks alot — Marcel B, Oct 12 '11 at 14:26

score 0 · Answer 2 · answered Oct 07 '11 at 10:38

You just need to add another column to the wrapping grid in order for it to work.

Here is a XAML sample that worked for me:

 <Grid x:Name="LayoutRoot">
    <toolkit:Expander ExpandDirection="Left" Header="ImLeftExpandedExpander">
        <Grid ShowGridLines="True" Background="White" >
            <Grid.RowDefinitions>
                <RowDefinition />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition MinWidth="50" />
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>

            <sdk:TreeView Background="BurlyWood">
                <sdk:TreeViewItem Header="Root">                        
                    <sdk:TreeViewItem Header="bla1"/>
                    <sdk:TreeViewItem Header="bla2"/>
                    <sdk:TreeViewItem Header="bla3"/>
                </sdk:TreeViewItem>
            </sdk:TreeView>
            <sdk:GridSplitter x:Name="grsplSplitter" Grid.Row="0" Grid.Column="1" VerticalAlignment="Stretch" HorizontalAlignment="Center" Background="Red" Width="5"></sdk:GridSplitter>
            <Grid Background="#CCCC66" Grid.Column="2">
                <TextBlock  FontSize="22"  Text="This column can be left empty, its just so the GridSplitter will have space to expand to" TextWrapping="Wrap"/>
            </Grid>
        </Grid>
    </toolkit:Expander>

</Grid>

And the result: enter image description here

I want content outside of that `Expander`. You just put a `GridSplitter` inside the `Grid`. That way it’s possible to resize the ̀`Grid.Columns` and the `Expander`s content remains in the same size. — Marcel B, Oct 07 '11 at 12:58

AkselK · Answer 3 · 2011-10-08T17:00:15.627

Is this what you want? Notice the GridSplitter property ResizeBehavior.

<Grid >
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="5*"/>
        <ColumnDefinition Width="auto"/>
        <ColumnDefinition Width="2*"/>
    </Grid.ColumnDefinitions>
        <TreeView>
            <TreeViewItem Header="1">
                <TreeViewItem Header="2">
                    <TreeViewItem Header="3"/>
                </TreeViewItem>
                <TreeViewItem Header="3">
                    <TreeViewItem Header="4"/>
                </TreeViewItem>
                <TreeViewItem Header="5"/>
                <TreeViewItem Header="6"/>
            </TreeViewItem>
        </TreeView>
    <GridSplitter Grid.Column="1" Width="10" ResizeDirection="Columns" ResizeBehavior="PreviousAndNext"/>
    <Canvas Grid.Column="2" Background="LightGray"/>
</Grid>

Edit: Here is a working example, showing both approaches. If this is not what you want, then please say so.

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="WpfApplication1.MainWindow"
        Title="MainWindow" d:DesignWidth="516" d:DesignHeight="310">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Label Content="Change size of content"/>
        <Border  BorderBrush="Black" BorderThickness="1" Grid.Row="1" Margin="10">
            <Expander Header="Expander" >
                <Grid >
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="5*"/>
                        <ColumnDefinition Width="auto"/>
                        <ColumnDefinition Width="2*"/>
                    </Grid.ColumnDefinitions>
                    <TreeView>
                        <TreeViewItem Header="1">
                            <TreeViewItem Header="2">
                                <TreeViewItem Header="3"/>
                            </TreeViewItem>
                            <TreeViewItem Header="3">
                                <TreeViewItem Header="4"/>
                            </TreeViewItem>
                            <TreeViewItem Header="5"/>
                            <TreeViewItem Header="6"/>
                        </TreeViewItem>
                    </TreeView>
                    <GridSplitter Grid.Column="1" Width="10" ResizeDirection="Columns" ResizeBehavior="PreviousAndNext"/>
                    <Canvas Grid.Column="2" Background="LightGray"/>
                </Grid>
            </Expander>
        </Border>

        <Label Content="Change size of expander" Grid.Column="1"/>
        <Border BorderBrush="Black" BorderThickness="1" Grid.Row="1" Grid.Column="1" Margin="10">
            <Grid >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="5*"/>
                    <ColumnDefinition Width="auto"/>
                    <ColumnDefinition Width="2*"/>
                </Grid.ColumnDefinitions>
                <Expander>
                    <TreeView>
                    <TreeViewItem Header="1">
                        <TreeViewItem Header="2">
                            <TreeViewItem Header="3"/>
                        </TreeViewItem>
                        <TreeViewItem Header="3">
                            <TreeViewItem Header="4"/>
                        </TreeViewItem>
                        <TreeViewItem Header="5"/>
                        <TreeViewItem Header="6"/>
                    </TreeViewItem>
                </TreeView>
                </Expander>
                <GridSplitter Grid.Column="1" Width="10" ResizeDirection="Columns" ResizeBehavior="PreviousAndNext"/>
                <Canvas Grid.Column="2" Background="LightGray"/>
            </Grid>
        </Border>
    </Grid>
</Window>

Depending on the purpose, the root grid goes into the expander's content, or the treeview is placed into the expander. Try both and see which one works as intended. — AkselK, Oct 07 '11 at 13:13
Ok, i will try it… but it sounds a little bit like you’re just took a wild guess. — Marcel B, Oct 07 '11 at 14:19
"the root grid goes into the expander's content": the content of the expander isn’t resizeable, only the grid inside the `Expander.Content` "the treeview is placed into the expander.": This makes absolutly no senes, because that’s what i already have. — Marcel B, Oct 07 '11 at 15:32

How to resize the Expander.Content?

3 Answers3

Xaml

Codebehinde