Scroll and stretch the contents of the expander

Question

This is what I want:

1.) When I press the Expander button and expand, it should stretch to the end of the grid

see sample image =>

2.) When I write more text than the space available in the RichTextBox inside the Expander ScrollBars should be visible, and I should scroll down.

Putting a scrollviewer around the contents of an Expander is not difficult, but it doesn’t help even when set to Auto, they never appear. Set scrollviewer to "Visible", I cannot scroll because the contents of the Expander endlessly go down.

Here is my sample code:

<Grid Margin="30,0,0,0"> <Grid.RowDefinitions> <RowDefinition Height="30" /> <RowDefinition Height="*" /> <RowDefinition Height="30" /> </Grid.RowDefinitions> <StackPanel Background="LightCoral" Orientation="Horizontal"> <TextBlock Grid.Column="0" Text="Incident type:" VerticalAlignment="Center" /> <ComboBox Grid.Column="1" IsEditable="True" Margin="0,7" Text="{Binding SelectedIncidentReport.IncidentType,Mode=TwoWay}" /> <TextBlock Grid.Column="0" Grid.Row="1" Text="Teachers name:" VerticalAlignment="Center" /> <TextBox Grid.Column="1" Grid.Row="1" Height="25" Text="{Binding SelectedIncidentReport.TeacherName,Mode=TwoWay}" /> <TextBlock Grid.Column="0" Grid.Row="2" Text="Tutor group:" VerticalAlignment="Center" /> <TextBox Grid.Column="1" Grid.Row="2" Margin="0,7" Text="{Binding SelectedIncidentReport.TutorGroup,Mode=TwoWay}" /> </StackPanel> <Grid Background="LightBlue" Grid.Row="1" > <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Expander Background="Purple" Grid.Row="0" Height="Auto" Header="Report details" IsExpanded="{Binding SelectedExpander, Mode=TwoWay, Converter={StaticResource ExpanderToBooleanConverter}, ConverterParameter=1}"> <Controls:RichTextBox VerticalScrollBarVisibility="Auto" Text="{Binding SelectedIncidentReport.ReportDetails,UpdateSourceTrigger=LostFocus,IsAsync=True}" AcceptsReturn="True" AutoWordSelection="True" AllowDrop="False" SelectionBrush="#FFAC5BCB" HorizontalScrollBarVisibility="Auto" /> </Expander> <Expander Background="Red" Grid.Row="1" Header="Action taken" IsExpanded="{Binding SelectedExpander, Mode=TwoWay, Converter={StaticResource ExpanderToBooleanConverter}, ConverterParameter=2}"> <Controls:RichTextBox VerticalScrollBarVisibility="Auto" Text="{Binding SelectedIncidentReport.ActionTaken,UpdateSourceTrigger=LostFocus,IsAsync=True}" AcceptsReturn="True" AutoWordSelection="True" AllowDrop="False" SelectionBrush="#FFAC5BCB" HorizontalScrollBarVisibility="Auto" /> </Expander> <Expander Background="Lavender" Grid.Row="2" Header="Further action" IsExpanded="{Binding SelectedExpander, Mode=TwoWay, Converter={StaticResource ExpanderToBooleanConverter}, ConverterParameter=3}" > <Controls:RichTextBox VerticalScrollBarVisibility="Auto" Text="{Binding SelectedIncidentReport.FurtherAction,UpdateSourceTrigger=LostFocus,IsAsync=True}" AcceptsReturn="True" AutoWordSelection="True" AllowDrop="False" SelectionBrush="#FFAC5BCB" HorizontalScrollBarVisibility="Auto" /> </Expander> <Expander Background="YellowGreen" Grid.Row="3" Header="Home contact" IsExpanded="{Binding SelectedExpander, Mode=TwoWay, Converter={StaticResource ExpanderToBooleanConverter}, ConverterParameter=4}" > <Controls:RichTextBox VerticalScrollBarVisibility="Auto" Text="{Binding SelectedIncidentReport.HomeContact,UpdateSourceTrigger=LostFocus,IsAsync=True}" AcceptsReturn="True" AutoWordSelection="True" AllowDrop="False" SelectionBrush="#FFAC5BCB" HorizontalScrollBarVisibility="Auto" /> </Expander> </Grid> <Grid Background="LawnGreen" Grid.Row="2" > <Grid.ColumnDefinitions> <ColumnDefinition Width="100" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="Documents:" Grid.Column="0" /> <View:DocumentComboView DataContext="{Binding Path=SelectedIncidentReport.Documents}" Grid.Column="1" HorizontalAlignment="Stretch" /> </Grid> </Grid> 

