Question

I have a gridview:

      <GridView xmlns:controls="using:Windows.UI.Xaml.Controls">
        <GridView.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Image Source="{Binding Image}"></Image>
                    <Grid Height="50" Width="50" Background="{Binding Color}"></Grid>
                    <TextBlock FontSize="25" TextWrapping="Wrap" Text="{Binding Name}" Margin="10,10,0,0"/>
                </Grid>
            </DataTemplate>
        </GridView.ItemTemplate>
    </GridView>

this is bound to a observablecollection:

   ObservableCollection<KeyItem> Keys = new ObservableCollection<KeyItem>();

   Keys.Add(new KeyItem { Name = "jfkdjkfd" });
   Keys.Add(new KeyItem { Name = "jfkdjkfd" });

   myView.ItemsSource = Keys;

The keyitem is this:

public class KeyItem
{
    public string Name { get; set; }
    public ImageSource Image { get; private set; }
    public Brush Color
    {
        get;
        set;
    }
}

This works fine if I set the color before I assign it to the itemssource.

But I want also to be able to change the color property programmatically of the KeyItem after it is assigned and have the Binding changing the color. But in this config this is not working.

What would be the best approach to get this working?

Answer 1

Your class needs to implement INotifyPropertyChanged. This is what allows the binding to know when to update. Having the observable collection only notifies bindings to the collection to get notified. Each object in the collection needs to have INotifyPropertyChanged implemented as well.

Note the use of [CallerMemberName] in NotifyPropertyChanged. This allows an optional parameter with a default value to take on the name of the calling member as its value.

public class KeyItem : INotifyPropertyChanged
{
    private string name;
    public string Name 
    {
        get
        {
            return name;
        }
        set
        {
            name = value;
            NotifyPropertyChanged();
        }
    }

    private ImageSource image;
    public ImageSource Image 
    {
        get
        {
            return image;
        }
        set
        {
            image = value;
            NotifyPropertyChanged();
        }
    }

    private Brush color;
    public Brush Color
    {
        get
        {
            return color;
        }
        set
        {
            color = value;
            NotifyPropertyChanged();
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    // This method is called by the Set accessor of each property. 
    // The CallerMemberName attribute that is applied to the optional propertyName 
    // parameter causes the property name of the caller to be substituted as an argument. 
    private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}