Binding the Pivo in Windows Phone 8

Question

I'm having some issues with the pivot control for windows phone 8 and I'd really need an answer to this. I'm starting to wondering if I'm missing something here.

Let's say I have an structure like this

<vm:MainViewModel
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     **strong text**xmlns:vm="clr-namespace:PivotApp3.ViewModels"
     Name = "I' just a placeholder collection of ItemViewModels"
     >
<vm:MainViewModel.Items>
   <vm:ItemViewModel Name="Some Item">
           <vm:ItemViewModel.Details>
              <vm:DetailViewModel Name="Some Detail"/>              
            </vm:ItemViewModel.Details>
       </vm:ItemViewModel>
 </vm:MainViewModel>

Is it possible to bind lets say the pivot itemSource to the and to let's say a LongListSelector.

In short I need to bind a collection and for each Item in this collection bind another collection.

I can't get this working with sample data.

Answer 1

In ItemViewModel create a ObservableCollection.

For example an ObservableCollection of People.

Model:

public class Person
{
    public string Name { get; set; }
    public int Age { get; set; }
}

In ItemViewModel.cs add a People property:

public ObservableCollection<Person> People{ get; set; }

In MainViewModelSampleData.xaml :

<vm:MainViewModel xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:vm="clr-namespace:PivotApp3.ViewModels"
              Name="I' just a placeholder collection of ItemViewModels">

<vm:MainViewModel.Items>

    <vm:ItemViewModel Name="People 1">
        <vm:ItemViewModel.People>
            <vm:Person Name="Test 1"
                       Age="1" />
            <vm:Person Name="Test 2"
                       Age="2" />
        </vm:ItemViewModel.People>
    </vm:ItemViewModel>

    <vm:ItemViewModel Name="People 2">
        <vm:ItemViewModel.People>
            <vm:Person Name="Test 3"
                       Age="3" />
            <vm:Person Name="Test 4"
                       Age="4" />
        </vm:ItemViewModel.People>
    </vm:ItemViewModel>

</vm:MainViewModel.Items>

In MainPage.xaml add a LongListSelector:

<phone:LongListSelector x:Name="MainLongListSelector"
                                Margin="0,0,-12,0"
                                ItemsSource="{Binding Items}"
                                SelectionChanged="MainLongListSelector_SelectionChanged">
            <phone:LongListSelector.ItemTemplate>
                <DataTemplate>
                    <StackPanel Margin="0,0,0,17"
                                Orientation="Vertical">
                        <TextBlock Text="{Binding Name}"
                                   TextWrapping="Wrap"
                                   Style="{StaticResource PhoneTextExtraLargeStyle}" />

                        <ItemsControl Margin="12,0,0,0" ItemsSource="{Binding People}">
                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <StackPanel Orientation="Vertical">
                                        <TextBlock Text="{Binding Name}" />
                                        <TextBlock Text="{Binding Age}" />
                                    </StackPanel>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>


                    </StackPanel>
                </DataTemplate>
            </phone:LongListSelector.ItemTemplate>
        </phone:LongListSelector>

Result: