Scroll e allungare il contenuto di un Expander

Question

Questo è quello che voglio:

1.) Quando clicco il mio pulsante di espansione e si espande dovrebbe allungare fino alla fine della griglia

vedi immagine di esempio =>

2.) Quando scrivo più testo di quanto spazio è disponibile nel RichTextBox all'interno delle barre di scorrimento Expander devono essere visibili e dovrei essere in grado di scorrere verso il basso.

Inserire un visualizzatore di scorrimento attorno al contenuto di Expander non è difficile ma non aiuta nemmeno con l'impostazione su "Auto" non vengono mai visualizzati. Imposta lo scrollviewer su "Visibile" Non riesco a scorrere perché il contenuto dell'Ex Expander scende all'infinito.

Quello è il mio codice di esempio:

<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

Penso che quello che stai cercando sia un mix di file Auto e * Righe: Auto quando collassato, * quando espanso. Ci sono molti modi in cui puoi ottenere questo passaggio. Uno semplice consiste nel legare le altezze di riga agli espansori tramite un convertitore. Il XAML sarebbe simile a questa:

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

Ed ecco una semplice versione del convertitore:

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

Ora lo spazio disponibile sarà diviso tra gli espansori aperti e quelli crollati vorranno solo come tanto come il loro intestazione ha bisogno. Se il testo diventa troppo lungo per uno di quelli espansi, ScrollViewer dovrebbe prendere il sopravvento e iniziare a scorrere il testo all'interno di quell'area *.

Answer 2

Recentemente ho dovuto fare qualcosa di simile. Ho usato un codice molto simile a quello che hai ma sono riuscito a ottenere il risultato desiderato usando il codice dietro la pagina. Provare qualcosa di simile:

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> 

Nel codice finestra dietro ho usato C# e avere questo codice:

C#

/// <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 In questo esempio, tutti gli espansori cresceranno per riempire completamente la griglia. Se lo si desidera, è possibile modificarlo per comprimere gli altri espansori quando uno è selezionato.