Scroll i rozciągnąć zawartość ekspander

Question

To jest to, co chcę:

1.) Po kliknięciu przycisku mój Expander i rozszerza powinien rozciągać aż do końca Siatka

patrz przykładowy obraz =>

2.) Kiedy piszę więcej tekstu, niż przestrzeń jest dostępna w RichTextBox w Expander paski przewijania muszą być widoczne i powinienem móc przewinąć w dół.

Umieszczenie scrollviewera wokół zawartości Expander nie jest trudne, ale nie pomaga, nawet przy ustawieniu "Auto", ale nigdy się nie wyświetla. Ustaw przewijanie na "Widoczny" Nie mogę przewijać, ponieważ zawartość Ekspandera spada bez końca.

Ów mojego kodu próbki:

<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

Myślę, że to, czego szukasz, to połączenie wierszy Auto i * size Rows: Auto po zwinięciu, * po rozwinięciu. Istnieje wiele sposobów na osiągnięcie tego przełączenia. Prostym sposobem jest powiązanie wysokości rzędów z ekspanderem za pomocą konwertera. XAML będzie wyglądać następująco:

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

A oto prosta wersja konwertera:

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

Teraz dostępna przestrzeń zostanie podzielona pomiędzy otwartymi ekspandery i zawalonych nich będzie tylko trwać jako tak jak ich nagłówek potrzebuje. Jeśli tekst będzie zbyt długi dla jednego z rozszerzonych, ScrollViewer powinien przejąć i rozpocząć przewijanie tekstu wewnątrz tego * obszaru.

Answer 2

Niedawno miałem zrobić coś takiego. Użyłem bardzo podobnego kodu do tego, co masz, ale udało ci się osiągnąć pożądany rezultat za pomocą kodu znajdującego się za stroną. Spróbuj czegoś takiego:

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> 

W kodzie okiennej za Użyłem C# i mieć ten kod:

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

W w tym przykładzie ekspandery będą rosnąć, aby całkowicie wypełnić sieć. Jeśli chcesz, możesz to zmodyfikować, aby zwinąć inne ekspandery, gdy zostanie wybrane.