binding collection to listpicker inside DataTemplate of PivotControl

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>

Pratik Kothari Pratik Kothari · Accepted Answer · 2010-11-19T20:09:14

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>

binding collection to listpicker inside DataTemplate of PivotControl

1 Answers