[Maps] Add Windows map handler based on Webview

azure-pipelines.yml

@@ -4,13 +4,15 @@ variables:
  CurrentSemanticVersion: '$(CurrentSemanticVersionBase)-preview$(PreviewNumber)'
  NugetPackageVersion: '$(CurrentSemanticVersion)'
  NugetPackageVersionMediaElement: '$(CurrentSemanticVersion)'
+ NugetPackageVersionMaps: '$(CurrentSemanticVersion)'
  TOOLKIT_NET_VERSION: '7.0.200'
  LATEST_NET_VERSION: '7.0.x'
  PathToLibrarySolution: 'src/CommunityToolkit.Maui.sln'
  PathToSamplesSolution: 'samples/CommunityToolkit.Maui.Sample.sln'
  PathToCommunityToolkitCsproj: 'src/CommunityToolkit.Maui/CommunityToolkit.Maui.csproj'
  PathToCommunityToolkitCoreCsproj: 'src/CommunityToolkit.Maui.Core/CommunityToolkit.Maui.Core.csproj'
  PathToCommunityToolkitMediaElementCsproj: 'src/CommunityToolkit.Maui.MediaElement/CommunityToolkit.Maui.MediaElement.csproj'
+ PathToCommunityToolkitMapsCsproj: 'src/CommunityToolkit.Maui.Maps/CommunityToolkit.Maui.Maps.csproj'
  PathToCommunityToolkitSampleCsproj: 'samples/CommunityToolkit.Maui.Sample/CommunityToolkit.Maui.Sample.csproj'
  PathToCommunityToolkitUnitTestCsproj: 'src/CommunityToolkit.Maui.UnitTests/CommunityToolkit.Maui.UnitTests.csproj'
  PathToCommunityToolkitAnalyzersCsproj: 'src/CommunityToolkit.Maui.Analyzers/CommunityToolkit.Maui.Analyzers.csproj'
@@ -138,6 +140,16 @@ jobs:
  displayName: Set NuGet Version to Tag Number
  condition: and(startsWith(variables['Build.SourceBranch'], 'refs/tags/'), endsWith(variables['Build.SourceBranch'], '-mediaelement')) # Only run this step when a Tag has triggered the CI Pipeline 
 
+ # if this is a tagged build for CommunityToolkit.Maui.Maps, then update the version number
+ - powershell: |
+ $buildSourceBranch = "$(Build.SourceBranch)"
+ $tagVersion = $buildSourceBranch.Substring($buildSourceBranch.LastIndexOf("/") + 1)
+ $tagVersion = $tagVersion.Substring(0, $tagVersion.LastIndexOf("-"))
+ Write-Host("Branch = $buildSourceBranch, Version = $tagVersion");
+ Write-Host ("##vso[task.setvariable variable=NugetPackageVersionMaps;]$tagVersion")
+ displayName: Set NuGet Version to Tag Number
+ condition: and(startsWith(variables['Build.SourceBranch'], 'refs/tags/'), endsWith(variables['Build.SourceBranch'], '-maps')) # Only run this step when a Tag has triggered the CI Pipeline 
+
  # if this is a PR build, then update the version number
  - powershell: |
  $prNumber = $env:System_PullRequest_PullRequestNumber
@@ -238,6 +250,11 @@ jobs:
  inputs:
  script: 'dotnet pack $(PathToCommunityToolkitMediaElementCsproj) -c Release -p:PackageVersion=$(NugetPackageVersionMediaElement)'
 
+ - task: CmdLine@2
+ displayName: 'Pack CommunityToolkit.Maui.Maps NuGet'
+ inputs:
+ script: 'dotnet pack $(PathToCommunityToolkitMapsCsproj) -c Release -p:PackageVersion=$(NugetPackageVersionMaps)'
+
  # check vulnerabilities
  - powershell: |
  dotnet list $(PathToLibrarySolution) package --vulnerable --include-transitive | findstr /S /c:"has the following vulnerable packages";
@@ -286,6 +303,18 @@ jobs:
  $filter = "CommunityToolkit.Maui.MediaElement.[0-9]+.[0-9]+.[0-9]+(-[a-zA-Z0-9]*)*.nupkg"
  Get-ChildItem -Path $source -Recurse | Where-Object { $_.Name -match $filter } | Copy-Item -Destination "$(Build.ArtifactStagingDirectory)"
  pwsh: true
