WPF listview根据窗口高度将项目显示到列

Question

我一直试图创建一个列表视图来显示MySQL表，但是我不知道如何使用xaml使项目排列到列中？

这就是我所拥有的

这就是我想做的：

另外，当我调整窗口大小时，我希望将项目排列成这样的新列：

这是我的xaml代码：

<ListView Grid.Column="1" 
          Grid.Row="1" 
          x:Name="DBTables" 
          ItemsSource="{ Binding Path=TABLENAME
                       , Source={StaticResource DBManagerResource} }" 
          MinHeight="280" 
          MinWidth="400">
      <ListView.ItemContainerStyle>
          <Style TargetType="ListViewItem">
              <EventSetter Event="MouseDoubleClick"
                           Handler="DBTableSelect_MouseDoubleClick" />
          </Style>
      </ListView.ItemContainerStyle>
</ListView>

Answer 1

您需要具有Orientation="Vertical"的WrapPanel ，使用ScrollViewer.VerticalScrollBarVisibility="Disabled"列表视图的垂直滚动，并配置ListView.ItemTemplate以便在每个列表条目的前面显示图标。

<ListView MinHeight="280" MinWidth="400" ScrollViewer.VerticalScrollBarVisibility="Disabled">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel Orientation="Vertical"/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <ListView.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <!--Replace rectangle by your icon-->
                <Rectangle Width="15" Height="15" Margin="5" Fill="Red" VerticalAlignment="Center"/>
                <ContentControl Content="{Binding}" VerticalAlignment="Center"/>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Answer 2

听起来您正在寻找WrapPanel或类似的东西。 看一下这篇文章 。

您可能希望发挥物品的风格，使它们显示图标和文字，但这并不难实现。

Answer 3

此代码将在调整大小时处理项目。 也许会对您有帮助。

<ListView>
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel 
                    Width="{Binding (FrameworkElement.ActualWidth), RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}"
                    ItemWidth="{Binding (ListView.View).ItemWidth, RelativeSource={RelativeSource AncestorType=ListView}}"
                    MinWidth="{Binding ItemWidth, RelativeSource={RelativeSource Self}}"
                    ItemHeight="{Binding (ListView.View).ItemHeight, RelativeSource={RelativeSource AncestorType=ListView}}" />
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
        <ListView.ItemTemplate>
            <DataTemplate>
               <!-- Here you should add you item template, like image and text -->
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

Answer 4

您需要更改列表框的项目面板并禁用垂直滚动条

<ListBox ScrollViewer.VerticalScrollBarVisibility="Disabled">        
     <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel Orientation="Vertical"/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
</ListBox>