Combine expander and grid (resizable expander)

Question

I would like to have something like a resizable Expander. My basic idea was something like this:

<Grid HorizontalAlignment="Left">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="2" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>

    <Expander Grid.Column="0" ExpandDirection="Right">
          ...
    </Expander>

    <GridSplitter Grid.Column="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />

    ...
</Grid>

The problem with this: if i move the grid splitter and collaps the expander i got a big empty area. How can make the entire column collapse? Or is there another way to make the expander "resizable"

Solution 1

Not sure what you are trying to accomplish but i think conceptually the Grid should be part of the Expander.Content, would this work for you?

<Expander Header="Test" ExpandDirection="Right" HorizontalAlignment="Left" Background="LightBlue">
    <Expander.Content>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="5"/>
            </Grid.ColumnDefinitions>
            <TextBlock Text="Lorem ipsum dolor sit"/>
            <GridSplitter Grid.Column="1" Width="5" ResizeBehavior="PreviousAndCurrent" ResizeDirection="Columns"/>
        </Grid>
    </Expander.Content>
</Expander>

Edit: Removed all the triggering from the first column as it seemed unnecessary.

Also: For this to work vertically the GridSplitter's HorizontalAlignment must be set to Stretch, otherwise it will have zero width by default (of course everything else that is orientation-specific must be adapted as well but that is straightforward)

HorizontalAlignment is the Microsoft .NET property accessor for what is in reality a dependency property. This particular dependency property quite frequently has its apparent "default" value set differently in subclassed elements, particularly controls. [...] For example, the apparent "default" of HorizontalAlignment for a Label control will be Left, even though Label inherits HorizontalAlignment direct from FrameworkElement. This is because that value was reset within the default style of Label, within the style's control template.

Solution 2

Maybe this will help to solve your "column collapse" problem

XAML:

Add in <Grid> Name="expGrid" and add in <Expander> Collapsed="Expander_Collapsed"

C# Code:

private void Expander_Collapsed(object sender, RoutedEventArgs e)
{
  var colomnIndex = Grid.GetColumn(sender as Expander);
  var colomn = expGrid.ColumnDefinitions[colomnIndex];
  colomn.Width = GridLength.Auto;
}

Comments

[Daniel Bişar]

Great, this is exactly what i need!

[DaveO]

For the life of me I can't get something like this to work horizontally!

[H.B.]

@DaveO: See my note in the answer.

[Dennis]

Updated the example to have HorizontalAlignment.