Set Bing Maps Center in Windows 8 Store App using XAML C#

Question

I am trying to set the center location on a Bing Maps control in a Windows 8 store app using XAML/C#. I came across articles explaining that you cannot use binding for the center property in XAML so I am trying to set it in the C#. I am using the default windows 8 store app grid template in studio.

 <FlipView
        x:Name="flipView"
        AutomationProperties.AutomationId="ItemsFlipView"
        AutomationProperties.Name="Item Details"
        TabIndex="1"
        Grid.RowSpan="2"
        ItemsSource="{Binding Source={StaticResource itemsViewSource}}">

        <FlipView.ItemContainerStyle>
            <Style TargetType="FlipViewItem">
                <Setter Property="Margin" Value="0,137,0,0"/>
            </Style>
        </FlipView.ItemContainerStyle>

        <FlipView.ItemTemplate>
            <DataTemplate>

                <!--
                    UserControl chosen as the templated item because it supports visual state management
                    Loaded/unloaded events explicitly subscribe to view state updates from the page
                -->
                <UserControl Loaded="StartLayoutUpdates" Unloaded="StopLayoutUpdates">
                    <ScrollViewer x:Name="scrollViewer" Style="{StaticResource HorizontalScrollViewerStyle}" Grid.Row="1">

                        <!-- Content is allowed to flow across as many columns as needed -->
                        <common:RichTextColumns x:Name="richTextColumns" Margin="117,0,117,47">
                            <RichTextBlock x:Name="richTextBlock" Width="560" Style="{StaticResource ItemRichTextStyle}" IsTextSelectionEnabled="False">
                                <Paragraph>
                                    <Run FontSize="26.667" FontWeight="Medium" Text="{Binding Title}"/>
                                    <LineBreak/>
                                    <Run FontSize="16.667" FontWeight="Light" Text="{Binding EventStartDate,Converter={StaticResource StringConverter},ConverterParameter='{}{0:D}'}"/>
                                </Paragraph>
                                <Paragraph LineStackingStrategy="MaxHeight">
                                    <InlineUIContainer>
                                        <!--<Image x:Name="image" MaxHeight="480" Margin="0,20,0,10" Stretch="Uniform" Source="{Binding Image}" AutomationProperties.Name="{Binding Title}"/>-->
                                        <bm:Map Credentials="{StaticResource BingMapsApiKey}" Height="500" Width="560" Margin="0,20,0,10" 
                                                ZoomLevel="10" x:Name="myMap">
                                            <bm:Map.Children>
                                                <bm:Pushpin Background="Red">
                                                    <bm:MapLayer.Position>
                                                        <bm:Location Latitude="{Binding Place.latitude}" Longitude="{Binding Place.longitude}" />
                                                    </bm:MapLayer.Position>
                                                </bm:Pushpin>
                                            </bm:Map.Children>
                                        </bm:Map>
                                    </InlineUIContainer>
                                </Paragraph>
                                <Paragraph>
                                    <Run FontSize="18.667" FontWeight="Normal" Text="{Binding Place.placeName}"/>
                                    <LineBreak/>
                                    <Run FontSize="16.667" FontWeight="Light" Text="{Binding Place.addressLine1Txt}"/>
                                    <LineBreak/>
                                    <Run FontSize="16.667" FontWeight="Light" Text="{Binding Place.cityName}"/>
                                    <Run FontSize="16.667" FontWeight="Light" Text="{Binding Place.stateProvinceCode}"/>
                                    <Run FontSize="16.667" FontWeight="Light" Text="{Binding Place.postalCode}"/>
                                    <LineBreak/>
                                    <LineBreak/>
                                    <InlineUIContainer>
                                        <HyperlinkButton Margin="-15,0,0,0"  NavigateUri="{Binding HomePageUrl}" Content="{Binding HomePageUrl}" />
                                    </InlineUIContainer>
                                    <LineBreak/>
                                    <Run FontWeight="SemiLight" Text="{Binding Content}"/>
                                </Paragraph>
                            </RichTextBlock>

I am unable to locate the Bing Maps control (bm:Map) that is inside the FlipView control so I can set the center. I have tried the WinRT XAML Toolkit from codeplex using the VisualTree Helpers and that didnt work.

Any help would be much appreciated. Thx.

Benoit Catherinet Benoit Catherinet · Accepted Answer · 2013-10-06T22:25:11

If you are only going to change the value one time, you could just register for the loaded of the Map :

   private void Map_OnLoaded(object sender, RoutedEventArgs e)
    {
        Map map = sender as Map;
        Item item=map.DataContext as Item;
        map.Center = item.Center;
    }

If you need to change it several time, you could use an attached property, something like this should work:

public static readonly DependencyProperty MapCenterProperty =
        DependencyProperty.RegisterAttached("MapCenter", typeof (Location), typeof (MyAttached), 
        new PropertyMetadata(default(Location),MapCenterChanged));

    private static void MapCenterChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        Map map = d as Map;
        Location location = e.NewValue as Location;
        if (map != null &&location!=null)
        {
            map.Center = location;
        }
    }



    public static void SetMapCenter(UIElement element, Location value)
    {
        element.SetValue(MapCenterProperty, value);
    }

    public static Location GetMapCenter(UIElement element)
    {
        return (Location) element.GetValue(MapCenterProperty);
    }

Set Bing Maps Center in Windows 8 Store App using XAML C#

1 Answers