Posted on 1. May 2023

Малювання елементів на картах за допомогою .NET MAUI

 

 

Чи знаєте ви, що .NET MAUI має повний контроль Map над програмами iOS, Android і MacCatalyst? Він з’явився разом із запуском .NET 7 і дозволяє не лише відображати карту зі шпильками, але також дозволяє повноцінно малювати багатокутники, полілінії та кола! Давайте сьогодні подивимося на елементи керування Map, як відображати позначки, як малювати контури та пішохідні доріжки в кампусі Microsoft у Редмонді!

Позначки на карті

 

Елементи керування Map в .NET MAUI пропонують широкий спектр налаштувань відображення карти. Одним із основних елементів, які люди розміщують на карті, є маркер Pin із текстом. Властивість елемента Pins контролера Map це властивість IList, яку ми можемо заповнювати динамічно, щоб поставити якомога більше позначок на карті. Це можна зробити в XAML:

Ви можете вказати позначки безпосередньо в XAML або використати прив’язку даних до списку Pin, за допомогою властивості  ItemsSource подібної до ListView або CollectionView.

 

Ви також можете зробити це безпосередньо в коді C#:

Ще краще, ви можете додавати події до Pin, щоб побачити, коли його клацнули або коли клацнули інформаційне вікно за допомогою подій MarkerClickedі InfoWindowClicked на Pin.

Нанесення елементів на карту

А тепер давайте розважимося і намалюємо кілька ліній і багатокутників на карті! Властивість MapElements у Map містить список MapElement, список елементів які можна намалювати на карті. У .NET MAUI вбудовано три елементи:

- Коло : коло, проведене з центральної точки із заданим радіусом

- Багатокутник : повністю закрита форма. Перша й остання точки з’єднуються автоматично.

- Ламана лінія : низка точок, з’єднаних накресленими лініями

За допомогою цих трьох елементів ви можете робити на карті майже все! Наприклад намалювати над кампусом Microsoft у Редмонді лінію, що показує доріжку між східним і західним кампусом:

 

Спочатку намалюймо два елементи Polygon, які представляють наш Західний і Східний кампус. Кожен із них візьме список об’єктів Location у властивості Geopath, які визначатимуть точки контуру. Polygon автоматично з’єднає кожну з цих точок із Stroke повним фоном, який ви можете визначити, за допомогою FillColor. Усе це можна створити безпосередньо в XAML без зв’язування даних або безпосередньо в C#, як мені більше подобається під час роботи з картами.