none
Grid App Template Binding Hierarchy

    Question

  • Hi,

    I am really struggling with understanding just how all of the pieces of a data model data binding inter-work together. 

    Take the Grid App default template available when building a new project for the Windows 8 Store. What does the ObservableCollections in the data source, have to do with the ObservableDictionary in the XAML.cs, and how do they relate to the DataContext, CollectionViewSource, and ItemSource in the XAML page?

    It's all very confusing.  I wish there was a line chart that showed how each object connected with one another, and what the various XAML attributes were actually doing in this regard.

    Can someone point me in the right direction?

       

    Thursday, August 01, 2013 10:25 PM

Answers

  • Hi,NewToWin8

    If you want to set Binding source to flipview ,you can follow up this step:
    1.  set the Flipview ItemSource={Binding} in XAML;
    2.  In code-behind you define a ObservableCollection Object,then set the flipview DataContext equal to this Object;
    with the two steps,you can make the every item of Flipview bind Corresponding to every element of the ObservableCollection。
    The every element of the ObservableCollection is an object which contains mutiple property that the Control  contained in flipview item can bind to.

    As the template binding  your descrip,the Binding steps contains follow steps:
    At first define the page DataContext,usually it binds to DefaultViewModel,the DefaultViewModel is a property of the page.When you set the page DataContex,the page's children objects  can inherit data binding information
    from the DataContex Property.You can refer to this link to get more infornation about DataContext:
    http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.frameworkelement.datacontext.aspx
    The second step,define the CollectionViewSource which is the Resource contained is page ResourceDictionary,so the page's children can use the resoucre with the source's key,you can refer to this link to know the ResourceDictionary:
    http://msdn.microsoft.com/en-us/library/windows/apps/hh968442.aspx
    CollectionViewSource is the page's child ,so it can inherit data binding information from the DefaultViewModel.Usually the CollectionViewSource is binding to item which is one of the DefaultViewModel's element .
     when you define the ObservableCollection Object in code-behind and set it equals to DefaultViewModel's element of item,the CollectionViewSource can bind to the ObservableCollection Object.
    Thrid ,You set the Gridview ItemsSource="{Binding Source=StaticResource ObjectitemsViewSource}},that means the every item of Gridview bind to every element of the ObservableCollection Object.
    You can refer to this link to know the information of the StaticResource:
    http://msdn.microsoft.com/en-us/library/windows/apps/Hh758287.aspx

    I hope this can help you.






    Monday, August 05, 2013 8:56 AM

All replies

  • Hi,NewToWin8

    I recommend you read the documents to get an overview of how they work. There are sections that will answer your questions how to create the Control's Resource and how use the StaticResource markup extension to create relation betweenItemSource and CollectionViewSource.

    http://msdn.microsoft.com/en-us/library/windows/apps/hh968442.aspx

    http://msdn.microsoft.com/en-us/library/windows/apps/hh758287.aspx

    And you can refer to this link to know the relationship between DataContext and ObservableCollections:

    http://msdn.microsoft.com/en-us/library/windows/apps/hh758320.aspx

    Also,you can see this sample to konw more:

    http://code.msdn.microsoft.com/windowsapps/XAML-data-binding-sample-8e845a6f#content

    Best Wishes!


    Friday, August 02, 2013 12:18 PM
  • Thanks Anne.

    These links are useful, but still do not explain the inter-relationships between the ObservableCollections in the data source, the ObservableDictionary in the XAML code-behind, and how that all relates to DataContext vs DataSource, CollectionViewSource, and ItemSource in the XAML page. What I'm looking for is an high-level explanation of what they have to do with one another, what role each one is playing, and why one would use them this way versus any other options that might exist.  The code samples are great to see the implementation in action, but does little to explain the why of how it was done.

    Is there a comprehensive downloadable API reference that includes detailed explanations of how to use every control, including how to thread it back to its data source?  Or is all the information just held online in snippet articles like the ones you sent me?

    For example, say I want to incorporate a FlipView.  How do I need to setup my XAML and why?  How do I establish an ObservableCollection data source for it (it's different than for say a GridView)? What are all of the options available for it?

    Friday, August 02, 2013 1:26 PM
  • Hi,NewToWin8

    If you want to set Binding source to flipview ,you can follow up this step:
    1.  set the Flipview ItemSource={Binding} in XAML;
    2.  In code-behind you define a ObservableCollection Object,then set the flipview DataContext equal to this Object;
    with the two steps,you can make the every item of Flipview bind Corresponding to every element of the ObservableCollection。
    The every element of the ObservableCollection is an object which contains mutiple property that the Control  contained in flipview item can bind to.

    As the template binding  your descrip,the Binding steps contains follow steps:
    At first define the page DataContext,usually it binds to DefaultViewModel,the DefaultViewModel is a property of the page.When you set the page DataContex,the page's children objects  can inherit data binding information
    from the DataContex Property.You can refer to this link to get more infornation about DataContext:
    http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.frameworkelement.datacontext.aspx
    The second step,define the CollectionViewSource which is the Resource contained is page ResourceDictionary,so the page's children can use the resoucre with the source's key,you can refer to this link to know the ResourceDictionary:
    http://msdn.microsoft.com/en-us/library/windows/apps/hh968442.aspx
    CollectionViewSource is the page's child ,so it can inherit data binding information from the DefaultViewModel.Usually the CollectionViewSource is binding to item which is one of the DefaultViewModel's element .
     when you define the ObservableCollection Object in code-behind and set it equals to DefaultViewModel's element of item,the CollectionViewSource can bind to the ObservableCollection Object.
    Thrid ,You set the Gridview ItemsSource="{Binding Source=StaticResource ObjectitemsViewSource}},that means the every item of Gridview bind to every element of the ObservableCollection Object.
    You can refer to this link to know the information of the StaticResource:
    http://msdn.microsoft.com/en-us/library/windows/apps/Hh758287.aspx

    I hope this can help you.






    Monday, August 05, 2013 8:56 AM