Scrollviewer在wpf中超出父窗口时不显示数据

Question

在一个带有 6 个扩展器的网格内有大约 6 个内容控件（每个内容控件在一个扩展器中） 在我的主窗口上，它调用各种用户控件来填充每个上部选项卡/左侧菜单选择的主窗口。

一个扩展器将一次处于活动状态，其余的将被折叠。

每个新窗口都在一个内容控件上。

问题是当我有更大的数据动态加载时，我的内容超出了父控件并且 即使我使用 scrollviewer 时，scrollviewer 也会显示但数据被切断。

这是我的代码： 以下是我在主窗口内容控件中使用的 UserControl 中的代码

<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
  </Grid.RowDefinitions>
  <Expander Header="Settings" BorderBrush="SteelBlue" BorderThickness="5"
      IsExpanded="{Binding Path=ShowPreview, Mode=TwoWay}"
      Background="AliceBlue" FontFamily="Poor Richard" FontSize="24"
      FontWeight="Bold">
    <DatePicker Name="MyDateRange" />
  </Expander>
  <Expander Header="Permissions" Grid.Row="1" BorderBrush="SteelBlue"
      BorderThickness="5" Background="AliceBlue" FontFamily="Poor Richard"
              <local:Permissions /> 
        <!--/*Permissions is another usercontrol   with a grid layout  (a dataentry form)*/-->
   </Expander>
</Grid>

有 6 行的第二个网格是我的 MainWindow 中的代码。

<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
  </Grid.RowDefinitions>
  <Expander Grid.Row="1" IsExpanded="False" x:Name="Expander1"
      Style="{DynamicResource OutlookStyleExpanderStyle}" Visibility="Hidden">
    <Expander.Header>
      <WrapPanel HorizontalAlignment="Right" Margin="450,0,0,0">
        <Button Name="ExpandButtonMin" Background="#FFACD0EE"
            Click="ExpandButtonMin_Click" HorizontalAlignment="Right">
          <Image Source="/Images/Minimize_Box_Blue.png" Height="30" Width="30" />
        </Button>
        <Button Name="ExpandButtonMax" Background="#FFACD0EE"
            Click="ExpandButtonMax_Click" HorizontalAlignment="Right">
          <Image Source="/Images/maximize.png" Height="30" Width="30" />
        </Button>
        <Button Name="ExpandButtonClose" Background="#FFACD0EE"
            Click="ExpandButton1_Click" HorizontalAlignment="Right">
          <Image Source="/Images/Close_Box_Red.png" Height="30" Width="30" />
        </Button>
      </WrapPanel>
    </Expander.Header>
   <ScrollViewer MaxHeight="800">
    <ContentControl Grid.Row="1" x:Name="contentControl1"
        Content="{Binding ContentControlOne}" Margin="0,0,0,0"
        ScrollViewer.VerticalScrollBarVisibility="Auto" />
   </ScrollViewer>
  </Expander>
</Grid>

同样有五个扩展行，每个行都有 contentcontrol2,..。

问题是当我的内容控件的最大动态内容超过父大小时，数据被切断并且滚动查看器显示但仍不显示完整数据。当我删除滚动查看器高度并将滚动查看器高度保持为“自动”时，滚动查看器根本不显示。

Answer 1

这里的问题是，通过将Grid 行的所有高度设置为“自动”，您最终会得到StackPanel。因此没有单元格被强制设置为小于所需高度的高度，因此ScrollViewer 是无用的。

展开的扩展行的高度必须是“*”。把它想象成“每个扩展器都占据它需要的高度，除了活动的那个占据所有剩余的高度”。

也许是这样的：

<Grid>
  <Expander x:Name="Expander1" ... />
  <Expander x:Name="Expander2" ... />
  <Expander x:Name="Expander3" ... />
  ...
  <Grid.RowDefinitions>
    <RowDefinition Height="{Binding IsExpanded, ElementName=Expander1, Converter={x:Static BoolToRowHeightConverter.Instance}}"/>
    <RowDefinition Height="{Binding IsExpanded, ElementName=Expander2, Converter={x:Static BoolToRowHeightConverter.Instance}}"/>
    <RowDefinition Height="{Binding IsExpanded, ElementName=Expander3, Converter={x:Static BoolToRowHeightConverter.Instance}}"/>
    ...
  </Grid.RowDefinitions>
</Grid>

BoolToRowHeightConverter 如果为真则返回GridLength.Star，否则返回GridLength.Auto。

Answer 2

Nicholas' answer is correct 你的问题是你如何定义网格的 RowDefinition。

Auto 的意思是“允许孩子成长为他们想要的任何大小”，因此您的 ScrollViewer 会增长到高达 800px 的高度（因为MaxHeight），它不在屏幕上。

这种事情的标准解决方案是在RowHeight 中使用转换器将其设置为Auto 或"*"（“允许孩子占用所有剩余空间”）基于@987654328 @ 状态。

这意味着如果 Expander 折叠起来，它将占用它需要的任何空间，但如果它展开，它将占用所有剩余空间（仅此而已）。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="{Binding IsExpanded, ElementName=Expander1, Converter={x:Static MyBoolToGridSizeConverter}}" />
        <RowDefinition Height="{Binding IsExpanded, ElementName=Expander2, Converter={x:Static MyBoolToGridSizeConverter}}" />
        <RowDefinition Height="{Binding IsExpanded, ElementName=Expander3, Converter={x:Static MyBoolToGridSizeConverter}}" />
        <RowDefinition Height="{Binding IsExpanded, ElementName=Expander4, Converter={x:Static MyBoolToGridSizeConverter}}" />
        <RowDefinition Height="{Binding IsExpanded, ElementName=Expander5, Converter={x:Static MyBoolToGridSizeConverter}}" />
        <RowDefinition Height="{Binding IsExpanded, ElementName=Expander6, Converter={x:Static MyBoolToGridSizeConverter}}" />
    </Grid.RowDefinitions>

    <Expander Grid.Row="0" x:Name="Expander1">
        <ScrollViewer>
            <ContentControl x:Name="contentControl1" Content="{Binding ContentControlOne}" />
        </ScrollViewer>
    </Expander>
     ...
</Grid>

如果展开了多个项目，则它们应平均分配剩余空间，因为它们共享"1*" 的大小，因此将分配相同数量的空间。

创建转换器很简单。创建一个继承自 IValueConverter 的类，实现接口，并更改 Convert 方法以将布尔值 (IsExpanded) 转换为 RowHeight 的 GridLength 值。

public class BoolToGridSizeConverter : IValueConverter
{
    public object Convert(object value, Type targetType, 
        object parameter, CultureInfo culture)
    {
        if (value is bool && (bool)value)
            return new GridLength(1, GridUnitType.Star);

        return GridLength.Auto;
    }

    public object ConvertBack(object value, Type targetType, 
        object parameter, CultureInfo culture)
    {
        // this is not needed
    }
}

然后将此转换器的一个实例添加到您的 XAML 资源中某处，例如

<Window.Resources>
    <local:BoolToGridSizeConverter x:Key="MyBoolToGridSizeConverter" />
</Window.Resources>

当然，另一种选择是在 google 上搜索免费的 WPF Accordion 控件，例如 WPF Toolkit 中的那个 :)