Pivot Control not populating data in the DataContext

Question

I have been starting to work with Windows phone and have been struggleing for several days on getting the data that gets populated in the DataContext to populate in a Pivot control that is set up initially through the canned template that comes with VS 2013 in WP 8.1. For some reason, the closest I could get to populating data is showing the namespace instead of the data. I origionally though the issue was with my JSON deserialization, but I have narrowed it down so that I am binding 2 items right into the DataContext of both the Pivot and the Pivot item's DataContext and still no go.

Here is the on Nav Loaded method where the datacontext gets set:

 this.Pivot.DataContext = new ObservableCollection<VacationItemViewModel>()
        {
            new VacationItemViewModel(){Name="Test1", Value="test1"},
             new VacationItemViewModel(){Name="Test1", Value="test1"}
        };

        this.PivotItem.DataContext = new ObservableCollection<VacationItemViewModel>()
        {
            new VacationItemViewModel(){Name="Test1", Value="test1"},
             new VacationItemViewModel(){Name="Test1", Value="test1"}
        };

Here is the XAML page that is the View for this code:

<Page
x:Class="PivotAppUltimateTest.PivotPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:PivotAppUltimateTest"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:data="using:PivotAppUltimateTest.DataModel"
mc:Ignorable="d"
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Page.Transitions>
    <TransitionCollection>
        <NavigationThemeTransition>
            <NavigationThemeTransition.DefaultNavigationTransitionInfo>
                <CommonNavigationTransitionInfo IsStaggeringEnabled="True"/>
            </NavigationThemeTransition.DefaultNavigationTransitionInfo>
        </NavigationThemeTransition>
    </TransitionCollection>
</Page.Transitions>

<Grid>
    <Pivot x:Uid="Pivot" 
           Title="MY APPLICATION" 
           x:Name="Pivot" CommonNavigationTransitionInfo.IsStaggerElement="True" 
           Margin="0,12,0,0" ItemsSource="{Binding}" >
        <PivotItem 
            x:Name="PivotItem"
            Header="first">
            <ListView
                ItemsSource="{Binding VacationItemViewModel}">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Margin="0,0,0,24">
                            <TextBlock
                                Text="{Binding Name}"
                                TextWrapping="WrapWholeWords"
                                Pivot.SlideInAnimationGroup="1"
                                CommonNavigationTransitionInfo.IsStaggerElement="True"
                                Style="{ThemeResource ListViewItemTextBlockStyle}"/>
                            <TextBlock
                                Text="{Binding Value}"
                                TextWrapping="WrapWholeWords"
                                Pivot.SlideInAnimationGroup="2" 
                                CommonNavigationTransitionInfo.IsStaggerElement="True" 
                                Style="{ThemeResource ListViewItemContentTextBlockStyle}"/>
                        </StackPanel>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </PivotItem>
    </Pivot>
    <!--Pivot item one-->
        <!--<PivotItem
            x:Uid="PivotItem1"
            Header="first"
            DataContext="{Binding Vacation}"

            d:DataContext="{Binding Vacations[0], Source={d:DesignData Source=/DataModel/VacationData.json, Type=data:VacationDataSource}}"
            CommonNavigationTransitionInfo.IsStaggerElement="True">
            -->
        <!--Double line list with text wrapping-->
        <!--
            <ListView
                ItemsSource="{Binding Items}"
                IsItemClickEnabled="True"
                ItemClick="ItemView_ItemClick"
                ContinuumNavigationTransitionInfo.ExitElementContainer="True"
                Margin="12,0,0,0">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Margin="0,0,0,24">
                            <TextBlock
                                Text="{Binding Name}"
                                TextWrapping="WrapWholeWords"
                                Pivot.SlideInAnimationGroup="1"
                                CommonNavigationTransitionInfo.IsStaggerElement="True"
                                Style="{ThemeResource ListViewItemTextBlockStyle}"/>
                            <TextBlock
                                Text="{Binding VacationSummary}"
                                TextWrapping="WrapWholeWords"
                                Pivot.SlideInAnimationGroup="2" 
                                CommonNavigationTransitionInfo.IsStaggerElement="True" 
                                Style="{ThemeResource ListViewItemContentTextBlockStyle}"/>
                        </StackPanel>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </PivotItem>

        -->
        <!--Pivot item two-->
        <!--
        <PivotItem
            x:Uid="PivotItem2"
            Header="second"
            DataContext="{Binding SecondGroup}"
            d:DataContext="{Binding Groups[1], Source={d:DesignData Source=/DataModel/SampleData.json, Type=data:SampleDataSource}}">
            -->
        <!--Double line list no text wrapping-->
        <!--
            <ListView
                ItemsSource="{Binding Items}"
                Margin="12,0,0,0"
                IsItemClickEnabled="True"
                ItemClick="ItemView_ItemClick"
                Loaded="SecondPivot_Loaded"
                ContinuumNavigationTransitionInfo.ExitElementContainer="True">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Margin="0,0,0,24">
                            <TextBlock
                                Text="{Binding Title}"
                                Pivot.SlideInAnimationGroup="1"
                                CommonNavigationTransitionInfo.IsStaggerElement="True"
                                Style="{StaticResource ListViewItemTextBlockStyle}"/>
                            <TextBlock
                                Text="{Binding Description}"
                                Pivot.SlideInAnimationGroup="2"
                                CommonNavigationTransitionInfo.IsStaggerElement="True"
                                Style="{StaticResource ListViewItemContentTextBlockStyle}"/>
                        </StackPanel>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </PivotItem>
    </Pivot>-->
