Hoffma
Hoffma

Reputation: 136

MVVM ItemsControl Simple Binding

Seems simple, but I can't get it to work. None of the questions or examples I can find are able to demonstrate what I'm attempting here. I'm trying to bind an ItemControl within a UserControl to the UserControl's _viewModel, where an ObservableCollection called MyCoolStuff contains CoolStuff objects with a string Name. I'm only trying to show Name in the UI currently, and plan to develop my ItemTemplate from there. How do I set up these bindings without breaking MVVM?

XAML:

<UserControl x:Class="MvvmPlayground01.ItemControlView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:MvvmPlayground01"
             mc:Ignorable="d" 
             Background="Coral"
             d:DesignHeight="300" d:DesignWidth="300">
    <ItemsControl ItemsSource="{Binding MyCoolStuff}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Name}"/>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</UserControl>

Code Behind:

public partial class ItemControlView : UserControl
{
    public ItemControlViewModel _viewModel = new ItemControlViewModel();

    public ItemControlView()
    {
        InitializeComponent();
        DataContext = _viewModel;
    }
}

View Model:

public class ItemControlViewModel : NotificationBase
{
    public ObservableCollection<CoolStuff> MyCoolStuff = new ObservableCollection<CoolStuff>() {
        new CoolStuff() { Name = "Cool Book", Description = "A copy of a really cool book", Date = "1979" },
        new CoolStuff() { Name = "Cool Movie", Description = "A copy of a really cool movie", Date = "1980" },
        new CoolStuff() { Name = "Cool Album", Description = "A copy of a really cool album", Date = "1991" }
    };
}

Cool Stuff:

public class CoolStuff : NotificationBase
{
    private string _name;
    public string Name
    {
        get
        {
            return _name;
        }
        set
        {
            _name = value;
            OnPropertyChanged("Name");
        }
    }

    private string _description;
    public string Description
    {
        get
        {
            return _description;
        }
        set
        {
            _description = value;
            OnPropertyChanged("Description");
        }
    }

    private string _date;
    public string Date
    {
        get
        {
            return _date;
        }
        set
        {
            _date = value;
            OnPropertyChanged("Date");
        }
    }
}

Notification Base:

public class NotificationBase : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

Upvotes: 0

Views: 94

Answers (1)

sdk
sdk

Reputation: 36

Data binding only works with public properties, not fields.

So change your view model like this:

public class ItemControlViewModel : NotificationBase
{
    public ObservableCollection<CoolStuff> MyCoolStuff { get; set; }

    public ItemControlViewModel()
    {
        MyCoolStuff = new ObservableCollection<CoolStuff>()
        {
            new CoolStuff() { Name = "Cool Book", Description = "A copy of a really cool book", Date = "1979" },
            new CoolStuff() { Name = "Cool Movie", Description = "A copy of a really cool movie", Date = "1980" },
            new CoolStuff() { Name = "Cool Album", Description = "A copy of a really cool album", Date = "1991" }
        };
    }
}

Or this:

public ObservableCollection<CoolStuff> MyCoolStuff { get; } = new ObservableCollection<CoolStuff>()
{
    new CoolStuff() { Name = "Cool Book", Description = "A copy of a really cool book", Date = "1979" },
    new CoolStuff() { Name = "Cool Movie", Description = "A copy of a really cool movie", Date = "1980" },
    new CoolStuff() { Name = "Cool Album", Description = "A copy of a really cool album", Date = "1991" }
};

Upvotes: 2

Related Questions