WPF ListView横向改纵向自动换行（禁用垂直滚动条）实现方法

核心修改逻辑 #

要实现纵向排列、填满高度后自动换行至右侧列，同时禁用垂直滚动条，只需调整ItemsPanel内WrapPanel的关键属性，并优化滚动条配置：

1. 切换排列方向：将WrapPanel的Orientation从默认的Horizontal改为Vertical，使其优先纵向堆叠列表项，高度超出后自动向右创建新列。
2. 绑定容器高度：让WrapPanel的高度与ListView的可用高度绑定，确保触发自动换列的逻辑。
3. 滚动条优化：保留垂直滚动条禁用设置，按需开启水平滚动条避免内容截断。

修改后的完整代码 #

<ListView Grid.Row="1" x:Name="listviewViews" 
         HorizontalContentAlignment="Stretch" 
         Visibility="Visible" 
         ScrollViewer.VerticalScrollBarVisibility="Disabled"
         ScrollViewer.HorizontalScrollBarVisibility="Auto"
         SelectionMode="Single" 
         PreviewMouseRightButtonDown="OnPreviewMouseRightButtonDown" 
         SelectionChanged="listviewViews_SelectionChanged">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <!-- 核心修改：设置纵向排列，绑定高度到ListView的实际可用高度 -->
            <WrapPanel Orientation="Vertical"
                       Height="{Binding ActualHeight, RelativeSource={RelativeSource AncestorType=ListView}}"
                       ItemWidth="190" <!-- 与ItemTemplate中项的宽度保持一致 -->
                       ItemHeight="Auto"/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <ListView.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal" Width="190" Margin="0 5">
                <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition MinWidth="150"/>
                        <ColumnDefinition Width="35"/>
                    </Grid.ColumnDefinitions>
                    <StackPanel Orientation="Horizontal" Grid.Column="0">
                        <TextBlock FontFamily="{StaticResource FontAwesome}" Margin="5 0" VerticalAlignment="Center">
                            <TextBlock.Style>
                                <Style TargetType="{x:Type TextBlock}">
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding IsDisabled}" Value="True">
                                            <Setter Property="Text" Value="&#xf070;" />
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </TextBlock.Style>
                        </TextBlock>
                        <TextBlock x:Name="txt" Text="{Binding ViewName}" VerticalAlignment="Center"/>
                    </StackPanel>
                    <Button x:Name="btnViewDelete" ToolTip="{DynamicResource Delete}" Click="btnViewDelete_Click" Grid.Column="1">
                        <TextBlock HorizontalAlignment="Right" Text="&#xf1f8;" FontFamily="{StaticResource FontAwesome}" FontSize="12" VerticalAlignment="Center"/>
                    </Button>
                </Grid>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

关键细节说明 #

• Orientation="Vertical": 这是实现纵向排列的核心，WrapPanel会先沿纵向排列所有项，当自身高度不足以容纳时，自动向右生成新列继续排列。
• Height绑定: 将WrapPanel的高度绑定到ListView的ActualHeight，确保它能充分利用ListView的可用空间，触发自动换列逻辑。
• ItemWidth统一: 直接指定ItemWidth为190，与ItemTemplate中项的宽度保持一致，避免布局错乱。
• 滚动条配置: 禁用垂直滚动条的同时，设置水平滚动条为自动显示，保证多列时内容可横向滚动查看，不会被截断。

内容的提问来源于stack exchange，提问作者JuniorDeveloper