Binding Text within Pivot.HeaderTemplate

Question

I'm totally confused after trying to solve my problem for several hours for myself, but there are just too many question marks. Maybe you can help me :-)

I want to have a Pivot and binding Elements to is, so I wrote a PivotViewModel class that contains an ObservableCollection (CategoryPageList):

public class PivotViewModel
{
    public class CategoryPageList : ObservableCollection<CategoryPage>
    {}

    private CategoryPageList categoryPages;

    public PivotViewModel()
    {
        categoryPages = new CategoryPageList();
    }

    public CategoryPageList CategoryPages
    {
        get { return categoryPages; }
    }
}

The CategoryPageList is of the type CategoryPage, a class that contains the data I want to bind to, the "CategoryName":

public class CategoryPage : INotifyPropertyChanged
{
    private string categoryName;

    public CategoryPage(string categoryName)
    {
        CategoryName = categoryName;
    }

    public event PropertyChangedEventHandler PropertyChanged;

    private void NotifyPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }

    public string CategoryName
    {
        get { return categoryName; }
        set
        {
            if (categoryName != value)
            {
                categoryName = value;
                NotifyPropertyChanged("CategoryName");
            }
        }
    }
}

When my Application is loaded, I want to see a PivotItem for each CategoryPage with the "CategoryName"-Property as header of this PivotItem. With Expression Blend I created the following XAML-code, but it does not work, the Pivot remains empty:

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.DataContext>
        <RssReader_ViewModel:PivotViewModel/>
    </Grid.DataContext>
    <controls:Pivot Title="pivot" ItemsSource="{Binding CategoryPages}">
        <controls:Pivot.Resources>
            <DataTemplate x:Key="CategoryPivotItemHeaderTemplate">
                <TextBlock TextWrapping="Wrap" Text="{Binding CategoryPages[0].CategoryName}"/>
            </DataTemplate>
            <DataTemplate x:Key="CategoryPivotItemTemplate">
                <Grid>
                    <ListBox/>
                </Grid>
            </DataTemplate>
        </controls:Pivot.Resources>
        <controls:Pivot.ItemTemplate>
            <StaticResource ResourceKey="CategoryPivotItemTemplate"/>
        </controls:Pivot.ItemTemplate>
        <controls:Pivot.HeaderTemplate>
            <StaticResource ResourceKey="CategoryPivotItemHeaderTemplate"/>
        </controls:Pivot.HeaderTemplate>
        <controls:Pivot.DataContext>
            <RssReader_ViewModel:PivotViewModel/>
        </controls:Pivot.DataContext>
    </controls:Pivot>
</Grid>

The DataContext is bound in code in the constructor of the Page:

public partial class MainPage : PhoneApplicationPage
{
    public MainPage()
    {
        InitializeComponent();

        LayoutRoot.DataContext = App.PivotViewModel;
    }
}

I'm a total beginner and do not have much idea, but the only thing I can say is, that the in XAML the Text="{Binding CategoryPages[0].CategoryName}" looks strange to me.

Does anybody see a bug? Would be really great! Best regards!

Answer 1

Try to insert an empty/dummy DataContext="{Binding}" to the Pivot tag.

Remove CategoryPages[0] since you dont have access to CategoryPages collection here..

Answer 2

Try to remove CategoryPages[0].