Binding an item inside ItemsControl's DataTemplate to the property on Page DataContext

Binding an item inside ItemsControl's DataTemplate to the property on Page DataContext

Typically in all scenarios we bind the ItemControl's ItemsSource to the collection of Data Model item. Then we configure our DataTemplate Binding to the properties inside Data Model item. However, in this particular scenario MSDN questioner wanted to bind the one UIElement inside DataTemplate to the property on Data Model which holds the item collection. If problem statement is still unclear, please click here to visit the actual question.   

Assuming we have clear understanding of the problem we are trying to solve, we will see the changes we have to do to accomplish the same. To achieve this we will bind the UIElement property to the property on DataContext of ItemsControl's (in this question FlipView) parent as shown and discussed below.

We will name the FlipView and use that name (through ElementName syntax) to refer the DataContext property(which is set through the parent) for binding the property inside DataTemplate UIElement.  

<TextBlock Text="{Binding ElementName=flipView, Path=DataContext.Key}" FontSize="60" />

¤ Relevant part is emphasized through bold below.

FlipView definition

Note two TextBlocks inside FlipView DataTemplate, first one is bound to property Key on the parent DataContext( in this case it is BaseViewModel.Key), whereas next one is bound to property inside data model item (in this case, it is BaseViewModelItem.Name)

<Grid Name="grid">
        <FlipView Name="flipView" ItemsSource="{Binding ModelItems}">
            <FlipView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Vertical">
                        <TextBlock Text="{Binding ElementName=flipView, Path=DataContext.Key}" FontSize="60" />
                        <TextBlock Text="{Binding Name}" FontSize="60" />
                    </StackPanel>
                </DataTemplate>
            </FlipView.ItemTemplate>
        </FlipView>
    </Grid>


Dummy DataModel for above FlipView 

public class BaseViewModelItem
    {
        public string Name { get; set; }
    }

    public class BaseViewModel
    {
        public ObservableCollection<BaseViewModelItem> ModelItems { get; set; }
        public string Key { get; set; }
        public BaseViewModel()
        {
            Key = "BingMapKeyFromCode";
            ModelItems = new ObservableCollection<BaseViewModelItem>();
            ModelItems.Add(new BaseViewModelItem() { Name = "Name 1" });
            ModelItems.Add(new BaseViewModelItem() { Name = "Name 2" });
            ModelItems.Add(new BaseViewModelItem() { Name = "Name 3" });
        }
    }

Finally DataContext is set in code -behind

public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            grid.DataContext = new BaseViewModel();
	    // Or for page data context
           // this.DataContext = new BaseViewModel();
        }
    }

It is interesting to note here that after I posted this article, I was able to post the link to this article as an answer to very similar MSDN question. Please see link here (with this link here, we now have Circular Dependencies :)). 
Leave a Comment
  • Please add 5 and 6 and type the answer here:
  • Post
Wiki - Revision Comment List(Revision Comment)
Comments
  • Sachin  S edited Original. Comment: Finishing initial draft

  • Sachin  S edited Revision 2. Comment: Added link to another question answered thru this post.

  • Sachin  S edited Revision 3. Comment: typo

Page 1 of 1 (3 items)
Wikis - Comment List
Posting comments is temporarily disabled until 10:00am PST on Saturday, December 14th. Thank you for your patience.
Comments
  • Sachin  S edited Original. Comment: Finishing initial draft

  • Sachin  S edited Revision 2. Comment: Added link to another question answered thru this post.

  • Sachin  S edited Revision 3. Comment: typo

Page 1 of 1 (3 items)