WinRT XAML Toolkit BindableSelections not updating UI

Question

Below is the xaml and c# code for handling selected items in my gridview.

I am also using MVVM Light and everything is working, including me being able to see what's inside SelectedItems.

However I when I attempt to clear the SelectedItems, my UI doesn't seem to update/reflect the changes made to SelectedItems.

I am using WinRT XAML Toolkit (http://winrtxamltoolkit.codeplex.com/) which has the BindableSelection extension on a GridView

XAML

<controls:CustomGridView
    x:Name="VideoItemGridView"
    Grid.Row="2"
    Margin="0,-3,0,0"
    Padding="116,0,40,46"
    HorizontalContentAlignment="Stretch"
    VerticalContentAlignment="Stretch"
    IsItemClickEnabled="True"
    SelectionMode="Extended"
    Extensions:GridViewExtensions.BindableSelection="{Binding SelectedVideoItems, Mode=TwoWay}"
    ItemsSource="{Binding Source={StaticResource ViewSource}}"
    ItemTemplate="{StaticResource VideoItemTemplate}">
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <VariableSizedWrapGrid ItemWidth="250" ItemHeight="160" />
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
</controls:CustomGridView>

MyViewViewModel.cs

#region Selected Items

/// <summary>
/// Gets or sets the selected video items.
/// </summary>
public ObservableCollection<object> SelectedVideoItems
{
    get { return this._selectedVideoItems; }
    set
    {
        this._selectedVideoItems = value;
        this.Set("SelectedVideoItems", ref this._selectedVideoItems, value);
    }
}
private ObservableCollection<object> _selectedVideoItems = new ObservableCollection<object>();

#endregion

#region App Bar Click Commands

/// <summary>
/// Gets the ClearSelection click command.
/// </summary>
public ICommand ClearSelectionClickCommand
{
    get
    {
        return new RelayCommand(() => this.ClearSelectionOperation());
    }
}

/// <summary>
/// Selects all command operation.
/// </summary>
private void ClearSelectionOperation()
{
    this.SelectedVideoItems = new ObservableCollection<object>();
}

#endregion

Answer 1

It turns out that since I am using a data template, it is actually my data model that needed to set a flag to indicate it is selected

Here's the missing piece of the puzzle. Once I update the data model bound to the grid view item (which also includes support for row/col spanning), the UI updated as expected.

Hope this helps others.

public class CustomGridView : GridView
{
    protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
    {
        try
        {
            base.PrepareContainerForItemOverride(element, item);

            dynamic _Item = item;
            element.SetValue(VariableSizedWrapGrid.ColumnSpanProperty, _Item.ColumnSpan);
            element.SetValue(VariableSizedWrapGrid.RowSpanProperty, _Item.RowSpan);
            element.SetValue(GridViewItem.IsSelectedProperty, _Item.IsSelected);
        }
        catch
        {
            element.SetValue(VariableSizedWrapGrid.ColumnSpanProperty, 1);
            element.SetValue(VariableSizedWrapGrid.RowSpanProperty, 1);
            element.SetValue(GridViewItem.IsSelectedProperty, false);
        }
        finally
        {
            base.PrepareContainerForItemOverride(element, item);
        }
    }

Answer 2

Try clearing your selected items in ClearSelectionOperation by calling

this.SelectedVideoItems.Clear();

instead of

this.SelectedVideoItems = new ObservableCollection<object>();

If that doesn't help check if the current version of the extension from March 7 fixes the problem.