+
+ # Copy CommunityToolkit.Maui.Maps package
+ - task: PowerShell@2
+ condition: and(eq(variables['Agent.OS'], 'Windows_NT'), startsWith(variables['Build.SourceBranch'], 'refs/tags/'), endsWith(variables['Build.SourceBranch'], '-maps')) # Only run this step on Windows and when it's a tagged build and the tag ends with -maps
+ displayName: 'Copy CommunityToolkit.Maui.Maps NuGet Package to Staging Directory'
+ inputs:
+ targetType: 'inline'
+ script: |
+ $source = ".\src"
+ $filter = "CommunityToolkit.Maui.Maps.[0-9]+.[0-9]+.[0-9]+(-[a-zA-Z0-9]*)*.nupkg"
+ Get-ChildItem -Path $source -Recurse | Where-Object { $_.Name -match $filter } | Copy-Item -Destination "$(Build.ArtifactStagingDirectory)"
+ pwsh: true
 
  # Sign NuGet Packages
  - task: PowerShell@2

samples/CommunityToolkit.Maui.Sample.sln

@@ -33,6 +33,8 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Tests", "Tests", "{9F7D54C0
 EndProject
 Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "CommunityToolkit.Maui.Analyzers.UnitTests", "..\src\CommunityToolkit.Maui.Analyzers.UnitTests\CommunityToolkit.Maui.Analyzers.UnitTests.csproj", "{60B976B2-F3FA-494E-A28B-7BED2EAE990E}"
 EndProject
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "CommunityToolkit.Maui.Maps", "..\src\CommunityToolkit.Maui.Maps\CommunityToolkit.Maui.Maps.csproj", "{6D2CACB2-9AAA-4F1F-B480-750F23D5FEA2}"
+EndProject
 Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "CommunityToolkit.Maui.MediaElement", "..\src\CommunityToolkit.Maui.MediaElement\CommunityToolkit.Maui.MediaElement.csproj", "{A651D248-B102-4B8B-90C2-3C4C28425EFF}"
 EndProject
 Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "CommunityToolkit.Maui.MediaElement.Analyzers", "..\src\CommunityToolkit.Maui.MediaElement.Analyzers\CommunityToolkit.Maui.MediaElement.Analyzers.csproj", "{85B875BD-62F6-4EC3-BCFF-4DC25E94BCAE}"
@@ -81,6 +83,10 @@ Global
  {60B976B2-F3FA-494E-A28B-7BED2EAE990E}.Debug|Any CPU.Build.0 = Debug|Any CPU
  {60B976B2-F3FA-494E-A28B-7BED2EAE990E}.Release|Any CPU.ActiveCfg = Release|Any CPU
  {60B976B2-F3FA-494E-A28B-7BED2EAE990E}.Release|Any CPU.Build.0 = Release|Any CPU
+ {6D2CACB2-9AAA-4F1F-B480-750F23D5FEA2}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+ {6D2CACB2-9AAA-4F1F-B480-750F23D5FEA2}.Debug|Any CPU.Build.0 = Debug|Any CPU
+ {6D2CACB2-9AAA-4F1F-B480-750F23D5FEA2}.Release|Any CPU.ActiveCfg = Release|Any CPU
+ {6D2CACB2-9AAA-4F1F-B480-750F23D5FEA2}.Release|Any CPU.Build.0 = Release|Any CPU
  {A651D248-B102-4B8B-90C2-3C4C28425EFF}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
  {A651D248-B102-4B8B-90C2-3C4C28425EFF}.Debug|Any CPU.Build.0 = Debug|Any CPU
  {A651D248-B102-4B8B-90C2-3C4C28425EFF}.Release|Any CPU.ActiveCfg = Release|Any CPU

samples/CommunityToolkit.Maui.Sample/AppShell.xaml.cs

@@ -113,8 +113,13 @@ public partial class AppShell : Shell
  CreateViewModelMapping<AvatarViewSizesPage, AvatarViewSizesViewModel, ViewsGalleryPage, ViewsGalleryViewModel>(),
  CreateViewModelMapping<DrawingViewPage, DrawingViewViewModel, ViewsGalleryPage, ViewsGalleryViewModel>(),
  CreateViewModelMapping<ExpanderPage, ExpanderViewModel, ViewsGalleryPage, ViewsGalleryViewModel>(),
+
+ CreateViewModelMapping<BasicMapsPage, BasicMapsViewModel, ViewsGalleryPage, ViewsGalleryViewModel>(),
+ CreateViewModelMapping<MapsPinsPage, MapsPinsViewModel, ViewsGalleryPage, ViewsGalleryViewModel>(),
+
  CreateViewModelMapping<LazyViewPage, LazyViewViewModel, ViewsGalleryPage, ViewsGalleryViewModel>(),
  CreateViewModelMapping<MediaElementPage, MediaElementViewModel, ViewsGalleryPage, ViewsGalleryViewModel>(),
+
  CreateViewModelMapping<MultiplePopupPage, MultiplePopupViewModel, ViewsGalleryPage, ViewsGalleryViewModel>(),
  CreateViewModelMapping<PopupAnchorPage, PopupAnchorViewModel, ViewsGalleryPage, ViewsGalleryViewModel>(),
  CreateViewModelMapping<PopupPositionPage, PopupPositionViewModel, ViewsGalleryPage, ViewsGalleryViewModel>(),

samples/CommunityToolkit.Maui.Sample/CommunityToolkit.Maui.Sample.csproj

@@ -1,4 +1,4 @@
-<Project Sdk="Microsoft.NET.Sdk">
+<Project Sdk="Microsoft.NET.Sdk">
 
  <PropertyGroup>
  <TargetFrameworks>net7.0-ios;net7.0-android;net7.0-maccatalyst</TargetFrameworks>
@@ -69,6 +69,7 @@
  <ProjectReference Include="..\..\src\CommunityToolkit.Maui.Analyzers.CodeFixes\CommunityToolkit.Maui.Analyzers.CodeFixes.csproj" OutputItemType="Analyzer" ReferenceOutputAssembly="false" />
  <ProjectReference Include="..\..\src\CommunityToolkit.Maui.MediaElement\CommunityToolkit.Maui.MediaElement.csproj" />
  <ProjectReference Include="..\..\src\CommunityToolkit.Maui\CommunityToolkit.Maui.csproj" />
+ <ProjectReference Include="..\..\src\CommunityToolkit.Maui.Maps\CommunityToolkit.Maui.Maps.csproj" />
  </ItemGroup>
 
  <PropertyGroup Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)'))=='android'">

