Search code examples
wpfxamlexpander

How to resize the Expander.Content?


<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.


Solution

  • 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;
            }
        }
    }