WPF 绑定列表框垂直对齐不按预期工作

Question

在阅读了我能找到的关于 WPF 列表框和堆栈面板控件的所有内容之后，我仍然不知道是什么导致了这种行为。我希望我的列表框从上到下堆叠项目而没有大量 space，但是无论我做什么，似乎每个项目之间都有很大的差距。我已确保将 VerticalContentAlignment="Top" 属性添加到列表框并设置我的堆栈面板的垂直对齐方式，因此它不会默认为拉伸。这是代码：

<Grid>

        <ListBox x:Name="listView" HorizontalAlignment="Stretch" SelectionMode="Multiple" IsHitTestVisible="True" VerticalContentAlignment="Top">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid Columns="1"/>
                </ItemsPanelTemplate>

            </ItemsControl.ItemsPanel>

            <ListBox.ItemContainerStyle>
                <Style TargetType="ListBoxItem">
                    <Setter Property="IsSelected" Value="{Binding Content.IsSelected, Mode=TwoWay, RelativeSource={RelativeSource Self}}"/> 
                    <Setter Property="VerticalContentAlignment" Value="Top"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="ListBoxItem">
                                <ContentPresenter/>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ListBox.ItemContainerStyle>


            <ListBox.ItemTemplate>

                <DataTemplate>

                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" Margin="0,0,0,10" VerticalAlignment="Top" Background="Black">
                        <CheckBox IsChecked="{Binding RelativeSource={RelativeSource AncestorType=ListBoxItem},Path=IsSelected}" BorderBrush="#FF242424" VerticalAlignment="Center">
                            <CheckBox.LayoutTransform>
                                <ScaleTransform ScaleX="4" ScaleY="4" />
                            </CheckBox.LayoutTransform>
                        </CheckBox>                      
                        <Image Source="{Binding Image}" HorizontalAlignment="Left"  VerticalAlignment="Top" Stretch="None" />
                        <StackPanel Orientation="Vertical" VerticalAlignment="Top">
                            <TextBlock Text="{Binding Test1}" FontSize="22" Margin="5,0,0,3" FontWeight="UltraLight"></TextBlock>
                            <TextBlock Text="{Binding Test2}" FontSize="11" Foreground="#FF585656" Margin="5,0,0,3" FontWeight="UltraLight"/>
                            <TextBlock Text="{Binding Test3}" FontSize="11" Foreground="#FF585656" Margin="5,0,0,0" FontWeight="UltraLight"/>
                        </StackPanel>

                    </StackPanel>

                </DataTemplate>


            </ListBox.ItemTemplate>

        </ListBox>
    </Grid>

结果如下：

出于故障排除目的，我将黑色背景添加到堆栈面板项目，以确保它不会拉伸到可用高度。

无论我做什么，它似乎都正确地将第一个列表项放在顶部，但它们在所有连续的项目之间放置了很大的间隙。有什么想法吗？

Answer 1

您的 ItemsPanelTemplate 中的 UniformGrid 将可用 space 平均分配给 children。在 ItemContainerStyle 中添加背景 setter，您会看到 ListBoxItems 占据了所有白色 space。它们的内容是 top-aligned，但它们本身被垂直拉伸以填充它们的 parent、UniformGrid 给它们的 "cells"。

如果您的 ListBoxItem.VerticalContentAlignment 是 Stretch，连同 DataTemplate 中的 StackPanel 的 VerticalAlignment，项目内容将伸展以填充ListBoxItems。但这不是你想要的。

如果您希望项目从顶部填充，您可以在 ItemPanelTemplate 中使用垂直方向的 StackPanel。这是 ListBox 为自己创建的默认值，所以如果您只是删除 ItemPanelTemplate，这就是您将得到的。

WPF 绑定列表框垂直对齐不按预期工作

WPF bound listBox vertical alignment not working as expected

wpf

listbox

stackpanel