Search code examples
c#wpflistviewdata-bindingwpf-listview

C# WPF ListView control - Problem with binding data


I'm having some trouble binding data to a ListView control. I watched many tutorials where it seems like they did it the way I did here with either binding to a collection or a class that had a collection of items.

When I add the cars in this example nothing is added to the listview control. Anything obvious I have missed here? I have checked that the cars are added to the collection during runtime.

enter image description here

The car class:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace CarClasses
{

    internal class Car
    {
        string _brand = "";
        string _model = "";

        public Car(string brand, string model)
        {
            _brand = brand;
            _model = model; 
        }

        public string Brand
        {
            get { return _brand; }  
            set { _brand = value; }
        }

        public string Model
        { 
            get { return _model; } 
            set { _model = value; }
        }  

    }

}

MainWindow.xaml:

<Window x:Class="GridViewListView.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:GridViewListView"
        mc:Ignorable="d"
        Title="MainWindow" Height="300" Width="600">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="75"></ColumnDefinition>
            <ColumnDefinition Width="2*"></ColumnDefinition>
            <ColumnDefinition Width="7*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <ListView x:Name="lvCarList" ItemsSource="{Binding CarCollection }" Grid.Column="2" Width="200" Height="250" SelectionMode="Single" BorderThickness="3" BorderBrush="AliceBlue">
            <ListView.Style>
                <Style/>
            </ListView.Style>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="50"></RowDefinition>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="50"></ColumnDefinition>
                            <ColumnDefinition Width="100"></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <Label Grid.Row="0" Grid.Column="0" Content="{Binding Brand}"></Label>
                        <Label Grid.Row="0" Grid.Column="1" Content="{Binding Model}"></Label>
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
        <StackPanel Grid.Column="0">
            <TextBlock Text="Brand" Margin="10,10,0,0"></TextBlock>
            <TextBlock Text="Model" Margin="10,10,0,0"></TextBlock>
        </StackPanel>
        <StackPanel  Grid.Column="1" Margin="0,0,0,0">
            <TextBox Name="txtBrand" HorizontalAlignment="Left" Width="100" Margin="10,10,0,0"></TextBox>
            <TextBox Name="txtModel" HorizontalAlignment="Left" Width="100"  Margin="10,10,0,0"></TextBox>
            <Button Name="btnAdd" Content="Add" Margin="10, 10,10,10" Click="btnAdd_Click"></Button>
        </StackPanel>
    </Grid>
</Window>

MainWindow.xaml.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using CarClasses;

namespace GridViewListView
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    /// 


    public partial class MainWindow : Window
    {
        List<Car> CarCollection = new List<Car>();
        public MainWindow()
        {
            InitializeComponent();
                 
        }

        private void btnAdd_Click(object sender, RoutedEventArgs e)
        {
            Car newCar = new Car(txtBrand.Text, txtModel.Text);
            CarCollection.Add(newCar);  
            txtBrand.Text = "";
            txtModel.Text = "";
        }
    }
}

Solution

  • You should/need to specify the DataContext. And you need to make the Car's collection a public property. It's currently a field. And also it should be an ObservableCollection, because it's changed at runtime and changes should be displayed in the UI automatically.

        public partial class MainWindow : Window
        {
            public ObservableCollection<Car> CarCollection { get; } = new ObservableCollection<Car>();
            public MainWindow()
            {
                this.DataContext = this;
                InitializeComponent();
                     
            }
    
            private void btnAdd_Click(object sender, RoutedEventArgs e)
            {
                Car newCar = new Car(txtBrand.Text, txtModel.Text);
                CarCollection.Add(newCar);  
                txtBrand.Text = "";
                txtModel.Text = "";
            }
        }