Answer 1

I think that you are looking for a combination of Auto and * Size: Auto series for crushing, * for expansion. There are many ways to achieve this switch. Simple is the binding of line heights to expanders through the converter. XAML will look like this:

 <Grid Background="LightBlue" Grid.Row="1" > <Grid.RowDefinitions> <RowDefinition Height="{Binding ElementName=Ex1, Path=IsExpanded, Converter={StaticResource ExpandedToGridLengthConverter}}" /> <RowDefinition Height="{Binding ElementName=Ex2, Path=IsExpanded, Converter={StaticResource ExpandedToGridLengthConverter}}" /> <RowDefinition Height="{Binding ElementName=Ex3, Path=IsExpanded, Converter={StaticResource ExpandedToGridLengthConverter}}" /> <RowDefinition Height="{Binding ElementName=Ex4, Path=IsExpanded, Converter={StaticResource ExpandedToGridLengthConverter}}" /> </Grid.RowDefinitions> <Expander Grid.Row="0" x:Name="Ex1" ...> <RichTextBox ... /> </Expander> <Expander Grid.Row="1" x:Name="Ex2" ...> ... </Expander> ... </Grid> 

And here is a simple version of the converter:

 public class ExpandedToGridLengthConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { if (!(value is bool)) return GridLength.Auto; if ((bool)value) return new GridLength(1, GridUnitType.Star); return GridLength.Auto; } public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { throw new NotImplementedException(); } } 

Now the available space will be divided between open expanders, and minimized will occupy as much as required for the header. If the text is too long for one of the extended ones, ScrollViewer should take over and start scrolling the text inside this area.

Answer 2

I recently had to do something similar. I used very similar code for what you have, but I was able to achieve the desired result using the code page by page. Try something like this:

WPF

 <Grid Grid.Row="1" Name="pageGrid" Margin="0,10,0,0"> <Grid.RowDefinitions> <RowDefinition MinHeight="25" Height="*" /> <RowDefinition MinHeight="25" Height="*" /> <RowDefinition MinHeight="25" Height="*" /> <RowDefinition MinHeight="25" Height="*" /> <RowDefinition MinHeight="25" Height="*" /> <RowDefinition MinHeight="25" Height="*" /> <RowDefinition MinHeight="25" Height="*" /> </Grid.RowDefinitions> <Expander Grid.Row="0" Header="header1" Name="expander1" Margin="0,0,0,0" VerticalAlignment="Top" FontSize="18" IsExpanded="True"> <Grid> <TextBlock Background="#336699FF" Padding="5" TextWrapping="Wrap" Margin="30,5,10,5"> test </TextBlock> </Grid> </Expander> <Expander Grid.Row="1" Header="header2" Margin="0,0,0,0" Name="expander2" VerticalAlignment="Top" FontSize="18"> <Grid> <TextBlock Background="#336699FF" Padding="5" TextWrapping="Wrap" Margin="30,5,10,5"> test </TextBlock> </Grid> </Expander> <Expander Grid.Row="2" Header="header3" Margin="0,0,0,0" Name="expander3" VerticalAlignment="Top" FontSize="18"> <Grid> <TextBlock Background="#336699FF" Padding="5" TextWrapping="Wrap" Margin="30,5,10,5"> test </TextBlock> </Grid> </Expander> <Expander Grid.Row="3" Header="header4" Margin="0,0,0,0" Name="expander4" VerticalAlignment="Top" FontSize="18"> <Grid> <TextBlock Background="#336699FF" Padding="5" TextWrapping="Wrap" Margin="30,5,10,5"> test </TextBlock> </Grid> </Expander> <Expander Grid.Row="4" Header="header5" Margin="0,0,0,0" Name="expander5" VerticalAlignment="Top" FontSize="18"> <Grid> <TextBlock Background="#336699FF" Padding="5" TextWrapping="Wrap" Margin="30,5,10,5"> test </TextBlock> </Grid> </Expander> <Expander Grid.Row="5" Header="header6" Margin="0,0,0,0" Name="expander6" VerticalAlignment="Top" FontSize="18"> <Grid> <TextBlock Background="#336699FF" Padding="5" TextWrapping="Wrap" Margin="30,5,10,5"> test </TextBlock> </Grid> </Expander> <Expander Grid.Row="6" Header="header7" Margin="0,0,0,0" Name="expander7" VerticalAlignment="Top" FontSize="18"> <Grid> <TextBlock Background="#336699FF" Padding="5" TextWrapping="Wrap" Margin="30,5,10,5"> text </TextBlock> </Grid> </Expander> </Grid> 

