如何创建特定编号的 ListView。 WPF 中的列数？答案

【问题标题】：How can i create a ListView of specific no. of columns in WPF?如何创建特定编号的 ListView。 WPF 中的列数？
【发布时间】：2018-06-08 09:46:05
【问题描述】：

我想创建一个包含 3 列的 ListView，我正在 ListView 标记内创建一个 GridView，但这并没有提供我想要的相同结果。

附件是我想要的结果。

这是我正在使用的一段代码。

[![<ListView Name="List1" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,70,0,0" ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollBarVisibility="Hidden" Background="Transparent" BorderThickness="0" RenderTransformOrigin="-1.33,-0.562" SelectionChanged="ListView_SelectionChanged">
            <ListView.View>
                <GridView ColumnHeaderContainerStyle="{StaticResource myHeaderStyle}">
                    <GridViewColumn>
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <DockPanel HorizontalAlignment="Right" Height="200" Width="200" LastChildFill="False" VerticalAlignment="Top">
                                    <StackPanel Orientation="Vertical">
                                        <Grid>
                                            <Label Content="{Binding username}" Width="100" Height="200" VerticalAlignment="Bottom" HorizontalAlignment="Center"/>
                                            <Image Source="{Binding imageSource}" Width="100" Height="100"/>
                                        </Grid>
                                    </StackPanel>
                                </DockPanel>
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>
                    <GridViewColumn>
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <DockPanel HorizontalAlignment="Right" Height="200" Width="200" LastChildFill="False" VerticalAlignment="Top">
                                    <StackPanel Orientation="Vertical">
                                        <Grid>
                                            <Label Content="{Binding username}" Width="100" Height="200" VerticalAlignment="Bottom" HorizontalAlignment="Center"/>
                                            <Image Source="{Binding imageSource}" Width="100" Height="100"/>
                                        </Grid>
                                    </StackPanel>
                                </DockPanel>
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>
                    <GridViewColumn>
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <DockPanel HorizontalAlignment="Right" Height="200" Width="200" LastChildFill="False" VerticalAlignment="Top">
                                    <StackPanel Orientation="Vertical">
                                        <Grid>
                                            <Label Content="{Binding username}" Width="100" Height="200" VerticalAlignment="Bottom" HorizontalAlignment="Center"/>
                                            <Image Source="{Binding imageSource}" Width="100" Height="100"/>
                                        </Grid>
                                    </StackPanel>
                                </DockPanel>
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>
                </GridView>
            </ListView.View>
        </ListView>][1]][1]

【问题讨论】：

我看不到附图看你想要的结果...
@KFactory 请再次检查。
好的，谢谢，您的代码正在编译吗？我们可以看看你得到了什么？
是的，我的代码正在编译，我已经附上了我的结果的另一张图片。

标签： c# wpf xaml listview data-binding

【解决方案1】：

更好的方法是使用UniformGrid 作为ItemsPanel 的ItemsPanel。

<ListView>
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
           <UniformGrid Columns="3" />
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    ...
</ListView>

下面是一个使用ListBox 而不是ListView 的示例，如 cmets 中所述。这是我推荐的方式，除非您需要ListView 的一些特殊功能，因为它会更高效。

这使用AgentOctal.WpfLib NuGet 包（我是这个包的作者）为基础ViewModel 类提供属性更改通知和命令支持。不过，您应该能够替换任何正确实现 INotifyPropertyChanged 的工作方法。

XAML：

<Window
    x:Class="ColumnsTest.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:ListViewColumns"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="MainWindow"
    Width="800"
    Height="450"
    mc:Ignorable="d">
    <Window.DataContext>
        <local:MainWindowVm />
    </Window.DataContext>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <ListBox
            Grid.Row="0"
            HorizontalContentAlignment="Stretch"
            VerticalContentAlignment="Stretch"
            ItemsSource="{Binding Path=People}">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid Columns="3" />
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Border
                            Height="{Binding RelativeSource={RelativeSource Self}, Path=ActualWidth}"
                            Margin="4"
                            BorderBrush="Black"
                            BorderThickness="1">
                            <TextBlock Text="{Binding Path=Name}" />
                        </Border>
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        <Button
            Grid.Row="1"
            Command="{Binding Path=AddPersonCommand}"
            Content="Add Person" />
    </Grid>
</Window>

查看模型：

namespace ColumnsTest
{
    using System.Windows.Input;
    using AgentOctal.WpfLib;
    using AgentOctal.WpfLib.Commands;

    class MainWindowVm : ViewModel
    {
        public MainWindowVm()
        {
            People = new ObservableCollection<PersonVm>();
        }

        public ObservableCollection<PersonVm> People { get; }

        private ICommand _addPersonCommand;
        public ICommand AddPersonCommand
        {
            get
            {
                return _addPersonCommand ?? (_addPersonCommand = new SimpleCommand((obj) =>
                                        {
                                            People.Add(new PersonVm() { Name = Guid.NewGuid().ToString() });
                                        }));
            }
        }

    class PersonVm : ViewModel
    {
        private string _name;
        public string Name
        {
            get { return _name; }
            set { SetValue(ref _name, value); }
        }

    }
}

它产生以下结果：

【讨论】：

这是一个简单的解决方案。我直接实现了我的愿望:-)我很感激
请注意，您还可以使用 ListBox，即 ListView 的基类。
使用ListView 而不是ListBox 的主要好处是ListView 允许您拥有多个数据视图。如果您不需要该功能，请坚持使用ListBox，正如@Clemens 提到的那样；这是一个更轻量级的控件，并且性能更高。
听起来不错。我现在正在使用 ListView，它完美地解决了我的问题。
作为旁注，我绝对喜欢 WPF 的 ListBox 足够聪明，可以弄清楚左、右、上和下的正确行为执行此操作时自动键。