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..