Skip to content

Commit c4c70b1

Browse files
davidbritchdavidbritch
authored
Use the .NET xmlns schema for Maps types (#1801)
1 parent ac3ba03 commit c4c70b1

File tree

1 file changed

+275
-0
lines changed
  • docs/user-interface/controls

1 file changed

+275
-0
lines changed

‎docs/user-interface/controls/map.md‎

Lines changed: 275 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -173,6 +173,8 @@ For information about the `ItemsSource`, `ItemTemplate`, and `ItemTemplateSelect
173173

174174
A <xref:Microsoft.Maui.Controls.Maps.Map> can be displayed by adding it to a layout or page:
175175

176+
::: moniker range="=net-maui-7.0"
177+
176178
```xaml
177179
<ContentPage ...
178180
xmlns:maps="clr-namespace:Microsoft.Maui.Controls.Maps;assembly=Microsoft.Maui.Controls.Maps">
@@ -183,6 +185,19 @@ A <xref:Microsoft.Maui.Controls.Maps.Map> can be displayed by adding it to a lay
183185
> [!NOTE]
184186
> In XAML, an `xmlns` namespace definition should be added for the <xref:Microsoft.Maui.Controls.Maps.Map> control. While this isn't required, it prevents a collision between the `Polygon` and `Polyline` types, which exist in both the <xref:Microsoft.Maui.Controls.Maps> and <xref:Microsoft.Maui.Controls.Shapes> namespaces.
185187
188+
::: moniker-end
189+
190+
::: moniker range=">=net-maui-8.0"
191+
192+
```xaml
193+
<ContentPage ...
194+
xmlns:maps="http://schemas.microsoft.com/dotnet/2021/maui/maps">
195+
<maps:Map x:Name="map" />
196+
</ContentPage>
197+
```
198+
199+
::: moniker-end
200+
186201
The equivalent C# code is:
187202

188203
```csharp
@@ -237,6 +252,8 @@ Map map = new Map
237252

238253
The region of a map to display when a map is loaded can be set by passing a `MapSpan` argument to the <xref:Microsoft.Maui.Controls.Maps.Map> constructor:
239254

255+
::: moniker range="=net-maui-7.0"
256+
240257
```xaml
241258
<ContentPage ...
242259
xmlns:maps="clr-namespace:Microsoft.Maui.Controls.Maps;assembly=Microsoft.Maui.Controls.Maps"
@@ -260,6 +277,35 @@ The region of a map to display when a map is loaded can be set by passing a `Map
260277
</ContentPage>
261278
```
262279

280+
::: moniker-end
281+
282+
::: moniker range=">=net-maui-8.0"
283+
284+
```xaml
285+
<ContentPage ...
286+
xmlns:maps="http://schemas.microsoft.com/dotnet/2021/maui/maps"
287+
xmlns:sensors="clr-namespace:Microsoft.Maui.Devices.Sensors;assembly=Microsoft.Maui.Essentials">
288+
<maps:Map>
289+
<x:Arguments>
290+
<maps:MapSpan>
291+
<x:Arguments>
292+
<sensors:Location>
293+
<x:Arguments>
294+
<x:Double>36.9628066</x:Double>
295+
<x:Double>-122.0194722</x:Double>
296+
</x:Arguments>
297+
</sensors:Location>
298+
<x:Double>0.01</x:Double>
299+
<x:Double>0.01</x:Double>
300+
</x:Arguments>
301+
</maps:MapSpan>
302+
</x:Arguments>
303+
</maps:Map>
304+
</ContentPage>
305+
```
306+
307+
::: moniker-end
308+
263309
The equivalent C# code is:
264310

265311
```csharp
@@ -512,6 +558,8 @@ In addition, the `Pin` class defines `MarkerClicked` and `InfoWindowClicked` eve
512558

513559
A `Pin` can be added to a <xref:Microsoft.Maui.Controls.Maps.Map> in XAML:
514560

561+
::: moniker range="=net-maui-7.0"
562+
515563
```xaml
516564
<ContentPage ...
517565
xmlns:maps="clr-namespace:Microsoft.Maui.Controls.Maps;assembly=Microsoft.Maui.Controls.Maps"
@@ -549,6 +597,49 @@ A `Pin` can be added to a <xref:Microsoft.Maui.Controls.Maps.Map> in XAML:
549597
</ContentPage>
550598
```
551599

600+
::: moniker-end
601+
602+
::: moniker range=">=net-maui-8.0"
603+
604+
```xaml
605+
<ContentPage ...
606+
xmlns:maps="http://schemas.microsoft.com/dotnet/2021/maui/maps"
607+
xmlns:sensors="clr-namespace:Microsoft.Maui.Devices.Sensors;assembly=Microsoft.Maui.Essentials">
608+
<maps:Map x:Name="map">
609+
<x:Arguments>
610+
<maps:MapSpan>
611+
<x:Arguments>
612+
<sensors:Location>
613+
<x:Arguments>
614+
<x:Double>36.9628066</x:Double>
615+
<x:Double>-122.0194722</x:Double>
616+
</x:Arguments>
617+
</sensors:Location>
618+
<x:Double>0.01</x:Double>
619+
<x:Double>0.01</x:Double>
620+
</x:Arguments>
621+
</maps:MapSpan>
622+
</x:Arguments>
623+
<maps:Map.Pins>
624+
<maps:Pin Label="Santa Cruz"
625+
Address="The city with a boardwalk"
626+
Type="Place">
627+
<maps:Pin.Location>
628+
<sensors:Location>
629+
<x:Arguments>
630+
<x:Double>36.9628066</x:Double>
631+
<x:Double>-122.0194722</x:Double>
632+
</x:Arguments>
633+
</sensors:Location>
634+
</maps:Pin.Location>
635+
</maps:Pin>
636+
</maps:Map.Pins>
637+
</maps:Map>
638+
</ContentPage>
639+
```
640+
641+
::: moniker-end
642+
552643
This XAML creates a <xref:Microsoft.Maui.Controls.Maps.Map> object that shows the region that is specified by the `MapSpan` object. The `MapSpan` object is centered on the latitude and longitude represented by a `Location` object, which extends 0.01 latitude and longitude degrees. A `Pin` object is added to the `Map.Pins` collection, and drawn on the <xref:Microsoft.Maui.Controls.Maps.Map> at the location specified by its `Location` property. For information about the `Location` class, see [Location and distance](#location-and-distance). For information about passing arguments in XAML to objects that lack default constructors, see [Pass arguments in XAML](~/xaml/pass-arguments.md).
553644

554645
The equivalent C# code is:
@@ -652,6 +743,8 @@ The <xref:Microsoft.Maui.Controls.Maps.Map> class defines the following bindable
652743
653744
A <xref:Microsoft.Maui.Controls.Maps.Map> can be populated with pins by using data binding to bind its `ItemsSource` property to an `IEnumerable` collection:
654745

746+
::: moniker range="=net-maui-7.0"
747+
655748
```xaml
656749
<ContentPage ...
657750
xmlns:maps="clr-namespace:Microsoft.Maui.Controls.Maps;assembly=Microsoft.Maui.Controls.Maps">
@@ -672,6 +765,32 @@ A <xref:Microsoft.Maui.Controls.Maps.Map> can be populated with pins by using da
672765
</ContentPage>
673766
```
674767

768+
::: moniker-end
769+
770+
::: moniker range=">=net-maui-8.0"
771+
772+
```xaml
773+
<ContentPage ...
774+
xmlns:maps="http://schemas.microsoft.com/dotnet/2021/maui/maps">
775+
<Grid>
776+
...
777+
<maps:Map x:Name="map"
778+
ItemsSource="{Binding Positions}">
779+
<maps:Map.ItemTemplate>
780+
<DataTemplate>
781+
<maps:Pin Location="{Binding Location}"
782+
Address="{Binding Address}"
783+
Label="{Binding Description}" />
784+
</DataTemplate>
785+
</maps:Map.ItemTemplate>
786+
</maps:Map>
787+
...
788+
</Grid>
789+
</ContentPage>
790+
```
791+
792+
::: moniker-end
793+
675794
The `ItemsSource` property data binds to the `Positions` property of the connected viewmodel, which returns an `ObservableCollection` of `Position` objects, which is a custom type. Each `Position` object defines `Address` and `Description` properties, of type `string`, and a `Location` property, of type `Location`.
676795

677796
The appearance of each item in the `IEnumerable` collection is defined by setting the `ItemTemplate` property to a <xref:Microsoft.Maui.Controls.DataTemplate> that contains a `Pin` object that data binds to appropriate properties.
@@ -684,6 +803,8 @@ The following screenshot shows a <xref:Microsoft.Maui.Controls.Maps.Map> display
684803

685804
The appearance of each item in the `IEnumerable` collection can be chosen at runtime, based on the item value, by setting the `ItemTemplateSelector` property to a <xref:Microsoft.Maui.Controls.DataTemplateSelector>:
686805

806+
::: moniker range="=net-maui-7.0"
807+
687808
```xaml
688809
<ContentPage ...
689810
xmlns:templates="clr-namespace:WorkingWithMaps.Templates"
@@ -717,6 +838,45 @@ The appearance of each item in the `IEnumerable` collection can be chosen at run
717838
</ContentPage>
718839
```
719840

841+
::: moniker-end
842+
843+
::: moniker range=">=net-maui-8.0"
844+
845+
```xaml
846+
<ContentPage ...
847+
xmlns:templates="clr-namespace:WorkingWithMaps.Templates"
848+
xmlns:maps="http://schemas.microsoft.com/dotnet/2021/maui/maps">
849+
<ContentPage.Resources>
850+
<templates:MapItemTemplateSelector x:Key="MapItemTemplateSelector">
851+
<templates:MapItemTemplateSelector.DefaultTemplate>
852+
<DataTemplate>
853+
<maps:Pin Location="{Binding Location}"
854+
Address="{Binding Address}"
855+
Label="{Binding Description}" />
856+
</DataTemplate>
857+
</templates:MapItemTemplateSelector.DefaultTemplate>
858+
<templates:MapItemTemplateSelector.SanFranTemplate>
859+
<DataTemplate>
860+
<maps:Pin Location="{Binding Location}"
861+
Address="{Binding Address}"
862+
Label="Xamarin!" />
863+
</DataTemplate>
864+
</templates:MapItemTemplateSelector.SanFranTemplate>
865+
</templates:MapItemTemplateSelector>
866+
</ContentPage.Resources>
867+
868+
<Grid>
869+
...
870+
<maps:Map x:Name="map"
871+
ItemsSource="{Binding Positions}"
872+
ItemTemplateSelector="{StaticResource MapItemTemplateSelector}">
873+
...
874+
</Grid>
875+
</ContentPage>
876+
```
877+
878+
::: moniker-end
879+
720880
The following example shows the `MapItemTemplateSelector` class:
721881

722882
```csharp
@@ -770,6 +930,8 @@ The `Circle` class defines the following bindable properties:
770930

771931
A `Polygon` object can be added to a map by instantiating it and adding it to the map's `MapElements` collection:
772932

933+
::: moniker range="=net-maui-7.0"
934+
773935
```xaml
774936
<ContentPage ...
775937
xmlns:maps="clr-namespace:Microsoft.Maui.Controls.Maps;assembly=Microsoft.Maui.Controls.Maps"
@@ -800,6 +962,42 @@ A `Polygon` object can be added to a map by instantiating it and adding it to th
800962
</ContentPage>
801963
```
802964

965+
::: moniker-end
966+
967+
::: moniker range=">=net-maui-8.0"
968+
969+
```xaml
970+
<ContentPage ...
971+
xmlns:maps="http://schemas.microsoft.com/dotnet/2021/maui/maps"
972+
xmlns:sensors="clr-namespace:Microsoft.Maui.Devices.Sensors;assembly=Microsoft.Maui.Essentials">
973+
<maps:Map>
974+
<maps:Map.MapElements>
975+
<maps:Polygon StrokeColor="#FF9900"
976+
StrokeWidth="8"
977+
FillColor="#88FF9900">
978+
<maps:Polygon.Geopath>
979+
<sensors:Location>
980+
<x:Arguments>
981+
<x:Double>47.6458676</x:Double>
982+
<x:Double>-122.1356007</x:Double>
983+
</x:Arguments>
984+
</sensors:Location>
985+
<sensors:Location>
986+
<x:Arguments>
987+
<x:Double>47.6458097</x:Double>
988+
<x:Double>-122.142789</x:Double>
989+
</x:Arguments>
990+
</sensors:Location>
991+
...
992+
</maps:Polygon.Geopath>
993+
</maps:Polygon>
994+
</maps:Map.MapElements>
995+
</maps:Map>
996+
</ContentPage>
997+
```
998+
999+
::: moniker-end
1000+
8031001
The equivalent C# code is:
8041002

8051003
```csharp
@@ -837,6 +1035,8 @@ The `StrokeColor` and `StrokeWidth` properties are specified to set the polygon'
8371035

8381036
A `Polyline` object can be added to a map by instantiating it and adding it to the map's `MapElements` collection:
8391037

1038+
::: moniker range="=net-maui-7.0"
1039+
8401040
```xaml
8411041
<ContentPage ...
8421042
xmlns:maps="clr-namespace:Microsoft.Maui.Controls.Maps;assembly=Microsoft.Maui.Controls.Maps"
@@ -866,6 +1066,43 @@ A `Polyline` object can be added to a map by instantiating it and adding it to t
8661066
</ContentPage>
8671067
```
8681068

1069+
::: moniker-end
1070+
1071+
::: moniker range=">=net-maui-8.0"
1072+
1073+
```xaml
1074+
<ContentPage ...
1075+
xmlns:maps="http://schemas.microsoft.com/dotnet/2021/maui/maps"
1076+
xmlns:sensors="clr-namespace:Microsoft.Maui.Devices.Sensors;assembly=Microsoft.Maui.Essentials">
1077+
<maps:Map>
1078+
<maps:Map.MapElements>
1079+
<maps:Polyline StrokeColor="Black"
1080+
StrokeWidth="12">
1081+
<maps:Polyline.Geopath>
1082+
<sensors:Location>
1083+
<x:Arguments>
1084+
<x:Double>47.6381401</x:Double>
1085+
<x:Double>-122.1317367</x:Double>
1086+
</x:Arguments>
1087+
</sensors:Location>
1088+
<sensors:Location>
1089+
<x:Arguments>
1090+
<x:Double>47.6381473</x:Double>
1091+
<x:Double>-122.1350841</x:Double>
1092+
</x:Arguments>
1093+
</sensors:Location>
1094+
...
1095+
</maps:Polyline.Geopath>
1096+
</maps:Polyline>
1097+
</maps:Map.MapElements>
1098+
</maps:Map>
1099+
</ContentPage>
1100+
```
1101+
1102+
::: moniker-end
1103+
1104+
The equivalent C# code is:
1105+
8691106
```csharp
8701107
using Microsoft.Maui.Controls.Maps;
8711108
using Microsoft.Maui.Maps;
@@ -897,6 +1134,8 @@ The `StrokeColor` and `StrokeWidth` properties are specified to set the line app
8971134

8981135
A `Circle` object can be added to a map by instantiating it and adding it to the map's `MapElements` collection:
8991136

1137+
::: moniker range="=net-maui-7.0"
1138+
9001139
```xaml
9011140
<ContentPage ...
9021141
xmlns:maps="clr-namespace:Microsoft.Maui.Controls.Maps;assembly=Microsoft.Maui.Controls.Maps"
@@ -927,6 +1166,42 @@ A `Circle` object can be added to a map by instantiating it and adding it to the
9271166
</ContentPage>
9281167
```
9291168

1169+
::: moniker-end
1170+
1171+
::: moniker range=">=net-maui-8.0"
1172+
1173+
```xaml
1174+
<ContentPage ...
1175+
xmlns:maps="http://schemas.microsoft.com/dotnet/2021/maui/maps"
1176+
xmlns:sensors="clr-namespace:Microsoft.Maui.Devices.Sensors;assembly=Microsoft.Maui.Essentials">
1177+
<maps:Map>
1178+
<maps:Map.MapElements>
1179+
<maps:Circle StrokeColor="#88FF0000"
1180+
StrokeWidth="8"
1181+
FillColor="#88FFC0CB">
1182+
<maps:Circle.Center>
1183+
<sensors:Location>
1184+
<x:Arguments>
1185+
<x:Double>37.79752</x:Double>
1186+
<x:Double>-122.40183</x:Double>
1187+
</x:Arguments>
1188+
</sensors:Location>
1189+
</maps:Circle.Center>
1190+
<maps:Circle.Radius>
1191+
<maps:Distance>
1192+
<x:Arguments>
1193+
<x:Double>250</x:Double>
1194+
</x:Arguments>
1195+
</maps:Distance>
1196+
</maps:Circle.Radius>
1197+
</maps:Circle>
1198+
</maps:Map.MapElements>
1199+
</maps:Map>
1200+
</ContentPage>
1201+
```
1202+
1203+
::: moniker-end
1204+
9301205
The equivalent C# code is:
9311206

9321207
```csharp

0 commit comments

Comments
 (0)