Add Items to ListView in WPF (Custom 'Item')

Question

I am new at WPF, just learning. How can I add items to the listview to keep the builded style?

I want to add the Items in this style.

XAMLCode:

 <ListView x:Name="listv_Main" Width="740" Height="400">
            <ListViewItem>
                <Grid x:Name="Grid_Main_series" Height="70" Width="723" Background="#FF0299D1">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>

                    <StackPanel Margin="10 0 0 0" Orientation="Horizontal" VerticalAlignment="Center">
                        <Image Width="74" Height="68" Stretch="Uniform"  HorizontalAlignment="Left" Source="https://myanimelist.cdn-dena.com/images/anime/2/75259.jpg"/>
                        <Separator Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}" Width="2" Height="50" Background="#FF93999B" />

                        <StackPanel Orientation="Vertical">
                            <TextBlock Height="20" Margin="0 10 0 5" FontFamily="Arial" FontSize="11" Foreground="AntiqueWhite"><Run Text="Full Metal Panic!"/></TextBlock>
                            <TextBlock Height="20" Margin="0 5 0 4" FontFamily="Arial" FontSize="11" Foreground="AntiqueWhite"><Run Text="Full Metal Panic!"/></TextBlock>
                        </StackPanel>

                        <Separator Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}" Width="2" Height="50" Background="#FF93999B" />

                        <StackPanel x:Name="stack_Main_series" Height="70" Width="530" VerticalAlignment="Top" HorizontalAlignment="Right">
                            <TextBlock Margin="0 5 10 0" Text="Episodes: 24/12" FontWeight="Thin" HorizontalAlignment="Right" Foreground="AntiqueWhite"/>
                            <TextBlock Margin="0 5 10 0" Text="Finished Airing" FontWeight="Thin" HorizontalAlignment="Right" Foreground="AntiqueWhite"/>
                        </StackPanel>

                    </StackPanel>
                </Grid>
            </ListViewItem>
        </ListView>

Answer 1

Here is a very simple example which you can extend for your purpose. Please let me know if you have any problem understanding something.

MainWindow.xaml

<Window x:Class="WpfApp5.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"
    xmlns:local="clr-namespace:WpfApp5"
    mc:Ignorable="d"
    Title="MainWindow" Height="450" Width="800">
<Grid>
  <ListView Width="740" Height="400" ItemsSource="{Binding MyListItems}">
    <ListView.View>
      <GridView>
        <GridViewColumn DisplayMemberBinding="{Binding Path=Title}"
                        Header="Title" />
        <GridViewColumn DisplayMemberBinding="{Binding Path=Description}"
                        Header="Description" />
        <GridViewColumn DisplayMemberBinding="{Binding Path=ReleaseDate}"
                        Header="Release" />

      </GridView>

    </ListView.View>
  </ListView>
</Grid>

MainWindow.cs

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        DataContext = new MyClass();
    }
}

The ViewModel

public class MyClass : INotifyPropertyChanged
{
    private ObservableCollection<MyListItem> _myListItems;

    public ObservableCollection<MyListItem> MyListItems
    {
        get => _myListItems;
        set
        {
            _myListItems = value;
            OnPropertyChanged(nameof(MyListItems));
        }
    }

    public MyClass()
    {
        MyListItems = new ObservableCollection<MyListItem>();

        MyListItems.Add( new MyListItem()
                         {
                             Title = "Title1",
                             Description = "This is description nr1",
                             ReleaseDate = DateTime.Now
                         } );
        MyListItems.Add( new MyListItem()
                         {
                             Title = "Title2",
                             Description = "This is description nr2",
                             ReleaseDate = DateTime.Now
                         } );
        MyListItems.Add( new MyListItem()
                         {
                             Title = "Title3",
                             Description = "This is description nr3",
                             ReleaseDate = DateTime.Now
                         } );
    }



    public event PropertyChangedEventHandler PropertyChanged;

    [NotifyPropertyChangedInvocator]
    protected virtual void OnPropertyChanged( [CallerMemberName] string propertyName = null )
    {
        PropertyChanged?.Invoke( this, new PropertyChangedEventArgs( propertyName ) );
    }

And the class which represents one entry in your list:

public class MyListItem : INotifyPropertyChanged
{
    private string _title;

    public string Title
    {
        get => _title;
        set
        {
            _title = value;
            OnPropertyChanged( nameof( Title ) );
        }
    }

    private string _description;
    public string Description
    {
        get => _description;
        set
        {
            _description = value;
            OnPropertyChanged( nameof( Description ) );
        }
    }

    private DateTime _releaseDate;
    public DateTime ReleaseDate
    {
        get => _releaseDate;
        set
        {
            _releaseDate = value;
            OnPropertyChanged(nameof(ReleaseDate));
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    [NotifyPropertyChangedInvocator]
    protected virtual void OnPropertyChanged( [CallerMemberName] string propertyName = null )
    {
        PropertyChanged?.Invoke( this, new PropertyChangedEventArgs( propertyName ) );
    }
}

If you search for "MVVM" and "Wpf Databinding" on google you´ll find a lot of tutorials and examples.

Answer 2

Using itemtemplate is the short answer. And you may as well use a listbox since this isn't things in columns.

Take a look at this:

https://social.technet.microsoft.com/wiki/contents/articles/32164.wpf-mvvm-step-by-step-2.aspx

That uses an observablecollection. If you want multiple properties for your textblocks you'd want a more complex class with multiple public properties instead of just a string. You'd bind the Text properties of your textblocks to each.