このクイックスタートでは、Mapsコントロールを使用して.NET5で簡単なWPFアプリケーションを作成する手順について説明します。

以下の手順を実行し、データバインディングとプロパティの設定後にマップコントロールがどのように表示されるかを確認します。

1. 新しいWPFアプリケーションを作成します。

2. [NuGetパッケージの管理]オプションを使用してNuGetパッケージをインストールします。

3. コードビューに切り替えて、Cityという名前のクラスをcityNameプロパティに追加して都市名を取得または設定し、locationプロパティを追加して都市の場所を取得または設定します。

   • C#

   public class City
   {
       private Point _LongLat;
       public Point LongLat
       {
           get
           {
               return _LongLat;
           }
           set
           {
               _LongLat = value;
           }
       }
   
       private string _Name;
       public string Name
       {
           get
           {
               return _Name;
           }
           set
           {
               _Name = value;
           }
       }
   
       public City(Point location, string cityName)
       {
           this.LongLat = location;
           this.Name = cityName;
       }
   
       public City()
       {
       }
   }
   

4. InitializeComponent()メソッドの下に次のコードを追加して、NameプロパティとLongLatプロパティにデータを設定する配列コレクションを作成します。

   • C#

               City[] cities = new City[]
   {
      new City(){ LongLat= new Point(-58.40, -34.36), Name="Buenos Aires"},
      new City(){ LongLat= new Point(-47.92, -15.78), Name="Brasilia"},
      new City(){ LongLat= new Point(-70.39, -33.26), Name="Santiago"},
      new City(){ LongLat= new Point(-78.35, -0.15), Name="Quito"},
      new City(){ LongLat= new Point(-66.55, 10.30), Name="Caracas"},
      new City(){ LongLat= new Point(-56.11, -34.53), Name="Montevideo"},
      new City(){ LongLat= new Point(-77.03, -12.03), Name="Lima"},
      new City(){ LongLat= new Point(-57.40, -25.16), Name="Asuncion"},
      new City(){ LongLat= new Point(-74.05, 4.36), Name="Bogota"},
      new City(){ LongLat= new Point(-68.09, -16.30), Name="La Paz"},
      new City(){ LongLat= new Point(-58.10, 6.48), Name="Georgetown"},
      new City(){ LongLat= new Point(-55.10, 5.50), Name="Paramaribo"},
   };
               maps.DataContext = cities;
   

5. XAMLデザイナ（MainWindow.xaml）でマップコントロールをドラッグします。 <c1:C1Maps>タグと</c1:C1Maps>タグの間に次のXAMLマークアップを配置します。

   • XAML

   <c1:C1Maps x:Name="maps" FadeInTiles="False" Margin="0,0,235,8" TargetCenter="-65,-25" Center="-58,-25" Zoom="2" Foreground="Brown">
           <c1:C1Maps.Resources>
               <!--Item template -->
               <DataTemplate x:Key="templPts">
                   <c1:VectorPlacemark
            GeoPoint="{Binding Path=LongLat}" Fill="Aqua" Stroke="Aqua"
            Label="{Binding Path=Name}" LabelPosition="Top" >
                       <c1:VectorPlacemark.Geometry>
                           <EllipseGeometry RadiusX="2" RadiusY="2" />
                       </c1:VectorPlacemark.Geometry>
                   </c1:VectorPlacemark>
               </DataTemplate>
           </c1:C1Maps.Resources>
           <c1:VectorLayer ItemsSource="{Binding}"
   ItemTemplate="{StaticResource templPts}" HorizontalAlignment="Right" Width="403" />
       </c1:C1Maps>
   

   上記のXAMLコードでは、VectorPlacemark クラスとVectorLayer クラスを使用してデータテンプレートを作成しました。 XAMLコードでは、次のプロパティが使用されます。

   • マップの外観をカスタマイズするには、C1MapsクラスのFadeInTiles、Center、およびZoomプロパティを使用します。
   • VectorPlacemark クラスのGeoPointプロパティとLabel プロパティは、経度/緯度の地理座標で要素の位置を設定し、ツールチップを表示するために使用されます。 ここには、GeoPointプロパティはLongLatプロパティの値にバインドされ、LabelプロパティはCityクラスのNameプロパティの値に設定されます。
   • VectorLayerクラスのItemsSourceプロパティは、データソース全体にバインドされています。
6. プログラムを実行し、クイックスタートプロジェクトの結果を表示します。