WPF Expander with GridSplitter

10,729

Your grid splitter works on the inner grid (in expander) and not on the main grid. Try this:

<Window x:Class="WpfApplication10.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow"
        Height="350"
        Width="525">
    <Grid ShowGridLines="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="5" />
            <ColumnDefinition Width="Auto"
                              Name="column" />
        </Grid.ColumnDefinitions>

        <TextBox Grid.Column="0"
                 HorizontalAlignment="Stretch"
                 TextWrapping="Wrap"
                 Text="TextBox"
                 VerticalAlignment="Stretch"
                 Background="Aqua" />

        <Expander Grid.Column="2"
                  Header="Expander"
                  ExpandDirection="Left"
                  Background="LightBlue">
            <TextBlock Text="Some text Some text Some Text" />
        </Expander>
        <GridSplitter Grid.Column="1"
                      Width="5"
                      ResizeBehavior="PreviousAndNext"
                      ResizeDirection="Columns"
                      VerticalAlignment="Stretch"
                      Height="Auto" />
    </Grid>
</Window>

Now you'd need to handle what happens to the last column when the user expands/collapses the expander.

Share:
10,729

Related videos on Youtube

Ilya Solovyev
Author by

Ilya Solovyev

Updated on September 16, 2022

Comments

  • Ilya Solovyev
    Ilya Solovyev over 1 year

    In my WPF window (.NET 4.0) I have Grid with two columns: stretched textbox (or whatever) on the left side and Expander on the right. Also in Expander I have GridSplitter, which is intended to resize both left and right columns when Expander is expanded. But it doesn't work.

    This is my XAML code:

    <Window x:Class="WpfApplication10.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid ShowGridLines="True" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="Auto" Name="column"/>
        </Grid.ColumnDefinitions>
    
        <TextBox Grid.Column="0" HorizontalAlignment="Stretch" TextWrapping="Wrap" 
                 Text="TextBox" VerticalAlignment="Stretch" Background="Aqua"/>
    
        <Expander Grid.Column="1" Header="Expander" ExpandDirection="Left" 
                  HorizontalAlignment="Right" Background="LightBlue" >
            <Expander.Content>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="5"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
    
                    <TextBlock Text="Some text Some text Some Text" Grid.Column="1"/>
                    <GridSplitter Grid.Column="0" Width="5"    
                                  ResizeBehavior="PreviousAndCurrent"
                                  ResizeDirection="Columns" 
                                  HorizontalAlignment="Stretch"/>
                </Grid>
            </Expander.Content>
        </Expander>
    </Grid></Window>
    

    Appropriate solution is found. XAML:

    <Window x:Class="WpfApplication10.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
    
    <Window.Resources>
        <BooleanToVisibilityConverter x:Key="BoolToVisConverter"/>
    </Window.Resources>
    
    <Grid ShowGridLines="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" Name="leftColumn"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto" Name="rightColumn" />
        </Grid.ColumnDefinitions>
    
        <TextBox Grid.Column="0"
                 HorizontalAlignment="Stretch"
                 TextWrapping="Wrap"
                 Text="TextBox"
                 VerticalAlignment="Stretch"
                 Background="Aqua" />
    
        <Expander Grid.Column="2"
                  Name="Expander"
                  Header="Expander"
                  ExpandDirection="Left"
                  Background="LightBlue" 
                  Collapsed="Expander_Collapsed" 
                  Expanded="Expander_Expanded" >
            <TextBlock Text="Some text Some text Some Text" />
        </Expander>
        <GridSplitter Grid.Column="1"
                      Width="5"
                      ResizeBehavior="PreviousAndNext"
                      ResizeDirection="Columns"
                      VerticalAlignment="Stretch"
                      Height="Auto" 
                      Visibility="{Binding ElementName=Expander, Path=IsExpanded, 
                                  Converter={StaticResource BoolToVisConverter}}"/>
    </Grid></Window>
    

    Code-behind:

        private void Expander_Collapsed(object sender, RoutedEventArgs e)
        {
            leftColumn.Width = new GridLength(1, GridUnitType.Star);
            rightColumn.Width = new GridLength(1, GridUnitType.Auto);
        }
    
        private void Expander_Expanded(object sender, RoutedEventArgs e)
        {
            rightColumn.Width = new GridLength(1, GridUnitType.Star);
        }
    
  • Ilya Solovyev
    Ilya Solovyev over 10 years
    I was looking for an answer without code-behind or custom converters: AFAIK if Expander is on the left side, it is possible to use only XAML code. But your answer is good enough. I'll post my code in question.