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.
Related videos on Youtube
Author by
Ilya Solovyev
Updated on September 16, 2022Comments
-
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 over 10 yearsI 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.