ListBox包含在ScrollViewer中

本文关键字：ScrollViewer 包含 ListBox | 更新日期: 2023-09-27 18:05:14

我想页面的ScrollViewer显示时，所有的信息不能显示在屏幕上(即调整窗口的大小)然而，这里的ListBox不得到一个滚动，它得到草图直到页面的底部，除非我设置它有一个MaxSize。是否有一种方法可以优先考虑ListBox在我制作之前显示其ScrollViewer ?

我现在所拥有的https://i.stack.imgur.com/O4h7u.png

我想实现的，但我使用了一个MaxHeight的ListBox在这里。

这是我的一些标记:

<ScrollViewer HorizontalAlignment="Stretch" VerticalScrollBarVisibility="Auto"  Name="scrollViewer1"  VerticalAlignment="Stretch" >
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <ComboBox Grid.Row="0" Width="120" HorizontalAlignment="Left"></ComboBox>
            <ListBox HorizontalAlignment="Left" Name="listBox" Width="120" Grid.Row="1" <!--MaxHeight="500"--> />
        </Grid>         
    </ScrollViewer>

ListBox包含在ScrollViewer中

我知道这个问题很老了，但我有完全相同的问题，并提出了一点hack作为修复，但它总比问题未解决要好。

我读过的很多东西都说在这种情况下使用像StackPanel这样的东西是不好的，因为面板会变大以适应它所容纳的元素。通常情况下，这工作得很好，因为你可以将StackPanel粘贴到Grid中，并设置列/行的MinHeight和MaxHeight，并将控件锁定在适当的位置。一旦ScrollView被添加进去，它就会陷入困境。上面的答案很好地描述了问题，但缺乏解决方案。

我尝试了许多不同类型的面板，而不是StackPanel，但它们都产生相同的结果。我决定，因为我的ListBox位于网格中，我需要将网格位置的MaxHeight绑定到控件中的其他值，以防止ListBox增长。这样做的问题是，没有一个元素可以直接绑定并获得你想要的精确高度。

输入密码:

我的高度太大了一点，造成了一个奇怪的总是在屏幕外的ListBox(实际上36像素太大了，这是ListBox上面的标签的高度)。所以我实现了IValueConverter:

class HeightToAdjustedHeightConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        var height = (double) value - 33d;
        return height < 360d ? 360d : height;
        //360 being the minimum height allowed for the listbox
    }
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
return null;
}

}

之后我所做的就是将它作为MaxHeight绑定的转换器(注意你需要命名你的usercontrol并绑定到它的x: name):

<Grid Grid.Column="0"
    Grid.Row="1"
    VerticalAlignment="Top"
    ClipToBounds="True"
    MaxHeight="{Binding ElementName=AdHocUserControl, Path=ActualHeight, Converter={StaticResource HeightToAdjustedHeightConverter}}">

我能想到的唯一替代方案是扩展其中一个面板并尝试玩它的生长行为。我承认这是一个hack，但它会工作。

试试这个

<ScrollViewer HorizontalAlignment="Stretch" VerticalScrollBarVisibility="Auto"  Name="scrollViewer1"  VerticalAlignment="Stretch" >
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <ComboBox Grid.Row="0" Width="120" HorizontalAlignment="Left" ></ComboBox>
            <ListBox HorizontalAlignment="Left"  Name="listBox"  Width="120" VerticalAllignment = "Top" Grid.Row="1"/>
        </Grid>
    </ScrollViewer>

或者你也可以试试这个

  <Grid >
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <ComboBox Grid.Row="0" Width="120" HorizontalAlignment="Left" ></ComboBox>
            <ListBox HorizontalAlignment="Left"  Name="listBox" VerticalAlignment= "Top"  Width="120" Grid.Row="1" ScrollViewer.VerticalScrollBarVisibility="Auto"/>
        </Grid>

您的定义中存在逻辑上的不一致。

正如你所说的要求:"我希望页面的滚动查看器在所有信息都不能在屏幕上显示时显示[不使用MaxHeight]"-出现了一个问题:"你如何确定'所有信息都不能在屏幕上显示'?"或"在什么时候ListBox应该停止增长并显示滚动条?"。

从WPF'Silverlight布局管理逻辑，它做的正是你想要的-当列表框的高度加上组合框的高度的总和大于滚动查看器的ViewportHeight -你得到一个滚动条。这是可能的，只有当你允许ListBox增长到它所需的大小没有滚动条。

不要在ListBox上设置MaxHeight，只需在RowDefinitions中使用星号'*'符号来获得您的2个控件之间的相对大小。

另一个解决方案:

<ScrollViewer HorizontalAlignment="Stretch" VerticalScrollBarVisibility="Auto" Name="scrollViewer1" VerticalAlignment="Stretch" >
<Grid>
   <Grid.RowDefinitions>
     <RowDefinition Height="Auto"/>
     <RowDefinition Height="*"/>
   </Grid.RowDefinitions>
 <ComboBox Grid.Row="0" Width="120" HorizontalAlignment="Left"></ComboBox>
 <ScrollViewer x:Name="scrollViewer" Grid.Row="1" ScrollViewer.VerticalScrollBarVisibility="Disabled" >
    <ListBox HorizontalAlignment="Left" Name="listBox" Width="120" Grid.Row="1" MaxHeight="{Binding ActualHeight, ElementName=scrollViewer}" ScrollViewer.VerticalScrollBarVisibility="Auto"/>
  </ScrollViewer>
</Grid>

相关文章：