Different ItemSources for Panorama TitleTemplate, HeaderTemplate and ItemTemplate

Question

I have a Panorama that has ItemSource set to an ObservableCollection which is created in the viewmodel

In the ViewModel.cs

public ObservableCollection<UserSchema> SeriesData;

private string  _HeaderTitle;

    public string HeaderTitle
    {
        get
        {
            return _HeaderTitle;
        }
        private set
        {
            _HeaderTitle = value;
            NotifyPropertyChanged("HeaderTitle");
        }
    }

The value from HeaderTitle comes from HeaderSchema class's Title property (see below). This is set elsewhere in the viewmodel constructor not shown here.

UserSchema.cs contains the UserSchema which has implemented INotifyProperyChanged and has two properties. I have implemented the public getter and setter

private string _objectname;
private string _objectpath;

public string ObjectName
        {
            get 
            {
                return _objectName;
            }
            set 
            {
                _objectName = value;
                NotifyPropertyChanged("ObjectName");
            }
        }

Similar code for _objectPath property also.

I have another HeaderSchema.cs that has also implemented INotifyProperyChanged and has two properties. I have implemented the public getter and setter

private string _Title;

    public string Title
    {
        get
        {
            return _Title;
        }
        set 
        {
            _Title = value;
            NotifyPropertyChanged("Title");
        }

    }

Once again I have created a public get and set property for above as Title

Now in MainPage.xaml I have set the Panaroma ItemSource to SeriesData, elsewhere in the code behind I have set the DataContext to the viewmodel.

<controls:Panorama  x:Name="SerPan" ItemsSource="{Binding SeriesData}">

            <controls:Panorama.HeaderTemplate>
                <DataTemplate>
                    <Grid x:Name="grid">
                        <TextBlock  Text="{Binding ObjectName}">
                        </TextBlock>
                    </Grid>
                </DataTemplate>
            </controls:Panorama.HeaderTemplate>

            <controls:Panorama.ItemTemplate>
                <DataTemplate>
                    <Image Source="{Binding ObjectPath}"/>
                </DataTemplate>
            </controls:Panorama.ItemTemplate>

        </controls:Panorama>

This works very well and I get the correct output.

What I would like is to set a Title to the Panorama and I want to get the text from HeaderTitle property from viewmodel. Something like the below, but the problem is HeaderTitle is a different property and not part of SeriesData which is the ItemSource for panorama.

    <controls:Panorama.TitleTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding HeaderTitle}"> //does not work.
            </TextBlock>
        </DataTemplate>
    </controls:Panorama.TitleTemplate>

Answer 1

If your ViewModel is the DataContext of your Panorama control you can access it via ElementName Binding:

SerPan.DataContext = myViewModelInstance;

<phone:Panorama.HeaderTemplate>
    <DataTemplate>
        <TextBlock Text="{Binding ElementName=SerPan, Path=DataContext.HeaderTitle}" />
    </DataTemplate>
</phone:Panorama.HeaderTemplate>