In the window code behind me, I used C # and had this code:

FROM#

 /// <summary> /// Interaction logic for _07Slide.xaml /// </summary> public partial class _07Slide : Page { GridLength[] starHeight; public _07Slide() { InitializeComponent(); starHeight = new GridLength[pageGrid.RowDefinitions.Count]; starHeight[0] = pageGrid.RowDefinitions[0].Height; starHeight[1] = pageGrid.RowDefinitions[2].Height; starHeight[2] = pageGrid.RowDefinitions[2].Height; starHeight[3] = pageGrid.RowDefinitions[2].Height; starHeight[4] = pageGrid.RowDefinitions[2].Height; starHeight[5] = pageGrid.RowDefinitions[2].Height; starHeight[6] = pageGrid.RowDefinitions[2].Height; ExpandedOrCollapsed(expander1); ExpandedOrCollapsed(expander2); ExpandedOrCollapsed(expander3); ExpandedOrCollapsed(expander4); ExpandedOrCollapsed(expander5); ExpandedOrCollapsed(expander6); ExpandedOrCollapsed(expander7); expander1.Expanded += ExpandedOrCollapsed; expander1.Collapsed += ExpandedOrCollapsed; expander2.Expanded += ExpandedOrCollapsed; expander2.Collapsed += ExpandedOrCollapsed; expander3.Expanded += ExpandedOrCollapsed; expander3.Collapsed += ExpandedOrCollapsed; expander4.Expanded += ExpandedOrCollapsed; expander4.Collapsed += ExpandedOrCollapsed; expander5.Expanded += ExpandedOrCollapsed; expander5.Collapsed += ExpandedOrCollapsed; expander6.Expanded += ExpandedOrCollapsed; expander6.Collapsed += ExpandedOrCollapsed; expander7.Expanded += ExpandedOrCollapsed; expander7.Collapsed += ExpandedOrCollapsed; } void ExpandedOrCollapsed(object sender, RoutedEventArgs e) { ExpandedOrCollapsed(sender as Expander); } void ExpandedOrCollapsed(Expander expander) { var rowIndex = Grid.GetRow(expander); var row = pageGrid.RowDefinitions[rowIndex]; if (expander.IsExpanded) { row.Height = starHeight[rowIndex]; row.MinHeight = 25; } else { starHeight[rowIndex] = row.Height; row.Height = GridLength.Auto; row.MinHeight = 0; } } } 

In this example, all expanders will grow to completely fill the grid. If you want, you can change this to collapse other expanders when it is selected.