DataTemplate in pivotItems wp7

Question

I would like to create a pivotpage in wp7:

 <Grid x:Name="LayoutRoot" Background="Transparent">
    <!--Pivot Control-->
    <controls:Pivot Title="MY APPLICATION">
        <!--Pivot item one-->
        <controls:PivotItem Header="item1">
            <Grid/>
        </controls:PivotItem>

        <!--Pivot item two-->
        <controls:PivotItem Header="item2">
            <Grid/>
        </controls:PivotItem>
    </controls:Pivot>
</Grid>

I need that the pivoItems will be binded automatically with my List<Article> and class Article are defined like this:

  public class Article
{
    private string _logoUrl;
    public string LogoUrl
    {
        get { return _logoUrl; }
        set { _logoUrl = value; }
    }
    private string _title;
    public string Title
    {
        get { return _title; }
        set { _title = value; }
    }
    private string _descrption;
    public string Descrption
    {
        get { return _descrption; }
        set { _descrption = value; }
    }
}

How can I use Datatemplate to bind each PivotItem with each Article (I need that the title of each Article will be showd in the header of PivotItem and the description in webbrowser because it's a HTML)

Best regards

Answer 1

First, to create a PivotItem for each article, simply use the ItemsSource property:

<controls:Pivot Title="MY APPLICATION" ItemsSource="{Binding Path=TheListOfArticles}">

To change the header, override the HeaderTemplate :

<controls:Pivot ItemsSource="{Binding Path=TheListOfArticles}" Title="MY APPLICATION">
    <controls:Pivot.HeaderTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Path=Title}" />
        </DataTemplate>
    </controls:Pivot.HeaderTemplate>
</controls:Pivot>

And the same way, override the ItemTemplate to define how each PivotItem will be displayed:

<controls:Pivot.ItemTemplate>
    <DataTemplate>
        <!-- whatever -->
    </DataTemplate>
</controls:Pivot.ItemTemplate>