binding collection to listpicker inside DataTemplate of PivotControl - wpf

Question

Inside the pivot control, I have a DataTemplate (TestItemTemplate) for the ItemTemplate. The DataContext for the page is set to {Binding RelativeSource={RelativeSource Self}} and the ItemsSource for PivotControl is bound to an observable collection.
Inside the DataTemplate of the pivotcontrol, I have a ListPicker which I want to bind to IEnumerable. I have created a public property of
IEnumerable TestEntries = "One Two Three".Split();
The listpicker doesn't show any bound items though. If I place the listpicker outside the data template (as a sibling of the PivotControl, it shows the three strings in the picker)
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="TestItemTemplate">
<Grid Margin="0,-25,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" x:Name="AnotherContainer" />
<RowDefinition Height="300" x:Name="TestDescriptionContainer" />
<RowDefinition Height="Auto" x:Name="SaveCancelDeleteContainer" />
</Grid.RowDefinitions>
<toolkit:ListPicker x:Name="lstPicker" Grid.Row="0" ItemsSource="{Binding TestEntries}" Header="situation" FullModeHeader="SITUATIONS">
<toolkit:ListPicker.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding}" Margin="4 0 0 0"/>
</StackPanel>
</DataTemplate>
</toolkit:ListPicker.ItemTemplate>
<toolkit:ListPicker.FullModeItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="16 21 0 20">
<TextBlock Text="{Binding}" Margin="4 0 0 0" FontSize="43" FontFamily="{StaticResource PhoneFontFamilyLight}"/>
</StackPanel>
</DataTemplate>
</toolkit:ListPicker.FullModeItemTemplate>
</toolkit:ListPicker>
<TextBox Grid.Row="1" Text="{Binding Description}" TextWrapping="Wrap" VerticalAlignment="Top" d:LayoutOverrides="Width" AcceptsReturn="True" Height="300"/>
<StackPanel Grid.Row="2" Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,2,0,0" >
<Button x:Name="SaveButton" Content="Save" Margin="5" Click="SaveButton_Click" Width="140" />
<Button x:Name="CancelButton" Content="Cancel" Margin="5" Click="CancelButton_Click" Width="140" />
<Button x:Name="DeleteButton" Content="Delete" Margin="5" Click="DeleteButton_Click" Width="140" />
</StackPanel>
</Grid>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<!--Pivot Control-->
<controls:Pivot
x:Name="PivotControl"
Title="{StaticResource AppName}"
ItemsSource="{Binding TestEntries}"
ItemTemplate="{StaticResource TestItemTemplate}"
SelectionChanged="PivotControl_SelectionChanged"
>
</controls:Pivot>
</Grid>

Answer 1

I figured this out on my own. Here is the solution if others run into the same issue.
I think this is required to set the DataContext properly when the ListPicker is inside a DataTemplate because the in Page's initialize method or the loaded event handler, the ListPicker inside the DataTemplate is still null. Use the control's own Loaded event handler to initialize it.
I had to Set the DataContext of the ListPicker inside its own Loaded eventhandler. Something like this:
private void lstTestEntriesPicker_Loaded(object sender, RoutedEventArgs e)
{
ListPicker lstTestEntriesPicker= VisualElementHelper.FindName<ListPicker>("lstTestEntriesPicker", this);
if (lstTestEntriesPicker!= null)
{
lstTestEntriesPicker.DataContext = TestEntries;
}
}
XAML looks like this:
<toolkit:ListPicker x:Name="lstTestEntriesPicker" ItemsSource="{Binding}" Grid.Row="0" Header="TestEntries" FullModeHeader="TestEntries" Loaded="lstTestEntriesPicker_Loaded">
<toolkit:ListPicker.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding}" Margin="4 0 0 0"/>
</StackPanel>
</DataTemplate>
</toolkit:ListPicker.ItemTemplate>
<toolkit:ListPicker.FullModeItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="16 21 0 20">
<TextBlock Text="{Binding}" Margin="4 0 0 0" FontSize="43" FontFamily="{StaticResource PhoneFontFamilyLight}"/>
</StackPanel>
</DataTemplate>
</toolkit:ListPicker.FullModeItemTemplate>
</toolkit:ListPicker>