关于c#:WPF列表视图根据窗口高度将项目显示到列

 2021-02-24 

WPF listview display items to columns based on height of window

我一直在尝试创建一个列表视图来显示MySQL表,但是我不知道如何使用xaml将项目安排到列中?

这就是我所拥有的

My ListView

这就是我想做的:

Other program layout

此外,当我调整窗口大小时,我希望将项目排列到这样的新列中:
Resize Window- rearrange the items

这是我的xaml代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>


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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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>


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

1
2
3
4
5
6
7
<ListBox ScrollViewer.VerticalScrollBarVisibility="Disabled">        
     <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel Orientation="Vertical"/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
</ListBox>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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>

听起来好像您正在寻找WrapPanel或类似名称。看看这篇文章。

您可能想玩一下项目的样式,以便它们显示图标和文本,但这并不难实现。