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

您需要使用WrapPanel Orientation="Vertical"，使用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或类似的东西。看看this article。

你可能想要对你的项目风格进行游戏，这样他们就会显示一个图标和一个文字，但这并不难实现。

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的items面板并禁用垂直滚动条

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

WPF listview根据窗口高度

4 个答案: