UI not updating when a property changes

Question

I have the Contact class that implements the INotifyPropertyChanged:

    public class Contact : INotifyPropertyChanged
    {
        public Contact(Contact contact)
        {
            this.Username = contact.Username;
            this.GUID = contact.GUID;
            this.Msg = contact.Msg;
            this.Ring = contact.Ring;
        }

        private string username;
    public string Username
    {
        get { return username; }
        set
        {
            username = value;
            NotifyPropertyChanged(nameof(Username));
        }
    }

    public Guid GUID { get; set; }
    public bool Msg { get; set; }

        private bool ring;
        public bool Ring
        {
            get { return ring; }
            set
            {
                ring = value;
                NotifyPropertyChanged(nameof(Ring));
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;
        public void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }

This is the main page :

    public sealed partial class MainPage : Page
        {
            public ObservableCollection<Contact> Contacts = new ObservableCollection<Contact>();

            public MainPage()
            {
                this.InitializeComponent();
                Contacts.Add(new Contact("Contact001", Guid.NewGuid(), false, false));
                Contacts.Add(new Contact("Contact002", Guid.NewGuid(), false, false));
            }

            private void AddContactButton_Click(object sender, RoutedEventArgs e)
            {
                Contacts.Add(new Contact("ContactN", Guid.NewGuid(), false, false));
            }

            private void ContactsListView_ItemClick(object sender, ItemClickEventArgs e)
            {
                Contact clickedContact = (Contact)e.ClickedItem;
                int index = Contacts.IndexOf(clickedContact);
                Contacts.ElementAt(index).Username = "Qwerty";
            }
        }
    }

This is the XAML :

<Page
    x:Class="ContactsListBinding.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ContactsListBinding"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:data="using:ContactsListBinding.Models"
    xmlns:namespace="ContactsListBinding.Models">

    <Page.Resources>
        <data:MessageToImageConverter x:Key="MessageToImageConverter" />
        <data:RingToImageConverter x:Key="RingToImageConverter" />
    </Page.Resources>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <StackPanel Grid.Row="0" Grid.Column="0">
            <Button Name="AddContactButton" Content="Add Contact" Click="AddContactButton_Click" />
            <CheckBox Name="MessageMeCheckBox" Content="Message me" />
            <CheckBox Name="DeleteMeCheckBox" Content="Delete me" />
        </StackPanel>

        <ListView Grid.Row="1" Grid.Column="0" Name="ContactsListView" 
                          IsItemClickEnabled="True" 
                          ItemClick="ContactsListView_ItemClick"
                          ItemsSource="{x:Bind Contacts}">
            <ListView.ItemTemplate>
                <DataTemplate x:DataType="data:Contact">
                    <Grid Width="500">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <TextBlock Grid.Row="0" Grid.Column="0" Text="{x:Bind Username}" VerticalAlignment="Center" />
                        <Image Grid.Row="0" Grid.Column="1" Width="15" Height="15" Source="{x:Bind Msg, Converter={StaticResource MessageToImageConverter}}" />
                        <Image Grid.Row="0" Grid.Column="2" Width="15" Height="15" Source="{x:Bind Ring, Converter={StaticResource RingToImageConverter}}" />
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
</Page>

So, when I click on an item, I change it's Ring property to true. I have debugged and it is changing to true. The only problem is that my UI isn't updating. Any ideas why?

Answer 1

Okay guys, I finally got it to work. It seems that the Binding Mode should be set to OneWay, instead of the default OneTime. For example the correct xaml should be:

<TextBlock Grid.Row="0" Grid.Column="0" Text="{x:Bind Username, Mode=OneWay}" VerticalAlignment="Center" />

Thank you very much for all your help! :)