如何使用自定义项模板修复列表框的布局答案

【问题标题】：How to fix layout of list box with custom item template如何使用自定义项模板修复列表框的布局
【发布时间】：2019-05-04 17:16:02
【问题描述】：

我已将自定义 ItemTemplate 应用到 ListBox 控件，但布局有问题。当 ListBox 滚动到底部并调整大小时，项目溢出：

看来，如果我向上滚动，布局最终会得到纠正：

如果我删除设置 HorizontalContentAlignment 的行，问题就会消失（但我希望拉伸列表项以填充可用空间）...

任何帮助将不胜感激。

<ListBox x:Name="myList" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Visible">
        <ListBox.ItemContainerStyle>
            <Style TargetType="{x:Type ListBoxItem}">
                <Setter Property="HorizontalContentAlignment"  Value="Stretch"></Setter>
            </Style>
        </ListBox.ItemContainerStyle>            
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>

                    <TextBlock Background="Lime" TextWrapping="Wrap" Text="{Binding Comments}"/>
                    <Grid Grid.Column="1" Background="Aqua">
                        <Button Width="20" Height="20" Content="..."/>
                    </Grid>
                </Grid>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

【问题讨论】：

标签： .net wpf xaml

【解决方案1】：

ListBox 的默认ItemsPanel 是VirtualizingStackPanel，它无法很好地处理Stretch 对齐。相反，请尝试仅包含一列的 UniformGrid。

<ListBox.ItemsPanel>
    <ItemsPanelTemplate>
        <UniformGrid Columns="1"/>
    </ItemsPanelTemplate>
</ListBox.ItemsPanel>

【讨论】：

虽然您的建议似乎确实有效，但如果没有虚拟化，性能就不够好（我一直在测试多达 10000 个项目）。一个可行的方法是将事件处理程序添加到 ListBox 的 SizeChanged 事件并调用 myList.Items.Refresh()。感觉没有必要这样做，但到目前为止，这是我遇到的最好的折衷方案，尽管它并非没有性能问题（调整窗口大小时会出现一些明显的口吃）。