滚动和拉伸扩展器的内容

时间：2010-12-23 14:59:35

标签： wpf scroll scrollviewer expander stretch

这就是我想要的：

1。）当我单击我的Expander按钮并展开时，它应该延伸到Grid的末尾

参见样本图片=＆gt; alt text

2。）当我在Expander ScrollBars中的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>

2 个答案:

答案 0 :(得分：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应该接管并开始滚动该区域内的文本。

答案 1 :(得分：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;
        }
    }
}

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

相关问题
最新问题