wp8 : how to insert map into PanoramaItem HeaderTemplate

Question

I'm trying to insert map control into PanoramaItem Header in my App :

<phone:PanoramaItem Orientation="Horizontal" Width="480">

            <phone:PanoramaItem.HeaderTemplate>
                <DataTemplate>
                    <StackPanel Height="155" Width="478" Margin="-23,0,0,0">
                        <!-- Map -->
                        <maps:Map x:Name="StationsMapOverview"
                                  Visibility="{Binding IsDataLoaded, Converter={StaticResource BooleanToVisibilityConverter}}"
                                  Height="115" 
                                  Margin="0,-34,0,0"
                                  ZoomLevel="10"
                                  Center="{Binding UserGeoCoordinate, Mode=TwoWay}"
                                  CartographicMode="Road"
                                  ColorMode="Light"
                                  PedestrianFeaturesEnabled="True"
                                  LandmarksEnabled="True"/>
                    </StackPanel>
                </DataTemplate>
            </phone:PanoramaItem.HeaderTemplate>

            <!-- Stations list -->
            <phone:LongListSelector x:Name="ListNearbyItems" 
                                        ItemsSource="{Binding StationItems}" Margin="0,-38,0,0" Height="480">
...

The result is good and my map appears well. But in the behind code, I have the following error:

name 'StationsMapOverview' does not exist in the current context

(Datacontext is set by ViewModelLocator class and work fine for others pages). And 'center' option binding is not working.

So my question is, is that someone has tried to integrate a map into PanoramaItem Header ?

Answer 1

To pass DataContext inside header template add:

<phone:PanoramaItem Header={Binding} x:Name="panorama"

You can't access an object in template by name. Use code below to find element by name:

private T FindElementInVisualTree<T>(DependencyObject parentElement, string name) where T : DependencyObject
{
    var count = VisualTreeHelper.GetChildrenCount(parentElement);
    if (count == 0)
        return null;

    for (int i = 0; i < count; i++)
    {
        var child = VisualTreeHelper.GetChild(parentElement, i);

        if (child != null && child is FrameworkElement && (child as FrameworkElement).Name.Equals(name))
        {
            return (T)child;
        }
        else
        {
            var result = FindElementInVisualTree<T>(child, name);
            if (result != null)
                return result;

        }
    }
    return null;
}

And then call:

Map map = FindElementInVisualTree<Map>(panorama, "StationsMapOverview");