samples/CommunityToolkit.Maui.Sample/MauiProgram.cs

@@ -21,6 +21,7 @@
 using CommunityToolkit.Maui.Sample.ViewModels.Layouts;
 using CommunityToolkit.Maui.Sample.ViewModels.Views;
 using CommunityToolkit.Maui.Sample.ViewModels.Views.AvatarView;
+using CommunityToolkit.Maui.Maps;
 using CommunityToolkit.Maui.Storage;
 using Microsoft.Extensions.Logging;
 using Polly;
@@ -46,14 +47,15 @@ public static MauiApp CreateMauiApp()
 #endif
  .UseMauiCommunityToolkitMarkup()
  .UseMauiCommunityToolkitMediaElement()
+ .UseMauiCommunityToolkitMaps("") // You should add your own key here from bingmapsportal.com
  .UseMauiApp<App>()
  .ConfigureFonts(fonts =>
  {
  fonts.AddFont("Font Awesome 6 Brands-Regular-400.otf", FontFamilies.FontAwesomeBrands);
  });
 
  builder.Services.AddHttpClient<ByteArrayToImageSourceConverterViewModel>()
- .AddTransientHttpErrorPolicy(builder => builder.WaitAndRetryAsync(3, SleepDurationProvider));
+ .AddTransientHttpErrorPolicy(policyBuilder => policyBuilder.WaitAndRetryAsync(3, SleepDurationProvider));
 
  builder.Services.AddSingleton<PopupSizeConstants>();
 