</Grid>

<Page.BottomAppBar>
    <CommandBar>
        <AppBarButton x:Uid="AddAppBarButton" x:Name="AddAppBarButton" Label="add" Icon="Add" Click="AddAppBarButton_Click" />
        <CommandBar.SecondaryCommands>
            <AppBarButton x:Uid="SecondaryButton1" x:Name="SecondaryButton1" Label="secondary command 1" />
            <AppBarButton x:Uid="SecondaryButton2" x:Name="SecondaryButton2" Label="secondary command 2" />
        </CommandBar.SecondaryCommands>
    </CommandBar>
</Page.BottomAppBar>

VacationItemViewModel class

[DataContract]
public class VacationItemViewModel : BaseViewModel, INotifyPropertyChanged
{

    private string _name;
    private string _value;

    [DataMember]
    public string Name
    {
        get { return _name; }
        set { this.SetProperty(ref _name, value); }
    }

    [DataMember]
    public string Value
    {
        get { return _value; }
        set { this.SetProperty(ref _value, value); }
    }



    public event PropertyChangedEventHandler PropertyChanged;

    protected bool SetProperty<T>(ref T storage, T value, [CallerMemberName] String propertyName = null)
    {
        if (object.Equals(storage, value))
            return false;

        storage = value;
        this.OnPropertyChanged(propertyName);
        return true;
    }

    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        var eventHandler = this.PropertyChanged;

        if (eventHandler != null)
            eventHandler(this, new PropertyChangedEventArgs(propertyName));
    }

}

UPDATE: updated code according to answer below. Here is what I am now receiving:

Answer 1

If you want to fulfill your Pivot with a Collection of Items then you will need an ItemTemplate. Simple example can look like this:

In XAML:

<Pivot Title="MY APPLICATION" x:Name="myPivot" CommonNavigationTransitionInfo.IsStaggerElement="True" 
   Margin="0,12,0,0" ItemsSource="{Binding}">
    <Pivot.HeaderTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Header}"/>
        </DataTemplate>
    </Pivot.HeaderTemplate>
    <Pivot.ItemTemplate>
        <DataTemplate>
            <ListView ItemsSource="{Binding VacationItemViewModelItems}">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Margin="0,0,0,24">
                            <TextBlock Text="{Binding Name}" TextWrapping="WrapWholeWords"
                        Pivot.SlideInAnimationGroup="1" CommonNavigationTransitionInfo.IsStaggerElement="True"/>
                            <TextBlock Text="{Binding Value}" TextWrapping="WrapWholeWords"
                        Pivot.SlideInAnimationGroup="2" CommonNavigationTransitionInfo.IsStaggerElement="True"/>
                        </StackPanel>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </DataTemplate>
    </Pivot.ItemTemplate>
</Pivot>

In code behind you need to define properties for your items (I've extended class of your item):

public class VacationItemViewModel : BaseViewModel, INotifyPropertyChanged
{
    public string Header { get; set; }

    private string _name;
    private string _value;

    [DataMember]
    public string Name
    {
        get { return _name; }
        set { this.SetProperty(ref _name, value); }
    }

    [DataMember]
    public string Value
    {
        get { return _value; }
        set { this.SetProperty(ref _value, value); }
    }

    private ObservableCollection<VacationItemViewModel> vacationItemViewModelItems = new ObservableCollection<VacationItemViewModel>();

    public ObservableCollection<VacationItemViewModel> VacationItemViewModelItems
    {
        get { return vacationItemViewModelItems; }
        set { vacationItemViewModelItems = value; }
    }
    // ...
}

Then you can create items:

ObservableCollection<VacationItemViewModel>  myPivotItems = new ObservableCollection<VacationItemViewModel>() 
{
       new VacationItemViewModel(){Name="Test1", Value="test1", Header="First Item"},
       new VacationItemViewModel(){Name="Test1", Value="test1", Header="Second Item"}
    };
foreach (var item in myPivotItems)
{
    item.VacationItemViewModelItems = new ObservableCollection<VacationItemViewModel>()
        {
            new VacationItemViewModel(){Name="Test1", Value="test1"},
            new VacationItemViewModel(){Name="Test1", Value="test1"}
        };
}
this.myPivot.DataContext = myPivotItems;

The code above still needs many improvements and so on, but should fulfill Pivot with Items, basing on ItemTemplate.

Also avoid naming Controls/Objects with the same name as Type - e.g. <Pivot Name="Pivot" ...