Windows Phone 8 でマップ コントロールに UIElements を追加する方法

2014/06/18

対象: Windows Phone 8 および Windows Phone Silverlight 8.1 のみ

このトピックでは、Windows Phone 8 のマップにイメージ、図形、コントロールなどの UIElement を追加する方法を説明します。

Icon to indicate an SDK sample

このトピックで説明している一部のタスクを実演するサンプルについては、「Simple Map control sample」を参照してください。

プッシュピンなどの Maps API の便利な拡張機能については、Windows Phone Toolkit をダウンロードしてください。

このトピックは、次のセクションで構成されています。

このセクションでは、Rectangle および Polygon を格納する Grid 要素を Map に追加します。

マップ内の位置に四角形を追加するには

  1. Visual Studio で、MapsApplication という新しい Windows Phone 8 プロジェクトを作成します。

  2. MainPage.xamlLayoutRoot というグリッドを次のコードで置き換えます。これは、MyMap という Map コントロールを作成します。Map コントロールを追加する詳細については、「Windows Phone 8 でマップ コントロールをページに追加する方法」を参照してください。

    
    <!--LayoutRoot is the root grid where all page content is placed-->
        <Grid x:Name="LayoutRoot" Background="Transparent">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
    
            <!--TitlePanel contains the name of the application and page title-->
            <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
                <TextBlock x:Name="ApplicationTitle" Text="Maps" Style="{StaticResource PhoneTextNormalStyle}"/>
                <TextBlock x:Name="PageTitle" Text="MapOverlay" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
            </StackPanel>
    
            <!--ContentPanel - place additional content here-->
            <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
                <maps:Map x:Name="MyMap" Center="47.6097, -122.3331" ZoomLevel="10" />
            </Grid>
        </Grid>
    
  3. MainPage.xaml.cs で、次の using ディレクティブを追加します。

    
    using Microsoft.Phone.Maps.Controls;
    using System.Device.Location;
    
  4. MainPage() コンストラクターで、次のコードを追加し、Rectangle および Polygon を格納する Grid 要素を作成します。

    
    //Creating a Grid element.
    
    Grid MyGrid = new Grid();
    MyGrid.RowDefinitions.Add(new RowDefinition());
    MyGrid.RowDefinitions.Add(new RowDefinition());
    MyGrid.Background = new SolidColorBrush(Colors.Transparent);
    
    //Creating a Rectangle
    Rectangle MyRectangle = new Rectangle();
    MyRectangle.Fill = new SolidColorBrush(Colors.Black);
    MyRectangle.Height = 20;
    MyRectangle.Width = 20;
    MyRectangle.SetValue(Grid.RowProperty, 0);
    MyRectangle.SetValue(Grid.ColumnProperty, 0);
    
    //Adding the Rectangle to the Grid
    MyGrid.Children.Add(MyRectangle);
    
    //Creating a Polygon
    Polygon MyPolygon = new Polygon();
    MyPolygon.Points.Add(new Point(2,0));
    MyPolygon.Points.Add(new Point(22,0));
    MyPolygon.Points.Add(new Point(2,40));
    MyPolygon.Stroke = new SolidColorBrush(Colors.Black);
    MyPolygon.Fill = new SolidColorBrush(Colors.Black);
    MyPolygon.SetValue(Grid.RowProperty, 1);
    MyPolygon.SetValue(Grid.ColumnProperty, 0);
    
    //Adding the Polygon to the Grid
    MyGrid.Children.Add(MyPolygon);
    
    
    
  5. MainPage()コンストラクターで、MapOverlay を作成し、Grid 要素を MapOverlay に追加します。

    
    //Creating a MapOverlay and adding the Grid to it.
    MapOverlay MyOverlay = new MapOverlay();
    MyOverlay.Content = MyGrid;
    
    
    
  6. MyOverlayGeoCoordinate プロパティを設定し、マップ上の指定した geocoordinate 位置にグリッド要素を配置します。

    MyOverlay.GeoCoordinate = new GeoCoordinate(47.6097, -122.3331);
    
    
  7. MyOverlayPositionOrigin プロパティを設定し、マップに固定する四角形上の位置を指定します。

    MyOverlay.PositionOrigin = new Point(0,0.5);
    
    
  8. MyLayer という MapLayer を作成して、それに MyOverlay を追加します。

    
    //Creating a MapLayer and adding the MapOverlay to it
    MapLayer MyLayer = new MapLayer();
    MyLayer.Add(MyOverlay);
    MyMap.Layers.Add(MyLayer);
    
    

表示:
© 2014 Microsoft