如何创建特定号的ListView。 WPF中的列？

Question

I want to create a ListView with 3 columns, i am creating a GridView inside ListView tag, but this is not providing me the same results i want.

Attached is the picture i want as result.

This is the piece of code i am using.

[![<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]

Answer 1

The better way to do this is by using a UniformGrid as the ItemsPanel of the ListView .

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

---

Here is an example of doing this with a ListBox instead of a ListView , as discussed in the comments. This is the way I would recommend, unless you need some of the special features of the ListView , as it will be more performant.

This uses the AgentOctal.WpfLib NuGet package (I am the author of this package) for the base ViewModel class to provide the property change notifications and Command support. You should be able to substitute any working method that properly implements INotifyPropertyChanged though.

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>

View models:

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); }
        }

    }
}

It produces he following result: