de desplazamiento y estirar el contenido de un expansor

Question

Esto es lo que quiero:

1.) Al hacer clic en el botón de mi expansor y se expande se debe estirar hasta el final de la cuadrícula

ver la imagen de la muestra =>

2.) Cuando escribo más Texto de lo que el espacio está disponible en RichTextBox dentro del Expander ScrollBars debe estar visible y debería poder desplazarme hacia abajo.

Poner un scrollviewer alrededor del contenido del expansor no es difícil, pero no ayuda incluso con la configuración en "Auto" que nunca aparecen. Establezca el visualizador de desplazamiento en "Visible" No puedo desplazarme porque el contenido del expansor se interrumpe infinitamente.

Ésta es mi código de la muestra:

<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

Creo que lo que estás buscando es una mezcla de Filas de tamaño automático y *: Automático cuando se contrajo, * cuando está expandido. Hay muchas maneras de lograr este cambio. Una simple es unir las alturas de fila a los expansores a través de un convertidor. El XAML se vería así:

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

Y aquí es una versión simple del convertidor:

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

Ahora el espacio disponible se dividirá entre los expansores abiertos y los colapsados ​​los solamente tendrá como tanto como su encabezado necesita. Si el texto es demasiado largo para uno de los expandidos, ScrollViewer debería tomar el control y comenzar a desplazar el texto dentro de ese área *.

Answer 2

recientemente he tenido que hacer algo como esto. Utilicé un código muy similar al que tenía pero pude lograr el resultado deseado usando el código detrás de la página. Intentar algo como esto:

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> 

En el código ventana detrás Solía ​​C# y tener este código:

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

En En este ejemplo, los expansores crecerán para llenar la red por completo. Si quisiera, podría modificar esto para colapsar los otros expansores cuando se selecciona uno.