WPF动态添加带有detals的ListViewItem

Posted 2021-04-10

我想添加ListViewItem与更改的细节，如图像的链接，文本框中的文本等。我​​该怎么办？

    <ListView VerticalAlignment="Bottom" Margin="10" Height="170" Foreground="LightSteelBlue">
        <ListViewItem>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="01" VerticalAlignment="Center"/>
                <Ellipse Margin="20,0" Width="30" Height="30" VerticalAlignment="Center">
                    <Ellipse.Fill>
                        <ImageBrush ImageSource="images/pobrane.jpg"/>
                    </Ellipse.Fill>
                </Ellipse>
                <TextBlock Text="Three Days Grace - I Hate Everything About You (Official Music Video)" Width="115" TextTrimming="CharacterEllipsis" VerticalAlignment="Center" />
                <TextBlock Text="3:45" Margin="10,0" VerticalAlignment="Center" />
            </StackPanel>
        </ListViewItem>
    </ListView>

我想创建一个函数，它将添加相同的代码，就像我向您展示的更改细节。

答案

您可以使用WPF Listview的ItemTemplate和ItemsSource属性以及Binding概念。

举个例子，从你的问题开始：

您可以将以下代码添加到新WPF项目的MainWindow文件中：MainWindow.xaml文件应如下所示：

<Window x:Class="WpfApp1.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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Button Click="Button_Click" 
                VerticalAlignment="Top"
                HorizontalAlignment="Left"
                Margin="10"
                Content="Add item"/>
        <ListView VerticalAlignment="Bottom"
                  Margin="10"
                  Height="170"
                  ItemsSource="{Binding Tracks}"
                  Foreground="LightSteelBlue">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding Number}"
                                   VerticalAlignment="Center" />
                        <Ellipse Margin="20,0"
                                 Width="30"
                                 Height="30"
                                 VerticalAlignment="Center">
                            <Ellipse.Fill>
                                <ImageBrush ImageSource="{Binding Image}" />
                            </Ellipse.Fill>
                        </Ellipse>
                        <TextBlock Text="{Binding Name}"
                                   Width="115"
                                   TextTrimming="CharacterEllipsis"
                                   VerticalAlignment="Center" />
                        <TextBlock Text="{Binding Length}"
                                   Margin="10,0"
                                   VerticalAlignment="Center" />
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
</Window>

MainWindow.xaml.cs文件应如下所示：

using System;
using System.Collections.ObjectModel;
using System.Windows;
using System.Windows.Media;
using System.Windows.Media.Imaging;

namespace WpfApp1
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public ObservableCollection<Track> Tracks { get; set; }
        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = this;

            Tracks = new ObservableCollection<Track>();
            AddTrack("01","Three Days Grace - I Hate Everything About You (Official Music Video)", "3:45", new BitmapImage(new Uri("pack://application:,,,/WpfApp1;component/Resources/pobrane.jpg")));
        }

        public void AddTrack (string number, string name, string length, ImageSource image)
        {
            var track = new Track();
            track.Number = number;
            track.Name = name;
            track.Length = length;
            track.Image = image;
            Tracks.Add(track);
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            AddTrack("01", "Three Days Grace - I Hate Everything About You (Official Music Video)", "3:45", new BitmapImage(new Uri("pack://application:,,,/WpfApp1;component/Resources/pobrane.jpg")));
        }
    }

    public class Track
    {
        public string Number { get; set; }

        public string Name { get; set; }

        public string Length { get; set; }

        public ImageSource Image { get; set; }
    }
}

当然，这只是一个起点。您应继续搜索并阅读MVVM概念并将逻辑移至视图模型。