How to bind a list in store apps

Question

I have problem with binding list in store apps.

public class Category
{
    public Category(int id, string name)
    {
        this.ID = id;
        this.Name = name;
    }

    public int ID { get; set; }
    public string Name { get; set; }
}

I created ColllecionViewSource and GridView

<CollectionViewSource x:Name="CategoriesViewSource" IsSourceGrouped="True"/>
<GridView ItemsSource="{Binding Source={StaticResource CategoriesViewSource}}" >
            <GridView.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <TextBlock Text="{Binding Name}"></TextBlock>
                        <TextBlock Text="{Binding ID}"></TextBlock>
                    </StackPanel>
                </DataTemplate>
            </GridView.ItemTemplate>
        </GridView>

In constructor of my page i add list of Category to CollectionViewSource

public HubPage()
{
    this.InitializeComponent();
    this.navigationHelper = new NavigationHelper(this);
    this.navigationHelper.LoadState += navigationHelper_LoadState;
List<Category> test = new List<Category>();
test.Add(new Category(1, "two"));
CategoriesViewSource.Source = test;
}

But it doesn't work... What i do wrong?

Where is the CollectionViewSource located? And shouldn't the resources be in the resource section and use x:Key attribute to be found as static resourse? — Eugene Podskal, Jun 27 '14 at 10:11
CollectionViewSource is in Page.Resources section. I dont know what you mean about x:Key, CollectionViewSource have this atribute — czupikawo, Jun 27 '14 at 10:30
StaticResource is usually found by x:Key attribute. ResourceDictionary uses it(x:Key) to index its contents. — Eugene Podskal, Jun 27 '14 at 10:31

score 0 · Accepted Answer · edited May 23 '17 at 12:11

I think that the main problem is the use of x:Name attribute instead of x:Key that is supposed to be used - What's the difference between x:Key and x:Name in WPF? (it is for wpf but xaml and controls are nearly the same for win store apps)

<CollectionViewSource x:Key="CategoriesViewSource" IsSourceGrouped="True"/>

EDIT

Well, actually I am bit confused, because resource by key and other docs pertained for WPF XAML say that x:Key should be used for resources, while this WinRT XAML example on MSDN shows the equivalent use of x:Name

But MSDN also says:

In general, x:Name should not be applied in situations that also use x:Key. XAML implementations by specific existing frameworks have introduced substitution concepts between x:Key and x:Name, but that is not a recommended practice.

So, now I am not sure that it is source of problems.

EDIT:

Try to

HubPage: Page, INotifyPropertyChanged
{
    private void OnPropertyChanged(string propName)
    { if (this.PropertyChanged != null)
          this.PropertyChanged(this, new PropertyChangedEventArgs(propName)); }

    ...

    public HubPage()
    {
        this.InitializeComponent();
        this.navigationHelper = new NavigationHelper(this);
        this.navigationHelper.LoadState += navigationHelper_LoadState;
        List<Category> test = new List<Category>();
        test.Add(new Category(1, "two"));

         this.Categories = new ObservableCollection<Category>(test);
    }

    private ObservableCollection<Category> _Categories;

    ObservableCollection<Category> Categories
    {
        get {return this._Categories;}
        private set 
        {
            this._Categories = value;
            this.OnPropertyChanged("Categories");
        }
     }
}

   <Page DataContext="{Binding RelativeSource={RelativeSource Self}}" 
   ...
   <GridView ItemsSource="{Binding Categories}" >
            <GridView.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <TextBlock Text="{Binding Name}"></TextBlock>
                        <TextBlock Text="{Binding ID}"></TextBlock>
                    </StackPanel>
                </DataTemplate>
            </GridView.ItemTemplate>
   </GridView>

Page is your main element in XAML.

Have you tried to bind the collection directly(avoiding the CollectionViewSource)? And I thought that if msbuild is unable to find resource by key it should show an error. Does it show any errors or warnings? — Eugene Podskal, Jun 27 '14 at 10:48
Yes, i tried. Still nothing. and after it gridViewContent.DataContext = test; I tried to manually enter the text to textBlock's but it also did not show up - this is normal when a GridView? — czupikawo, Jun 27 '14 at 11:00
Well, your category class does neither implement INotifyPropertyChanged, nor it is the dependency object or having appropriate propertyChanged events — Eugene Podskal, Jun 27 '14 at 11:02
So what i must do? Implement interface NotifyPropertyChanged and implement event .PropertyChanged in my class? — czupikawo, Jun 27 '14 at 11:06
One of the best thing to do is to not implement your collection creation in the code-behind. It could easily become far too messy(like the code I added now in my answer). Read about the MVVM pattern. — Eugene Podskal, Jun 27 '14 at 11:13
Just try to move all the Categories related code from code-behind file to a separate class. Then you could use instance of that class as the DataSource. It will be more coherent. — Eugene Podskal, Jun 27 '14 at 12:22

How to bind a list in store apps

1 Answers1