@@ -172,8 +174,13 @@ static void RegisterViewsAndViewModels(in IServiceCollection services)
  // Add Views Pages + ViewModels
  services.AddTransientWithShellRoute<DrawingViewPage, DrawingViewViewModel>();
  services.AddTransientWithShellRoute<ExpanderPage, ExpanderViewModel>();
+
+ services.AddTransientWithShellRoute<BasicMapsPage, BasicMapsViewModel>();
+ services.AddTransientWithShellRoute<MapsPinsPage, MapsPinsViewModel>();
+
  services.AddTransientWithShellRoute<LazyViewPage, LazyViewViewModel>();
  services.AddTransientWithShellRoute<MediaElementPage, MediaElementViewModel>();
+
  services.AddTransientWithShellRoute<MultiplePopupPage, MultiplePopupViewModel>();
  services.AddTransientWithShellRoute<PopupAnchorPage, PopupAnchorViewModel>();
  services.AddTransientWithShellRoute<PopupPositionPage, PopupPositionViewModel>();

samples/CommunityToolkit.Maui.Sample/Pages/Views/Maps/BasicMapsPage.xaml

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<pages:BasePage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+ xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+ xmlns:pages="clr-namespace:CommunityToolkit.Maui.Sample.Pages"
+ xmlns:vm="clr-namespace:CommunityToolkit.Maui.Sample.ViewModels.Views"
+ x:Class="CommunityToolkit.Maui.Sample.Pages.Views.BasicMapsPage"
+ x:DataType="vm:BasicMapsViewModel"
+ x:TypeArguments="vm:BasicMapsViewModel"
+ Title="Windows Map">
+
+ <Grid RowDefinitions="Auto, Auto, Auto, Auto, *">
+ <HorizontalStackLayout Grid.Row="0">
+ <Switch x:Name="ShowUserLocationSwitch" Margin="5"/>
+ <Label Text="Show user" VerticalOptions="Center"/>
+ <Switch x:Name="ShowTrafficSwitch" Margin="5"/>
+ <Label Text="Show traffic" VerticalOptions="Center"/>
+ </HorizontalStackLayout>
+ <HorizontalStackLayout Grid.Row="1">
+ <Label Text="MapType" VerticalOptions="Center"/>
+ <Picker x:Name="MapTypePicker" Margin="5" SelectedIndex="0" SelectedIndexChanged="MapTypePicker_OnSelectedIndexChanged">
+ <Picker.Items>
+ <x:String>Hybrid</x:String>
+ <x:String>Satellite</x:String>
+ <x:String>Street</x:String>
+ </Picker.Items>
+ </Picker>
+ </HorizontalStackLayout>
+ <HorizontalStackLayout Grid.Row="2">
+ <Switch x:Name="ZoomEnabledSwitch" Margin="5" IsToggled="True"/>
+ <Label Text="Zoom enabled" VerticalOptions="Center"/>
+ <Switch x:Name="ScrollEnabledSwitch" Margin="5" IsToggled="True"/>
+ <Label Text="Scroll enabled" VerticalOptions="Center"/>
+ </HorizontalStackLayout>
+ <Button Text="Move to region" Clicked="Button_OnClicked" Grid.Row="3"/>
+ <Map x:Name="BasicMap" Grid.Row="4" 
+ IsShowingUser="{Binding IsToggled, Source={x:Reference ShowUserLocationSwitch}}"
+ IsTrafficEnabled="{Binding IsToggled, Source={x:Reference ShowTrafficSwitch}}"
+ IsZoomEnabled="{Binding IsToggled, Source={x:Reference ZoomEnabledSwitch}}"
+ IsScrollEnabled="{Binding IsToggled, Source={x:Reference ScrollEnabledSwitch}}"/>
+ </Grid>
+</pages:BasePage>

samples/CommunityToolkit.Maui.Sample/Pages/Views/Maps/BasicMapsPage.xaml.cs

