当内容是可变高度时，列表框滚动条拇指会改变大小 [英] Listbox scrollbar thumb changes size when content is variable height

问题描述

我有一个列表框，其中显示了许多对象，每个对象都可以是可变高度，具体取决于每个对象具有的值的数量.查看我之前在此处回答的问题.

许多对象是 5 行高，而其他对象是 1 行.ListBox 中的滚动条看起来不像这样，可能是由于虚拟化.在您滚动浏览时，滚动条上的拇指将改变其大小，具体取决于当前实际放入框中的项目数量.这使得拇指有时很大，有时又很小.

由于此 ListBox 也包含在 TabControl 中，因此当您从一个选项卡切换到另一个选项卡时，返回时 ListBox 通常会滚动到不同的部分.

任何想法如何解决这样的问题?

其他信息:禁用虚拟化确实可以解决滚动问题，尽管代价是初始显示速度较慢.但是，在水平调整大小(垂直很好)时，用里面的内容调整 ListBox 的大小会导致一些严重的滞后，我假设这是由于我的模板的宽度发生了变化并且需要对每个元素进行重绘:

<DataTemplate DataType="{x:Type xmlset:Variable}"><网格><Grid.ColumnDefinitions><列定义宽度=170"/><ColumnDefinition Width="*"/></Grid.ColumnDefinitions><边框BorderThickness="1,0,0,1" BorderBrush="黑色"><TextBlock Margin="2,2,0,2" Text="{Binding Path=Identifier.Name, Mode=OneWay}"/></边界><ItemsControl IsTabStop="False" Grid.Column="1" ItemsSource="{Binding Path=Values, Mode=OneWay}"><ItemsControl.ItemTemplate><数据模板><网格><Grid.ColumnDefinitions><列定义宽度=120"/><ColumnDefinition Width="*"/></Grid.ColumnDefinitions><Border Grid.Column="0" BorderThickness="1,0,0,1" BorderBrush="Black"><TextBlock Margin="2,2,0,2" Text="{Binding Path=Optimization, Mode=OneWay}"/></边界><Border Grid.Column="1" Width="Auto" BorderThickness="1,0,1,1" BorderBrush="Black"><TextBox Margin="0,2,0,2" BorderThickness="0" Text="{Binding Path=Value}" TextChanged="TextBox_TextChanged"/></边界></网格></数据模板></ItemsControl.ItemTemplate></ItemsControl></网格></数据模板>

这是围绕字段边缘绘制边框以进行视觉分组，其中 val 将拉伸到内容大小.列表框还具有 Horizo​​ntalContentAlignmment = Stretch 以确保这看起来正确.

<上一页>------------------- var - opt - val -- -------------- - 选择 - 验证 -- -------------- - 选择 - 验证 -------------------

注意:如果这需要在不同的问题中提出，请告诉我，我会分开问题

解决方案

为什么不关闭ListBox本身的任何大小限制，让它根据内容的大小包装到ScrollViewer中，为后者设置合适的大小?

标记应如下所示:

 <ScrollViewer Width="640px" Height="480px"><列表框><ListBox.ItemTemplate><数据模板><!--列表项的可视化--></数据模板></ListBox.ItemTemplate></列表框></滚动查看器>

如果以这种方式实现，我在滚动过程中看不到拇指大小的变化.

I have a ListBox with many objects displayed, each of which can be a variable height, based on the number of values each object has. See my previous question that was answered here.

Many objects are 5-lines high, while others are 1. The scroll bar in the ListBox does not appear to like this, probably due to the virtualization. While you scroll through, the thumb on the scroll bar will change its size, based on how many items are actually fitting into the box at that current moment. This makes the thumb very big at times, and very small at other times.

Since this ListBox is also contained within a TabControl, when you switch from one tab to another, the ListBox will often scroll to a different section when you return to it.

Any ideas how to resolve an issue like this?

Additional Info: Disabling virtualization does fix the scrolling problem, although at the cost of a slower initial display. However, resizing the ListBox with the content inside causes some heavy lag when resizing horizontally (vertical is fine), which I'm assuming is due to my template's width changing and requiring a redraw on every element:

<DataTemplate DataType="{x:Type xmlset:Variable}">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="170"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Border BorderThickness="1,0,0,1" BorderBrush="Black">
            <TextBlock Margin="2,2,0,2"  Text="{Binding Path=Identifier.Name, Mode=OneWay}"/>
        </Border>
        <ItemsControl IsTabStop="False" Grid.Column="1" ItemsSource="{Binding Path=Values, Mode=OneWay}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="120"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>

                        <Border Grid.Column="0" BorderThickness="1,0,0,1" BorderBrush="Black">
                            <TextBlock Margin="2,2,0,2" Text="{Binding Path=Optimization, Mode=OneWay}"/>
                        </Border>
                        <Border Grid.Column="1" Width="Auto" BorderThickness="1,0,1,1" BorderBrush="Black">
                            <TextBox Margin="0,2,0,2" BorderThickness="0" Text="{Binding Path=Value}" TextChanged="TextBox_TextChanged"/>
                        </Border>
                    </Grid>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
</DataTemplate>

This is drawing borders around the edges of the fields to make a visual grouping, where val will stretch to the content size. The listbox also has HorizontalContentAlignmment = Stretch to ensure this looks correct.

-------------------
- var - opt - val -
-     -------------
-     - opt - val -
-     -------------
-     - opt - val -
-------------------

note: if this needs to be asked in a different question, tell me and i'll seperate the questions

解决方案

Why not switch off any size restrictions on the ListBox itself, let it size to contents and wrap it into a ScrollViewer, setting a proper size for the latter?

The markup should look like the following:

    <ScrollViewer Width="640px" Height="480px">
        <ListBox>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <!--Visualization of a list item-->
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </ScrollViewer>

I saw no thumb size changings during scrolling if it was implemented this way.

这篇关于当内容是可变高度时，列表框滚动条拇指会改变大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！