XAML Gridview is not updating when property of item scource changes

Question

UPDATE:

This appears to be two separate bindings, one between the object in memory and the GridView, and one between the object in memory and the textbox.

The textbox propagates changes back to the object in memory, but those changes fail to reflect in the GridView's display.

ORIGINAL:

I have been doing a bit of research and tried a few different techniques, but I cannot get my gridview to update. The goal is to have a GridView displaying a list of item tiles, databound to an ObservableCollection. Beneath the GridView on the same page, is a form for editing the items in the GridView. When the user selects an item in the GridView, the form's textboxes (and other controls) auto-populate with the values of the properties of the selected item in the GridView. Modifying the control's values then changes the property values of that selected GridView item.

I have a Conference datatype, that includes a Name property (of type string). "Conferences" is of type ObservableCollection.

The gridview looks something like this (some properties eliminated here for brevity):

<GridView Style="{StaticResource HorizontalScrollGridView}"
                  Name="ConferencesGridView"
                  ItemsSource="{Binding Conferences, Mode=TwoWay}"
                  SelectionChanged="ConferencesGridView_SelectionChanged">

Inside of the GridView, is an item template that looks like this:

<GridView.ItemTemplate>
                <DataTemplate x:DataType="data:Conference">
                    <Grid Height="150"
                          Width="150">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"></RowDefinition>
                            <RowDefinition Height="*"></RowDefinition>
                        </Grid.RowDefinitions>

                        <TextBlock Grid.Row="0"></TextBlock>
                        <TextBlock Grid.Row="1"
                                   Text="{Binding Name, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
                                   TextWrapping="WrapWholeWords"></TextBlock>
                    </Grid>
                </DataTemplate>
            </GridView.ItemTemplate>

Note that the XML namespace "data:" is properly defined to reference the namespace the "Conference" datatype is defined in. There are no compile errors, only unexpected (or in this case altogether missing) behavior when the program runs.

Finally, on the same page, but NOT within the GridView, is the form for editing the currently selected item. It includes the textbox as follows:

<TextBox Name="ConferenceNameTextBox"
                 Text="{Binding Name, UpdateSourceTrigger=PropertyChanged}"
                 TextChanged="ConferenceNameTextBox_TextChanged"></TextBox>

The DataContext of the textbox is set programmatically, within the SelectionChanged eventhandler for the GridView:

ConferenceNameTextBox.DataContext = (Conference)ConferencesGridView.SelectedItem;

Now, within the TextChanged event handler for the Textbox, the following line of code modifies the property of the selected item in the GridView (I am aware that there are performance hit implications for using TextChanged instead of LostFocus, but I will address that after I get the basic concept working):

((Conference)ConferencesGridView.SelectedItem).Name = ConferenceNameTextBox.Text;

So, when running, I select different items in the GridView. No problems there; the textbox's value updates accordingly, displaying the value of the name of the currently selected GridView item.

I alter the text in the textbox, and that text successfully updates the item the GridView uses as a source. I have verified this by selecting different items in the GridView, and then returning to selecting the edited one, as well as navigating to different XAML pages within the frame, and then returning to the page it was edited on. The edited value is preserved.

The text displayed within the item template of the GridView, however, does not update when the textbox's text value is updated. The GridView only updates when the XAML page is reloaded (navigating away and then back to it in the frame it is contained within).

I have found through my research that ObservableCollection is sufficient for adding and removing items from the source (and indeed doing so does update on the GridView), but that this is not sufficient for altering the properties of a list item in the source.

I saw that implementing INotifyPropertyChanged is necessary on the source object (Conference object, in this case). I have done so. I have also read about needing the textbox to be two-way binding to the data source. I tried that as well, with no success:

public class Conference : INotifyPropertyChanged
{
    public string Name { get; set; }

    public event PropertyChangedEventHandler PropertyChanged = delegate { };

    public void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        // Raise the PropertyChanged event, passing the name of the property whose value has changed.
        this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
}

In ASP.NET, I recall just calling GridView.DataBind() after editing the data in the datasource, and that would refresh the GridView. There appears to be no equivalent in XAML though.

I am guessing something is missing, or I don't have the right combination of components. So in summary:

How can I get the GridView's displayed item (which includes displaying the Name property of the item) to update when a textbox (located outside of the GridView, and is for editing the Name property of the selected item in the GridView) value changes?

Answer 1

You can use ObservableCollection for example -

ObservableCollection<ClassName> DataList = new ObservableCollection<ClassName>(); //Declaration
gridName.ItemsSource=DataList;

It works for me... Thanks