@@ -0,0 +1,19 @@
+using CommunityToolkit.Maui.Sample.ViewModels.Views;
+using Microsoft.Maui.Maps;
+
+namespace CommunityToolkit.Maui.Sample.Pages.Views;
+
+public partial class BasicMapsPage : BasePage<BasicMapsViewModel>
+{
+ public BasicMapsPage(BasicMapsViewModel mapsViewModel) : base(mapsViewModel) => InitializeComponent();
+
+ private void MapTypePicker_OnSelectedIndexChanged(object? sender, EventArgs e)
+ {
+ BasicMap.MapType = (MapType)MapTypePicker.SelectedIndex;
+ }
+
+ private void Button_OnClicked(object? sender, EventArgs e)
+ {
+ BasicMap.MoveToRegion(MapSpan.FromCenterAndRadius(new Location(50, 6), Distance.FromKilometers(1)));
+ }
+}

samples/CommunityToolkit.Maui.Sample/Pages/Views/Maps/MapsPinsPage.xaml

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<pages:BasePage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+ xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+ xmlns:pages="clr-namespace:CommunityToolkit.Maui.Sample.Pages"
+ xmlns:vm="clr-namespace:CommunityToolkit.Maui.Sample.ViewModels.Views"
+ x:DataType="vm:MapsPinsViewModel"
+ x:TypeArguments="vm:MapsPinsViewModel"
+ x:Class="CommunityToolkit.Maui.Sample.Pages.Views.MapsPinsPage"
+ Title="Windows Maps Pins Sample">
+ <Grid RowDefinitions="Auto, *">
+ <HorizontalStackLayout Grid.Row="0">
+ <Button Text="Init region" Clicked="InitRegion_OnClicked" />
+ <Button Text="Add Pin" Clicked="AddPin_Clicked" />
+ <Button Text="Remove Pin" Clicked="RemovePin_Clicked" />
+ <Button Text="Add 10 Pins" Clicked="Add10Pins_Clicked" />
+ </HorizontalStackLayout>
+ <Map x:Name="PinsMap" Grid.Row="1" />
+ </Grid>
+</pages:BasePage>

samples/CommunityToolkit.Maui.Sample/Pages/Views/Maps/MapsPinsPage.xaml.cs

@@ -0,0 +1,117 @@
+using Microsoft.Maui.Controls.Maps;
+using CommunityToolkit.Maui.Sample.ViewModels.Views;
+using Microsoft.Maui.Maps;
+
+namespace CommunityToolkit.Maui.Sample.Pages.Views;
+
+public partial class MapsPinsPage : BasePage<MapsPinsViewModel>
+{
+ private readonly Random locationRandomSeed = new();
+ private int locationIncrement = 0;
+
+ // TODO generate actual random pins
+ private readonly Location[] randomLocations =
+ {
+ new Location(51.8833333333333, 176.65),
+ new Location(21.3166666666667, 157.833333333333),
+ new Location(71.3, 156.766666666667),
+ new Location(19.7, 155.083333333333),
+ new Location(61.2166666666667, 149.9),
+ new Location(70.2, 148.516666666667),
+ new Location(64.85, 147.716666666667),
+ new Location(57.05, 135.333333333333),
+ new Location(60.7166666666667, 135.05),
+ new Location(58.3, 134.416666666667),
+ new Location(69.45, 133.033333333333),
+ new Location(48.4333333333333, 123.366666666667),
+ new Location(49.25, 123.1),
+ new Location(45.5166666666667, 122.683333333333),
+ new Location(37.7833333333333, 122.416666666667),
+ new Location(47.6166666666667, 122.333333333333),
+ new Location(38.55, 121.466666666667),
+ new Location(50.6833333333333, 120.333333333333),
+ new Location(39.5333333333333, 119.816666666667),
+ new Location(34.4333333333333, 119.716666666667),
+ new Location(49.8833333333333, 119.5),
+ new Location(55.1666666666667, 118.8),
+ new Location(34.05, 118.25),
+ new Location(33.95, 117.4),
+ new Location(32.7166666666667, 117.166666666667),
+ new Location(32.5333333333333, 117.033333333333),
+ new Location(31.85, 116.6),
+ new Location(43.6166666666667, 116.2),
+ new Location(32.6666666666667, 115.466666666667),
+ new Location(36.1833333333333, 115.133333333333),
+ new Location(62.45, 114.4),
+ new Location(51.05, 114.066666666667),
+ new Location(53.5333333333333, 113.5),
+ new Location(33.45, 112.066666666667),
+ new Location(46.6, 112.033333333333),
+ };
+
+ public MapsPinsPage(MapsPinsViewModel mapsPinsViewModel) : base(mapsPinsViewModel)
+ {
+ InitializeComponent();
+ }
+
+ void AddPin_Clicked(object sender, EventArgs e)
+ {
+ AddPin();
+ }
+
+ void RemovePin_Clicked(object sender, EventArgs e)
+ {
+ if (PinsMap.Pins.Count > 0)
+ {
+ PinsMap.Pins.RemoveAt(PinsMap.Pins.Count - 1);
+ locationIncrement--;
+ }
+ }
+
+ void Add10Pins_Clicked(object sender, EventArgs e)
+ {
+ for (int i = 0; i <= 10; i++)
+ {
+ AddPin();
+ }
+ }
+
+ void AddPin()
+ {
+ PinsMap.Pins.Add(new Pin()
+ {
+ Label = $"Location {locationIncrement++}",
+ Location = randomLocations[locationRandomSeed.Next(0, randomLocations.Length)],
+ });
+ }
+
+ private void InitRegion_OnClicked(object? sender, EventArgs e)
+ {
+ var microsoftLocation = new Location(47.64232, -122.13684);
+ PinsMap.MoveToRegion(MapSpan.FromCenterAndRadius(microsoftLocation, Distance.FromKilometers(1)));
+
+ if (PinsMap.Pins.Any(x => x.Location == microsoftLocation))
+ {
+ return;
+ }
+
+ var microsoftPin = new Pin()
+ {
+ Address = "One Microsoft Way, Redmond, USA",
+ Label = "Microsoft Visitors Center",
+ Location = microsoftLocation,
+ };
+
+ microsoftPin.MarkerClicked += (s, a) =>
+ {
+ DisplayAlert("Marker", "OK", "OK");
+ };
+
+ microsoftPin.InfoWindowClicked += (s, a) =>
+ {
+ DisplayAlert("Info", "OK", "OK");
+ };
+
+ PinsMap.Pins.Add(microsoftPin);
+ }
+}

