2010-12-23 45 views
6

这就是我想要的:滚动和拉伸一个扩展的内容

1)当我点击我的扩展按钮,展开时,它应该延伸到的电网

看到底样本图像=>alt text

2.)当我在扩展器内的RichTextBox中写入比空格更多的文本时,滚动条必须可见,我应该能够向下滚动。

将一个滚动查看器放在扩展器内容并不难,但即使设置为“自动”,它们也不会帮助它们永远不会出现。将scrollviewer设置为“Visible”我无法滚动,因为Expander的内容无限下降。

那是我的示例代码:

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

回答

8

我想你要找的是自动和*尺寸行的混合:折叠时自动,*展开时。有很多方法可以实现这种切换。一个简单的方法是通过转换器将行高绑定到扩展器。在XAML应该是这样的:

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

而这里的转换器的简单版本:

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

现在的可用空间将打开膨胀和崩溃的人之间的分裂只会占用为就像他们的标题需要一样。如果文本变得太长,ScrollViewer应该接管并开始滚动该区域内的文本。

+0

它的工作部分。有2个缺陷:我得到这个错误的所有4扩展=> System.Windows.Data错误:4:找不到与参考'ElementName = Ex1'绑定的源。 BindingExpression:路径= IsExpanded;的DataItem = NULL;目标元素是'RowDefinition'(HashCode = 61280566);目标属性是'高度'(类型'GridLength'),我尝试了RichTextBox里面的Expander.Content => Height或MinHeight =“{Binding ElementName = Ex1,Path = Height}”,但RichTextBox的高度不舒展下来?当我在RTB中写入大量文本时,文本写出了richTextBox ... – Elisabeth 2010-12-24 20:03:26

2

我最近不得不做这样的事情。我使用了非常类似的代码,但是能够使用页面后面的代码实现所需的结果。尝试是这样的:

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> 

在窗口后面的代码我使用C#和有这样的代码:

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

在这个例子中的扩展器将全部增长以完全填充网格。如果您想要,您可以修改此选项以在选择一个时折叠其他扩展器。