滚动和拉伸扩展器的内容答案

【问题标题】：Scroll AND Stretch the content of an Expander滚动和拉伸扩展器的内容
【发布时间】：2011-05-30 00:36:10
【问题描述】：

这就是我想要的：

1.) 当我点击我的 Expander 按钮并展开它时，它应该向下延伸到网格的末尾

查看示例图片 =>

2.) 当我在扩展器中的 RichTextBox 中写入的文本多于可用空间时，滚动条必须可见并且我应该能够向下滚动。

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

【问题讨论】：

标签： wpf scroll scrollviewer expander stretch

【解决方案1】：

我认为您正在寻找的是自动和 * 大小的行的组合：折叠时自动，* 展开时。有很多方法可以实现这种切换。一个简单的方法是通过转换器将行高绑定到扩展器。 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 应该接管并开始在该 * 区域内滚动文本。

【讨论】：

它部分工作。有 2 个缺陷：所有 4 个扩展器都出现此错误 => System.Windows.Data 错误：4：找不到与引用“ElementName = Ex1”进行绑定的源。绑定表达式：路径=IsExpanded；数据项=空；目标元素是'RowDefinition' (HashCode=61280566)；目标属性是'Height'（输入'GridLength'），我在Expander.Content => Height OR MinHeight="{Binding ElementName=Ex1,Path=Height}"的RichTextBox上试过这个，但RichTextBox的高度没有伸展下来？当我在 RTB 中写入大量文本时，文本正在从 RichTextBox 中写入...
在 Expander 内部：现在我总是有 Expander.Header 的空间（高度）来减去这个应该也发生在转换器中。现在我需要转换器内部的 2 个值：Expander.Header 和 Expander.Content 的 ActualHeight 减去它并将其作为 RichTextBox 的新高度返回。但是如何将 2 个值传递给转换器？
听起来您正在使用的 RichTextBox 控件设置不正确，无法在布局系统中正常运行，您只是试图绕过它以强制它执行它应该执行的操作默认。
好吧，我用谷歌搜索了 TextBox 和 RichTextbox 拉伸等……它们似乎存在我必须解决的问题！？我可以将 RichTextBox 放在一个网格中，其中 1 列/行和高度为“*”，而 RichTExtBox 为 VERtticalAlignment=Stretch，这应该可以工作，但它不能！你有什么想法那么可能是什么问题？
我还在 Expander ControlTemplate 中将网格中的行设置为“*”，该行包含 ContentPresenter，并且我设置了 VERtticalAlignment=Stretch。还能有什么？通常这种方法是正确的，但它不适合扩展器内容。

【解决方案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# 并且有这个代码：

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

在此示例中，扩展器将全部增长以完全填充网格。如果您愿意，您可以修改它以在选择一个扩展器时折叠其他扩展器。

【讨论】：