samples/CommunityToolkit.Maui.Sample/ViewModels/Views/Maps/MapsPinsViewModel.cs

@@ -0,0 +1,5 @@
+namespace CommunityToolkit.Maui.Sample.ViewModels.Views;
+
+public class MapsPinsViewModel : BaseViewModel
+{
+}

samples/CommunityToolkit.Maui.Sample/ViewModels/Views/Maps/MapsViewModel.cs

@@ -0,0 +1,5 @@
+namespace CommunityToolkit.Maui.Sample.ViewModels.Views;
+
+public class BasicMapsViewModel : BaseViewModel
+{
+}

samples/CommunityToolkit.Maui.Sample/ViewModels/Views/ViewsGalleryViewModel.cs

@@ -21,6 +21,8 @@ public ViewsGalleryViewModel()
  SectionModel.Create<AvatarViewSizesViewModel>("AvatarView Sizes Page", Colors.Red, "A page demonstrating AvatarViews with various size options."),
  SectionModel.Create<DrawingViewViewModel>("DrawingView", Colors.Red, "DrawingView provides a canvas for users to \"paint\" on the screen. The drawing can also be captured and displayed as an Image."),
  SectionModel.Create<ExpanderViewModel>("Expander Page", Colors.Red, "Expander allows collapse and expand content."),
+ SectionModel.Create<BasicMapsViewModel>("Windows Maps Basic Page", Colors.Red, "A page demonstrating a basic example of .NET MAUI Maps for Windows."),
+ SectionModel.Create<MapsPinsViewModel>("Windows Maps Pins Page", Colors.Red, "A page demonstrating .NET MAUI Maps for Windows with Pins."),
  SectionModel.Create<LazyViewViewModel>("LazyView", Colors.Red, "LazyView is a view that allows you to load its children in a delayed manner."),
  SectionModel.Create<MediaElementViewModel>("MediaElement", Colors.Red, "MediaElement is a view for playing video and audio"),
  SectionModel.Create<MultiplePopupViewModel>("Mutiple Popups Page", Colors.Red, "A page demonstrating multiple different Popups"),