Value does not fall within the expected range - Windows 8.1 App

Question

Place in code that i get the exception:

EventHandler(this, new ObservableDictionaryChangedEventArgs(change, key));

---

 namespace TestGridApp
 {

    public sealed partial class ItemDetailPage : Page
    {
        private NavigationHelper navigationHelper;
        private ObservableDictionary defaultViewModel = new ObservableDictionary();

        public NavigationHelper NavigationHelper
        {
            get { return this.navigationHelper; }
        }

        public ObservableDictionary DefaultViewModel
        {
            get { return this.defaultViewModel; }
        }

        public ItemDetailPage()
        {
            this.InitializeComponent();
            this.navigationHelper = new NavigationHelper(this);
            this.navigationHelper.LoadState += navigationHelper_LoadState;
        }

        private async void navigationHelper_LoadState(object sender, LoadStateEventArgs e)
        {
            // TODO: Create an appropriate data model for your problem domain to replace the sample data

            var mitem = await MovieDataSource.GetItemAsync((String)e.NavigationParameter);
            //this.DefaultViewModel["Item"] = mitem;

            ItemDetailGridView.ItemsSource = mitem;

        }

        #region NavigationHelper registration

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            navigationHelper.OnNavigatedTo(e);
        }

        protected override void OnNavigatedFrom(NavigationEventArgs e)
        {
            navigationHelper.OnNavigatedFrom(e);
        }

        #endregion
    }
}

Xaml:

<Page
    x:Name="pageRoot"
    x:Class="TestGridApp.ItemDetailPage"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TestGridApp"
    xmlns:data="using:TestGridApp.Data"
    xmlns:common="using:TestGridApp.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ChildrenTransitions>
            <TransitionCollection>
                <EntranceThemeTransition/>
            </TransitionCollection>
        </Grid.ChildrenTransitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--
            TODO: Content should be placed within the following grid 
                  to show details for the current item
        -->
        <Grid Grid.Row="1" x:Name="contentRegion">
            <GridView FlowDirection="LeftToRight" ItemsSource="{Binding Item}" x:Name="ItemDetailGridView">
                <GridView.ItemTemplate>
                    <DataTemplate>
                        <Grid Height="110" Width="480" Margin="10">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="10,0,0,0" Orientation="Vertical">
                                <TextBlock Text="{Binding OverView}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap"/>
                                <StackPanel>
                                    <TextBlock Text="{Binding CreatedBy}" Style="{StaticResource BodyTextBlockStyle}" TextWrapping="NoWrap"/>
                                    <TextBlock Text="{Binding EpisodeRunTime}" Style="{StaticResource BodyTextBlockStyle}" TextWrapping="NoWrap"/>
                                    <TextBlock Text="{Binding homepage}" Style="{StaticResource BodyTextBlockStyle}" TextWrapping="NoWrap"/>
                                </StackPanel>

                            </StackPanel>
                        </Grid>
                    </DataTemplate>
                </GridView.ItemTemplate>

                <GridView.Header>
                    <StackPanel Width="600" Margin="40,4,14,0">
                        <TextBlock Text="{Binding Title}" Margin="0,0,0,20" Style="{StaticResource SubheaderTextBlockStyle}" MaxHeight="60"/>
                        <Image Source="{Binding ImagePath}" Height="420" Margin="0,0,0,20" Stretch="UniformToFill"/>
                        <TextBlock Text="{Binding Airdate}" Margin="0,0,0,0" Style="{StaticResource BodyTextBlockStyle}"/>
                    </StackPanel>
                </GridView.Header>

            </GridView>
        </Grid>

        <!-- Back button and page title -->
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="120"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton" Margin="39,59,39,0" Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
                        Style="{StaticResource NavigationBackButtonNormalStyle}"
                        VerticalAlignment="Top"
                        AutomationProperties.Name="Back"
                        AutomationProperties.AutomationId="BackButton"
                        AutomationProperties.ItemType="Navigation Button"/>
            <TextBlock x:Name="pageTitle" Text="{Binding UniqueId}" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" 
                        IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,30,40"/>
        </Grid>
    </Grid>
</Page>

---

I don't know why this is not working, but I have googled more than 5 hours for this.

Answer 1

In your sample there is not a good MVVM system. In xaml you bound your GridView to a property named Item:

<GridView FlowDirection="LeftToRight" ItemsSource="{Binding Item}" x:Name="ItemDetailGridView">

The Item must be one of your ViewModel class properties or one of the ItemDetailPage class properties but i don't see this in your codes! Then you are trying to fill the ItemsSource with a collection in code behind...

---

I recommend you to try make a correct MVVM system for your project. You can do it base on these steps:

1) Create a Model class from your Item Entity. for example:

public Class MyItemModel{

    public string OverView {get; set;}
    public string CreatedBy {get; set;}
    public string Homepage {get; set;}

}

2) Create a ViewModel Class inherited from INotifyPropertyChanged interface. for example:

public class MyItemViewModel: INotifyPropertyChanged
{
    private ObservableCollection<MyItemModel> _myItems;
    private string _createdBy;
    private string _homepage;

    public ObservableCollection<MyItemModel> MyItems
    {
        get { return _myItems; }
        set
        {
            _myItems = value;
            OnPropertyChanged("MyItems");
        }
    }
    public string CreatedBy
    {
        get { return _createdBy; }
        set
        {
            _createdBy = value;
            OnPropertyChanged("CreatedBy");
        }
    }
    public string Homepage
    {
        get { return _homepage; }
        set
        {
            _homepage = value;
            OnPropertyChanged("Homepage");
        }
    }

    //-----------------------------------------------------------------------

    public MyItemViewModel()
    {
        this.navigationHelper = new NavigationHelper(this);
        this.navigationHelper.LoadState += navigationHelper_LoadState;
    }

    private async void navigationHelper_LoadState(object sender, LoadStateEventArgs e)
    {
        var mitem = await MovieDataSource.GetItemAsync((String)e.NavigationParameter);

        // You must have data inside mitem if you put a breakpint at the below line
        MyItems = mitem;
    }

    //-----------------------------------------------------------------------

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged(string propertyName = null)
    {
        var handler = PropertyChanged;
        if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
    }
}

3) Now bind the ViewModel class to page DataContext and bind MyItems property of your ViewModel to ItemsSource of your Element. It can do in Xaml or code-behind. I recommended Xaml. for example:

<Page.DataContext>
    <vm:MyItemViewModel/>
</Page.DataContext>

.

<GridView FlowDirection="LeftToRight" ItemsSource="{Binding MyItems}" x:Name="ItemDetailGridView">

<!--.....Your other Xaml codes.....-->

Note: you can implement INotifyPropertyChanged in your Model class too.