Home/ Questions/Q 7526741
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T03:55:00+00:00

Edit: Worked out the problem – see accepted answer for a good explanation! My

  • 0

Edit:

Worked out the problem – see accepted answer for a good explanation!

My XAML now looks like this:

        <controls:Pivot x:Name="MainPivot" Title="FYP APP" ItemsSource="{Binding Cuisines}">
            <controls:Pivot.HeaderTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Cuisine}"/>
                </DataTemplate>
            </controls:Pivot.HeaderTemplate>
            <controls:Pivot.ItemTemplate>
                <DataTemplate>
                    <ListBox Margin="0,0,-12,0" ItemsSource="{Binding Outlets}">
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Margin="0,0,0,17" Width="432" Height="78">
                                    <TextBlock Text="{Binding Name}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                                    <TextBlock Text="{Binding Cuisine}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
                                </StackPanel>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>
                </DataTemplate>
            </controls:Pivot.ItemTemplate>
        </controls:Pivot>

Original:

I’m building a Pivot page using the sample one provided with VS.

I have a list of restaurants, which I would like to be able to filter by swiping the pivot left/right (e.g. http://img831.imageshack.us/img831/514/pivotm.jpg).

I have a list of all restaurants in App.xaml.cs (public static ObservableCollection<OutletViewModel> LocalOutlets which is filled from the MainPage constructor), and this is then processed to create this structure:

OutletListPage2.xaml.cs (the page I’m working on) sets the DataContext to a new OutletsByCuisineViewModel().

OutletsByCuisineViewModel has a public ObservableCollection<CuisineViewModel> Cuisines, which contains a CuisineViewModel for each cuisine (including an “all” one).

A CuisineViewModel has a public string Cuisine, and a public ObservableCollection<OutletViewModel> Outlets.

An OutletViewModel contains a public string Name and a public string Cuisine – each triggering the PropertyChanged event.

The design sample data I want to use is: (also, I can’t specify the same outlet multiple times in this file – VS says Name XYZ already exists in the current name scope)

<local:OutletsByCuisineViewModel 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"       
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:FYP.ViewModels">

    <local:OutletsByCuisineViewModel.Cuisines>

        <local:CuisineViewModel Cuisine="all">
            <local:CuisineViewModel.Outlets>
                <local:OutletViewModel Name="Test1" Cuisine="fast food" />
                <local:OutletViewModel Name="Test2" Cuisine="indian" />
                <local:OutletViewModel Name="Test3" Cuisine="pizza" />
            </local:CuisineViewModel.Outlets>
        </local:CuisineViewModel>

        <local:CuisineViewModel Cuisine="fast food">
            <local:CuisineViewModel.Outlets>
                <local:OutletViewModel Name="Test1a" Cuisine="fast food" />
            </local:CuisineViewModel.Outlets>
        </local:CuisineViewModel>

        <local:CuisineViewModel Cuisine="indian">
            <local:CuisineViewModel.Outlets>
                <local:OutletViewModel Name="Test2a" Cuisine="indian" />
            </local:CuisineViewModel.Outlets>
        </local:CuisineViewModel>

        <local:CuisineViewModel Cuisine="pizza">
            <local:CuisineViewModel.Outlets>
                <local:OutletViewModel Name="Test3a" Cuisine="pizza" />
            </local:CuisineViewModel.Outlets>
        </local:CuisineViewModel>

    </local:OutletsByCuisineViewModel.Cuisines>

</local:OutletsByCuisineViewModel>

I have the following in the XAML designer – http://img844.imageshack.us/img844/8464/pivot2.jpg

I’ve not been able to find anything online which might help, possibly because I’m not sure what’s wrong.

Any suggestions or pointers would be greatly appreciated 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Looking at the last screenshot – when you set the ItemsSource property, Pivot ignores the collection of PivotItems that you specify explicitly and generates a new one based on the ItemsSource collection.
    So you can try to remove PivotItem declaration and use ItemsSource only, bind it to the collection of your view models and use a combination of Pivot.ItemTemplate and Pivot.ItemContainerStyle properties to style pivot items properly (set header and content).

    • 0