How to resize the Expander.Content? - wpf

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.

Answer 1

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

Answer 2

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:

Answer 3

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>