Understanding DataBinding in Windows Phone Develpment

Question

I'm having a little trouble understanding Data Binding. I am trying to learn Windows Phone 8 Development.

I am trying to understand some sample code here.

In the MainPage.xaml he defines the DataContext:

<phone:PhoneApplicationPage.DataContext>
    <Binding Path = "Master"
             Source="{StaticResource Locator}" />
</phone:PhoneApplicationPage.DataContext>

Locator is a ViewModelLocator defined as Resource in App.xaml and Master is a public property of type MasterViewModel.

So I thought this means you have now access to the properties of the MasterViewModel class. And you have. But on the same page he binds to properties that are not in MasterViewModel, but in a totally different ViewModel:

Text="{Binding Model.FirstName}"

Model is a property in a different ViewModel.

So how can he access it? He did not overrde the DataContext somewhere as far as I can see. What am I missing?

I didn't post a lot of code, because I think I just don't understand data binding yet and the answer will be obvious to you. I can show you more code if needed, it's sample code from Laurent Ibugnion.

Thanks in advance

EDIT: In his video he says he can use the dataBinding because in the DataTemplate the DataContext is set to a different ViewModel...but I can't see where he sets this viewModel:

<phone:PhoneApplicationPage.Resources>
    <DataTemplate x:Key="FriendItemTemplate">
        <Grid Width="480"
              Height="112"
              Margin="0"
              Background="#FF5E0000">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="124" />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>

            <Rectangle Fill="#FF0B3100"
                       Stroke="Black"
                       Grid.ColumnSpan="2"
                       Visibility="{Binding OlderThanMeIndicatorVisibility, Mode=OneWay}" />

            <Image Source="{Binding Model.PictureUri}"
                   VerticalAlignment="Top"
                   Margin="24,6,0,0" Height="100" />

            <StackPanel Grid.Column="1">
                <StackPanel Orientation="Horizontal"
                            Margin="12,0,0,0">
                    <TextBlock TextWrapping="Wrap"
                               Text="{Binding Model.FirstName}"
                               Style="{StaticResource PhoneTextGroupHeaderStyle}"
                               Margin="0" />

                    <TextBlock TextWrapping="Wrap"
                               Text=" "
                               Style="{StaticResource PhoneTextGroupHeaderStyle}"
                               Margin="0" />

                    <TextBlock TextWrapping="Wrap"
                               Text="{Binding Model.LastName}"
                               Style="{StaticResource PhoneTextGroupHeaderStyle}"
                               Margin="0" />
                </StackPanel>

                <TextBlock TextWrapping="Wrap"
                           Text="{Binding Model.DateOfBirth}"
                           Style="{StaticResource PhoneTextLargeStyle}" />
            </StackPanel>
        </Grid>
    </DataTemplate>
</phone:PhoneApplicationPage.Resources>

EDIT: SOLVED i finally found it,

ListBox ItemsSource="{Binding Friends}"
                     ItemTemplate="{StaticResource FriendItemTemplate}" SelectedItem="{Binding SelectedFriend, Mode=TwoWay}" />

Thanks for your help

Answer 1

The code you show us is an ItemTemplate as a ressource. The data is bound in the listbox. In there you bind to the SelectedFriend.

<ListBox ItemsSource="{Binding Friends}"
         ItemTemplate="{StaticResource FriendItemTemplate}"
         SelectedItem="{Binding SelectedFriend, Mode=TwoWay}" />

The DataContext property is used, when no other data binding is applied.