{"id":2446352,"date":"2024-07-26T03:17:50","date_gmt":"2024-07-26T10:17:50","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=2446352"},"modified":"2024-08-12T02:34:03","modified_gmt":"2024-08-12T09:34:03","slug":"using-arcgis-maps-sdk-for-net-in-an-mvvm-pattern","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/sdk-net\/developers\/using-arcgis-maps-sdk-for-net-in-an-mvvm-pattern","title":{"rendered":"Using ArcGIS Maps SDK for .NET in an MVVM pattern"},"author":359632,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[738191],"tags":[772172,768202,775992,773362],"industry":[],"product":[761642,769142,36601],"class_list":["post-2446352","blog","type-blog","status-publish","format-standard","hentry","category-developers","tag-arcgis-developers","tag-arcgis-maps-sdks-for-native-apps","tag-mvvm","tag-native-development","product-platform","product-sdk-net","product-developers"],"acf":{"authors":[{"ID":359632,"user_firstname":"Hamish","user_lastname":"Duff","nickname":"Hamish Duff","user_nicename":"hduff","display_name":"Hamish Duff","user_email":"hduff@esri.com","user_url":"","user_registered":"2024-07-26 10:03:08","user_description":"I'm a product engineer on the ArcGIS Maps SDKs for Native Apps team.","user_avatar":""}],"short_description":"This blog will demonstrate how to implement ArcGIS Maps SDK for .NET in a Model-View-ViewModel (MVVM) pattern","flexible_content":[{"acf_fc_layout":"content","content":"

.NET applications commonly use the Model-View-ViewModel (MVVM) design pattern, in which code can be broken up into classes with a small number of well defined responsibilities. This can help improve code understandability, maintenance and ease of modification in larger code bases.<\/p>\n

What is MVVM?<\/h2>\n

Model-View-ViewModel (MVVM) is a pattern that separates application business logic from the user interface (UI). In short, the view describes the user interface (UI) and interacts with the view model through data bindings and commands, and it updates the model state. This helps keep the model separated from the view, which means changes do not need to be reflected in the view and vice versa.<\/p>\n

MVVM in an ArcGIS Maps SDK for .NET application<\/h2>\n

To demonstrate how to implement the MVVM pattern in a .NET Maps SDK app this blog post looks at the following use cases:<\/p>\n

    \n
  1. Create a .NET application<\/a><\/li>\n
  2. Add NuGet packages<\/a><\/li>\n
  3. Setup dependency injection<\/a><\/li>\n
  4. Display data on a MapView<\/a><\/li>\n
  5. Add a GeoViewController to a MapView<\/a><\/li>\n
  6. Implement layer identification<\/a><\/li>\n
  7. Change viewpoint from the view model<\/a><\/li>\n<\/ol>\n

    If you haven\u2019t installed the .NET Maps SDK already, you can do so by visiting the install and set up pages<\/a> on the Esri Developer\u2019s website.<\/em><\/p>\n

    In the following sections I describe how to build an ArcGIS Maps SDK for .NET app<\/a> that follows an MVVM pattern. As I am focusing on MVVM in this blog post I will highlight the areas of the application that are relevant to MVVM, where this is not the case I will provide a brief overview and link to more information on the topic.<\/p>\n

    Create a .NET application<\/h2>\n

    You can easily get started building an MVVM app by downloading the ArcGIS Maps SDK for .NET template for .NET<\/a> from the\u00a0Microsoft Visual Studio marketplace<\/a>. This template references the appropriate NuGet packages for each platform, using the MVVM design pattern. In this blog I will be using .NET MAUI but the same patterns and practices apply to WPF, WinUI and UWP.<\/p>\n

    The template provides boiler-plate code with a view model called MapViewModel.cs<\/code> which is bound to the view in MainPage.xaml.cs<\/code>.<\/p>\n

    \n
    public<\/span> partial<\/span> class<\/span> MainPage<\/span> : ContentPage\r\n{\r\n    public<\/span> MainPage()\r\n    {\r\n\tInitializeComponent();\r\n\r\n\tthis<\/span>.BindingContext = new<\/span> MapViewModel();\r\n    }\r\n}\r\n<\/pre>\n<\/div>\n
    Note that there are multiple ways to bind the view model to the view. In the template, BindingContext<\/code> is defined in MainPage.xaml.cs<\/code> code-behind but it could also be set in the MainPage.xaml<\/code> file via xaml, as shown below.<\/p>\n
    <\/p>\n
    \n
    <ContentPage.Resources>\r\n   <local:MapViewModel x:Key=\"VM\"<\/span> \/>\r\n<\/ContentPage.Resources>\r\n<\/pre>\n<\/div>\n
    ArcGIS location services, data hosting services, and content management services require authentication with an API key or by authenticating with ArcGIS Online. You can learn more about API keys and how to generate them from the Create an API key<\/a> tutorial. Once you have it, this API key can be added in the MauiProgram.cs<\/code> file, and if you\u2019re using a project from the template, you can replace the placeholder text with the key for your app.
    \n<\/p>\n
    \n
    .UseApiKey(\"YOUR_API_KEY\"<\/span>)\r\n<\/pre>\n<\/div>\n
    Add NuGet packages<\/h2>\n
    To simplify the code and enhance the view model\u2019s capabilities, add the following package references to the project file.
    \n<\/p>\n
    \n
    <PackageReference Include=\"CommunityToolkit.Maui\"<\/span> Version=\"8.0.1\"<\/span> \/>\r\n<PackageReference Include=\"CommunityToolkit.Mvvm\"<\/span> Version=\"8.2.2\"<\/span> \/>\r\n<PackageReference Include=\"Esri.ArcGISRuntime.Toolkit.Maui\"<\/span> Version=\"200.5.0\"<\/span> \/>\r\n<\/pre>\n<\/div>\n
    <\/p>\n
    \n
    Include the UseArcGISToolkit()<\/code> and UseMauiCommunityToolkit()<\/code> statements in the host builder in MauiProgram.cs<\/code>.<\/p>\n
    var<\/span> builder = MauiApp.CreateBuilder();\r\nbuilder\r\n    .UseMauiApp<App>()\r\n    .ConfigureFonts(fonts =>\r\n    {\r\n        fonts.AddFont(\"OpenSans-Regular.ttf\"<\/span>, \"OpenSansRegular\"<\/span>);\r\n        fonts.AddFont(\"OpenSans-Semibold.ttf\"<\/span>, \"OpenSansSemibold\"<\/span>);\r\n    })\r\n    .UseArcGISRuntime(config => config\r\n       .UseApiKey(\"YOUR_API_KEY\"<\/span>)\r\n       .ConfigureAuthentication(auth => auth\r\n           .UseDefaultChallengeHandler())\r\n      )\r\n    .UseArcGISToolkit()\r\n    .UseMauiCommunityToolkit();\r\n<\/pre>\n<\/div>\n
    Let\u2019s review the components used in the workflow described in this blog post.<\/p>\n
    The ArcGIS Maps SDK for .NET Toolkit is an open-source library of controls and components that can be used to improve your ease of development with the .NET Maps SDK. The toolkit repo can be found on GitHub<\/a>.<\/p>\n
    The GeoViewController<\/code> in the toolkit provides a helper class which enables performing view operations such as layer identification and setting viewpoints on the MapView<\/code> from the view model.<\/p>\n
    .NET MAUI Community Toolkit (CommunityToolkit.Maui) |<\/strong> NuGet<\/a><\/p>\n
    EventToCommandBehavior<\/code> is used to invoke a command on the bound view model using an event. Using this behavior, the view model can react to tap events on the MapView<\/code>, change events on pickers, and loaded events on UI elements. This is used in this example application to handle tap events on clusters and features. Note that no toolkit is available to replicate this EventToCommandBehavior<\/code> on WPF and WinUI but other solutions are possible.<\/p>\n
    MVVM Toolkit (CommunityToolkit.Mvvm) |<\/strong> NuGet<\/a><\/p>\n
    This package simplifies the code in the view model by taking care of notify property changed boilerplate code through use of the provided ObservableObject<\/code> type and simplified command binding using [RelayCommand]<\/code>. Other MVVM libraries are available, and this is not a required package but I find it simplifies the code.<\/p>\n
    Setup dependency injection<\/h2>\n
    The MVVM example app I am sharing in this blog post will utilize a single view model instance shared across one page that occurs in a single instance and another page that opens to display data based on current view model state.<\/p>\n
    Add the following lines to MauiProgram.cs<\/code> to register the single view model and page instances.
    \n<\/p>\n
    \n
    builder.Services.AddSingleton<MainPage>();\r\nbuilder.Services.AddSingleton<MapViewModel>();\r\n<\/pre>\n<\/div>\n
    The MainPage.xaml.cs<\/code> constructor can then be updated as a dependency injection container will identify the dependency upon MapViewModel.cs<\/code> when the object is created and handle the injection of the service.
    \n<\/p>\n
    \n
    public<\/span> partial<\/span> class<\/span> MainPage<\/span> : ContentPage\r\n{\r\n    public<\/span> MainPage(MapViewModel mapViewModel)\r\n    {\r\n\tInitializeComponent();\r\n\r\n\tthis<\/span>.BindingContext = mapViewModel;\r\n    }\r\n}\r\n<\/pre>\n<\/div>\n
    Using dependency injection provides some benefits. It removes the need for a class to locate its dependencies. Furthermore, dependencies can be mocked to improve testability.<\/p>\n"},{"acf_fc_layout":"content","content":"
    Display data on a MapView<\/h2>\n
    Start by updating MapViewModel.cs<\/code> to be a partial class inheriting from ObservableObject<\/code> in the MVVM toolkit package. This gives access to [RelayCommand]<\/code> and [ObservableProperty]<\/code> attributes which are used to reduce code length and complexity. In this case you don’t need to directly implement INotifyPropertyChanged<\/code>.
    \n<\/p>\n
    \n
    public<\/span> partial<\/span> class<\/span> MapViewModel<\/span> : ObservableObject\r\n<\/pre>\n<\/div>\n
    Then, remove the existing property changed code and update the Map<\/code> property to use the [ObservableProperty]<\/code> attribute.<\/p>\n
    \n
    [ObservableProperty]\r\nprivate<\/span> Map? _map;\r\n<\/pre>\n<\/div>\n
    Display a feature service using a feature layer<\/h4>\n
    In the example app I use a feature service<\/a> to display places of worship in India. To do this, instantiate the Map<\/code> object in MapViewModel.cs<\/code> with a basemap then create a feature layer using the feature service URL and add it to the maps operational layers. For more information on displaying a feature service see the Feature layer (feature service)<\/a> sample.<\/p>\n
    Set up clustering data<\/h4>\n
    To ensure the data from the feature layer displays as clusters when the map loads, clone the UniqueValueRenderer<\/code> used by the feature layer to create a ClusteringFeatureReduction<\/code> object. Then create a SimpleLabelExpression<\/code> to display the total number of points in each cluster as a label. To see more in depth clustering content have a look at the Display clusters<\/a> and Configure clusters<\/a> samples<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2448832,"id":2448832,"title":"PlaceOfWorshipClusters","filename":"PlaceOfWorshipClusters-1.png","filesize":161790,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/PlaceOfWorshipClusters-1.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/sdk-net\/developers\/using-arcgis-maps-sdk-for-net-in-an-mvvm-pattern\/placeofworshipclusters-2","alt":"Picture of clustered data","author":"359632","description":"","caption":"Clustered place of worship data","name":"placeofworshipclusters-2","status":"inherit","uploaded_to":2446352,"date":"2024-07-31 12:28:03","modified":"2024-07-31 12:28:57","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1047,"height":553,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/PlaceOfWorshipClusters-1-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/PlaceOfWorshipClusters-1.png","medium-width":464,"medium-height":245,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/PlaceOfWorshipClusters-1.png","medium_large-width":768,"medium_large-height":406,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/PlaceOfWorshipClusters-1.png","large-width":1047,"large-height":553,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/PlaceOfWorshipClusters-1.png","1536x1536-width":1047,"1536x1536-height":553,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/PlaceOfWorshipClusters-1.png","2048x2048-width":1047,"2048x2048-height":553,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/PlaceOfWorshipClusters-1-826x436.png","card_image-width":826,"card_image-height":436,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/PlaceOfWorshipClusters-1.png","wide_image-width":1047,"wide_image-height":553}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"
    Add a GeoViewController to a MapView<\/h3>\n
    To make use of layer identification and setting viewpoints, add a GeoViewController<\/code> to the view-model and a GeoViewTappedCommand<\/code> to respond to tap events.
    \n<\/p>\n
    \n
    public<\/span> GeoViewController Controller { get<\/span>; } = new<\/span> GeoViewController();\r\n\r\n[RelayCommand]\r\npublic<\/span> async<\/span> Task GeoViewTapped(GeoViewInputEventArgs eventArgs) { }\r\n<\/pre>\n<\/div>\n
    Note that using the MVVM Toolkit commands with the attribute [RelayCommand]<\/code> are exposed with the word \u201cCommand\u201d appended to the end of the method signature. So, in this case the view will bind to GeoViewTappedCommand<\/code>.<\/p>\n
    Add the following namespaces to the view:<\/p>\n
    \n
    xmlns:mauitoolkit=\"http:\/\/schemas.microsoft.com\/dotnet\/2022\/maui\/toolkit\"<\/span>\r\nxmlns:toolkit=\"clr-namespace:Esri.ArcGISRuntime.Toolkit.Maui;assembly=Esri.ArcGISRuntime.Toolkit.Maui\"<\/span>\r\n<\/pre>\n<\/div>\n
    Update the MapView<\/code> to include the GeoViewController<\/code> and an EventToCommandBehavior<\/code> which allows commands to be invoked on the view model when a GeoViewTapped<\/code> event occurs.
    \n<\/p>\n
    \n
    <esri:MapView x:Name=\"MyMapView\"<\/span>\r\n              Grid.ColumnSpan=\"2\"<\/span>\r\n              toolkit:GeoViewController.GeoViewController=\"{Binding Controller}\"<\/span>\r\n              Map=\"{Binding Map}\"<\/span>>\r\n    <esri:MapView.Behaviors>\r\n        <mauitoolkit:EventToCommandBehavior x:TypeArguments=\"esri:GeoViewInputEventArgs\"<\/span>\r\n                                            Command=\"{Binding GeoViewTappedCommand}\"<\/span>\r\n                                            EventName=\"GeoViewTapped\"<\/span> \/>\r\n    <\/esri:MapView.Behaviors>\r\n<\/esri:MapView>\r\n<\/pre>\n<\/div>\n
    In this case, the Map<\/code> is bound to a Map<\/code> object on the view model, the GeoViewController<\/code> is bound to the GeoViewController<\/code> and the GeoViewTapped<\/code> event invokes the GeoViewTappedCommand<\/code>, passing GeoViewInputEventArgs<\/code> as a parameter.<\/p>\n
    Implement layer identification<\/h3>\n
    The GeoViewController<\/code> is set up to invoke a GeoViewTappedCommand<\/code> which means the view model can respond to tap events from the view.<\/p>\n
    The main concept to understand when performing layer identification from the view model is to use the GeoViewController<\/code>. Once you have a GeoViewController<\/code> configured to react to a GeoViewTapped<\/code> event you can update your code in MapViewModel<\/code> as follows.<\/p>\n
    \n
    [RelayCommand]\r\npublic<\/span> async<\/span> Task GeoViewTapped(GeoViewInputEventArgs eventArgs) => await<\/span> Identify(eventArgs.Position, eventArgs.Location);\r\n\r\npublic<\/span> async<\/span> Task Identify(Point location, MapPoint? mapLocation)\r\n{\r\n        \/\/ Identify the tapped observation.<\/span>\r\n        IdentifyLayerResult? results = await<\/span> Controller.IdentifyLayerAsync(_featureLayer, location, 10, false<\/span>);\r\n}<\/pre>\n<\/div>\n
     <\/p>\n"},{"acf_fc_layout":"content","content":"
    The following sections give an overview of the code used in the example app. To view the context of these code snippets, see the full code and try the app out yourself or clone the repo on GitHub<\/a>.<\/p>\n
    I’ve added an additional view model to wrap the GeoElement<\/code> objects. This keeps the GeoElement<\/code> data model separate from the view and allows for the data to be validated or formatted prior to presentation.<\/p>\n
    \n
    public<\/span> PlaceOfWorshipViewModel(int<\/span> index, ArcGISFeature feature)\r\n{\r\n    \/\/ Set the default property values.<\/span>\r\n    Name = Religion = Fid = \"null\"<\/span>;\r\n\r\n    \/\/ Set the display index and feature.<\/span>\r\n    ArcGISFeature = feature;\r\n    DisplayIndex = index;\r\n\r\n    \/\/ Get attribute values from the attributes dictionary. <\/span>\r\n    if<\/span> (feature.Attributes.TryGetValue(\"fid\"<\/span>, out<\/span> object?<\/span> fidValue) && fidValue != null<\/span> && fidValue is<\/span> long<\/span> fid) Fid = fid.ToString();\r\n    if<\/span> (feature.Attributes.TryGetValue(\"religion\"<\/span>, out<\/span> object?<\/span> religionValue) && religionValue != null<\/span>) Religion = (string<\/span>)religionValue;\r\n    if<\/span> (feature.Attributes.TryGetValue(\"name\"<\/span>, out<\/span> object?<\/span> nameValue) && nameValue != null<\/span>) Name = (string<\/span>)nameValue; \r\n\r\n    \/\/ Given the feature geometry get a formatted coordinate string.<\/span>\r\n    FormattedCoordinates = CoordinateFormatter.ToLatitudeLongitude((MapPoint)ArcGISFeature.Geometry!, LatitudeLongitudeFormat.DegreesDecimalMinutes, 2);\r\n}\r\n<\/pre>\n<\/div>\n
    I then create PlaceOfWorshipViewModel<\/code> objects by passing in an ArcGISFeature<\/code> and populating properties used in the view. None of the properties on this view model change once presented so they do not need to be observable. Each feature\u2019s geometry is formatted using the CoordinateFormatter<\/code> to present the information in a way that is easier to read in the view. The DisplayIndex<\/code> field is added to the view model to display the item index in the view and improve readability when scrolling through large numbers of items.<\/p>\n
    I have created another .NET MAUI view called GeoElementSelectionPage<\/code>, this is used to display the data contained in a tapped cluster.<\/p>\n
    A collection view on the GeoElementSelectionPage<\/code>\u00a0is used to display an ObservableCollection<\/code> of PlaceOfWorshipViewModel<\/code> objects in the MapViewModel<\/code>.<\/p>\n
    As clusters in this data set can contain thousands of GeoElement<\/code> objects, the number of items in the collection is incrementally increased as you scroll. This is achieved by adding a LoadMore()<\/code> method in the MapViewModel<\/code> which is called when the number of items in the collection hits a specified threshold.<\/p>\n
    The core concept is to use the GeoViewController<\/code> to perform identification in the view model – see the example app repo<\/a> for the full code that deals with the more complex workflow of identifying clustered data on a layer.<\/p>\n
    \n
    public<\/span> async<\/span> Task Identify(Point location, MapPoint? mapLocation)\r\n{<\/pre>\n
        \/\/ Identify the tapped observation.<\/span><\/pre>\n
        IdentifyLayerResult? results = await<\/span> Controller.IdentifyLayerAsync(_featureLayer, location, 10, false<\/span>); \r\n}<\/pre>\n<\/div>\n
     <\/p>\n
    Flesh out the view and view model<\/h4>\n
    Add more commands and properties with [RelayCommand]<\/code> and [ObservableProperty]<\/code> attributes to perform actions like navigating away from the GeoElementSelectionPage<\/code> and hold the displayed GeoElement<\/code> objects etc. Using properties in the PlaceOfWorshipViewModel<\/code> and commands in the MapViewModel<\/code> you can create a UI to display all of the elements within a tapped cluster and format their data for presentation.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2448842,"id":2448842,"title":"GeoElementsInCluster","filename":"GeoElementsInCluster.png","filesize":78433,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/GeoElementsInCluster.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/sdk-net\/developers\/using-arcgis-maps-sdk-for-net-in-an-mvvm-pattern\/geoelementsincluster","alt":"Picture of data contained within a cluster","author":"359632","description":"","caption":"GeoElements contained within a tapped cluster","name":"geoelementsincluster","status":"inherit","uploaded_to":2446352,"date":"2024-07-31 12:29:31","modified":"2024-07-31 12:30:12","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1047,"height":553,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/GeoElementsInCluster-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/GeoElementsInCluster.png","medium-width":464,"medium-height":245,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/GeoElementsInCluster.png","medium_large-width":768,"medium_large-height":406,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/GeoElementsInCluster.png","large-width":1047,"large-height":553,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/GeoElementsInCluster.png","1536x1536-width":1047,"1536x1536-height":553,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/GeoElementsInCluster.png","2048x2048-width":1047,"2048x2048-height":553,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/GeoElementsInCluster-826x436.png","card_image-width":826,"card_image-height":436,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/GeoElementsInCluster.png","wide_image-width":1047,"wide_image-height":553}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"
    Change viewpoint from the view model<\/h3>\n
    This section will outline how to update the viewpoint of the MapView<\/code> from the MapViewModel<\/code>.<\/p>\n
    First lets update the viewpoint when a picker selection change event occurs.<\/p>\n
    Add a picker to MainPage<\/code> update the current viewpoint of the MapView<\/code>.<\/p>\n
    \n
    <Picker x:Name=\"RegionPicker\"<\/span>\r\n        Title=\"Scope to region\"<\/span>\r\n        SelectedItem=\"{Binding SelectedRegion}\"<\/span>>\r\n    <Picker.Behaviors>\r\n        <mauitoolkit:EventToCommandBehavior Command=\"{Binding SelectedRegionChangedCommand}\"<\/span>\r\n                                            CommandParameter=\"{Binding Source={x:Reference RegionPicker}, Path=SelectedIndex}\"<\/span>\r\n                                            EventName=\"SelectedIndexChanged\"<\/span> \/>\r\n    <\/Picker.Behaviors>\r\n    <Picker.Items>\r\n        <x:String>North<\/x:String>\r\n        <x:String>South<\/x:String>\r\n        <x:String>East<\/x:String>\r\n        <x:String>West<\/x:String>\r\n        <x:String>Central<\/x:String>\r\n    <\/Picker.Items>\r\n<\/Picker><\/pre>\n<\/div>\n
     <\/p>\n
    Again, use the EventToCommandBehavior<\/code> to invoke a command on the view model when the picker\u2019s selection changes.<\/p>\n
    In MapViewModel<\/code>, implement a command to respond to the index changed event.<\/p>\n
    \n
    [RelayCommand]\r\npublic<\/span> async<\/span> Task SelectedRegionChanged(int<\/span> selectedIndex)\r\n{\r\n    \/\/ Get the full extent of the feature layer.<\/span>\r\n    Viewpoint viewpoint = new<\/span> Viewpoint(_featureLayer!.FullExtent!);\r\n\r\n    \/\/ Get the spatial reference of the feature layer.<\/span>\r\n    SpatialReference spatialReference = SpatialReference.Create(3857);\r\n\r\n    double<\/span> scale = 10.5e6;\r\n\r\n    switch<\/span> (selectedIndex)\r\n    {\r\n        case<\/span> 0:\r\n            viewpoint = new<\/span> Viewpoint(new<\/span> MapPoint(8597888, 3622342, spatialReference), scale);\r\n            break<\/span>;\r\n        case<\/span> 1:\r\n            viewpoint = new<\/span> Viewpoint(new<\/span> MapPoint(8617655, 1603703, spatialReference), scale);\r\n            break<\/span>;\r\n        case<\/span> 2:\r\n            viewpoint = new<\/span> Viewpoint(new<\/span> MapPoint(9947837, 2859542, spatialReference), scale);\r\n            break<\/span>;\r\n        case<\/span> 3:\r\n            viewpoint = new<\/span> Viewpoint(new<\/span> MapPoint(7966035, 2803998, spatialReference), scale);\r\n            break<\/span>;\r\n        default<\/span>:\r\n            break<\/span>;\r\n    }\r\n\r\n    \/\/ Set the viewpoint based on the desired selection.<\/span>\r\n    await<\/span> Controller.SetViewpointAsync(viewpoint);\r\n\r\n    \/\/ Reset the selected region for the next navigation.<\/span>\r\n    SelectedRegion = null<\/span>;\r\n}<\/pre>\n<\/div>\n
     <\/p>\n
    Use the GeoViewController<\/code> to update the viewpoint with SetViewpointAsync()<\/code>, this will update the view from the view model.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2448852,"id":2448852,"title":"PickerViewpointChange","filename":"PickerViewpointChange.png","filesize":159038,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/PickerViewpointChange.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/sdk-net\/developers\/using-arcgis-maps-sdk-for-net-in-an-mvvm-pattern\/pickerviewpointchange","alt":"Picture of picker to change viewpoint","author":"359632","description":"","caption":"Change viewpoint with picker","name":"pickerviewpointchange","status":"inherit","uploaded_to":2446352,"date":"2024-07-31 12:30:34","modified":"2024-07-31 12:30:58","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1047,"height":553,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/PickerViewpointChange-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/PickerViewpointChange.png","medium-width":464,"medium-height":245,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/PickerViewpointChange.png","medium_large-width":768,"medium_large-height":406,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/PickerViewpointChange.png","large-width":1047,"large-height":553,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/PickerViewpointChange.png","1536x1536-width":1047,"1536x1536-height":553,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/PickerViewpointChange.png","2048x2048-width":1047,"2048x2048-height":553,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/PickerViewpointChange-826x436.png","card_image-width":826,"card_image-height":436,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/PickerViewpointChange.png","wide_image-width":1047,"wide_image-height":553}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"
    Now, lets respond to a changed selection in a collection view. We will update the viewpoint and show a callout using the GeoViewController<\/code>.<\/p>\n
    In the GeoElementSelectionPage<\/code> the GeoElementCollectionView.SelectionChangedCommand<\/code> can be bound to the MapViewModel<\/code>.<\/p>\n
    Add a new SelectedGeoElementChanged()<\/code> method with the [RelayCommand]<\/code> attribute. This will take the selected item as a parameter to be used to update the viewpoint.<\/p>\n
    \n
    [RelayCommand]\r\npublic<\/span> async<\/span> Task SelectedGeoElementChanged(PlaceOfWorshipViewModel selectedItem)\r\n{\r\n    if<\/span> (selectedItem == null<\/span>) return<\/span>;\r\n    \r\n    \/\/ Clear any currently selected features.<\/span>\r\n    _featureLayer?.ClearSelection();\r\n\r\n    \/\/ Get the map point for the selected view model.<\/span>\r\n    MapPoint mapPoint = (MapPoint)selectedItem.ArcGISFeature.Geometry!;\r\n\r\n    \/\/ Close the modal page.<\/span>\r\n    await<\/span> Shell.Current.GoToAsync(\"..\"<\/span>);\r\n\r\n    \/\/ Select the feature associated with the selected view model.<\/span>\r\n    _featureLayer?.SelectFeature(selectedItem.ArcGISFeature);\r\n\r\n    \/\/ Navigate to the selected feature and show a callout.<\/span>\r\n    \/\/ Scale is set to a value smaller than the layers feature reduction max scale so that clusters do not render when the navigation completes.<\/span>\r\n    await<\/span> Controller.SetViewpointAsync(new<\/span> Viewpoint(mapPoint, 1e4), TimeSpan.FromSeconds(1));\r\n\r\n    \/\/ Use an arcade expression to fallback to a default value if the properties used in the callout are null.<\/span>\r\n    var<\/span> calloutDefn = new<\/span> Esri.ArcGISRuntime.UI.CalloutDefinition(selectedItem.ArcGISFeature, \"DefaultValue($feature.name, 'null')\"<\/span>, \"DefaultValue($feature.religion, 'null')\"<\/span>);\r\n    Controller.ShowCalloutForGeoElement(selectedItem.ArcGISFeature, default<\/span>, calloutDefn);\r\n}\r\n<\/pre>\n<\/div>\n
     <\/p>\n
    When a GeoElement<\/code> is selected in the CollectionView<\/code> the GeoElementSelectionPage<\/code> closes and any selected items on the feature layer are cleared. The GeoElement<\/code> is then selected on the feature layer and the viewpoint is updated to center on its geometry. A callout is displayed for the GeoElement<\/code> to display its name using GeoViewController.ShowCalloutForGeoElement()<\/code>.<\/p>\n
    The point to highlight here is the use of the GeoViewController.SetViewpointAsync()<\/code> as this is the key to performing viewpoint change operations on the view from the view model.<\/p>\n"},{"acf_fc_layout":"content","content":"
    Finishing up<\/h2>\n
    In the completed code<\/a> in the example app I have included a toggle to enable and disable clustering and a legend<\/a> to display the predominant religion in each cluster. These have been added following the processes outlined earlier in this blog post.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2448862,"id":2448862,"title":"FullApplicationDemonstration","filename":"FullApplicationDemonstration.gif","filesize":1576142,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/FullApplicationDemonstration.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/sdk-net\/developers\/using-arcgis-maps-sdk-for-net-in-an-mvvm-pattern\/fullapplicationdemonstration","alt":"GIF of full application features","author":"359632","description":"","caption":"Completed application full feature demonstration","name":"fullapplicationdemonstration","status":"inherit","uploaded_to":2446352,"date":"2024-07-31 12:33:32","modified":"2024-07-31 12:34:13","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1046,"height":554,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/FullApplicationDemonstration-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/FullApplicationDemonstration.gif","medium-width":464,"medium-height":246,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/FullApplicationDemonstration.gif","medium_large-width":768,"medium_large-height":407,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/FullApplicationDemonstration.gif","large-width":1046,"large-height":554,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/FullApplicationDemonstration.gif","1536x1536-width":1046,"1536x1536-height":554,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/FullApplicationDemonstration.gif","2048x2048-width":1046,"2048x2048-height":554,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/FullApplicationDemonstration-826x437.gif","card_image-width":826,"card_image-height":437,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/FullApplicationDemonstration.gif","wide_image-width":1046,"wide_image-height":554}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"
    <\/a>Summary<\/h2>\n
    Model-View-View-Model (MVVM) is widely used pattern in .NET applications. In this blog post I\u2019ve demonstrated how to get started with a simple MVVM application<\/a> using a mixture of helpful external packages.<\/p>\n
    As an example, I\u2019ve shown how to bind a Map<\/code> object in view model to a MapView<\/code> in a view. I gave an overview of the usage of the GeoViewController<\/code> and walked through implementing identification functionality in the view-model to respond to tap events in the view. I discussed how to configure the view model to update the MapView<\/code> viewpoint and display callouts using the ArcGIS Maps SDK for .NET Toolkit GeoViewController<\/code>.<\/p>\n
    Let us know how you’re getting on with your MVVM apps in the Esri Community forums<\/a>, and if you haven’t already, check out our developer documentation for more tips and guides on how to use the ArcGIS Maps SDK for .NET<\/a>.<\/p>\n
    Useful resources<\/h3>\n
    The ArcGIS Maps SDK for .NET samples applications<\/a> showcase capabilities and functionality offered by ArcGIS Maps SDKs for Native Apps via simple workflows. These focused samples enable you to easily understand the concepts and allow you to copy code snippets directly into your application. To maintain that simplicity, the applications implement sample logic in the code-behind for each sample. This also makes it easier to copy the sample code into another application without additional steps. This blog post can be used in conjunction with the .NET samples applications to implement the broad range of functionality offered by the ArcGIS Maps SDK for .NET.<\/p>\n
    ArcGIS Maps SDK for .NET Toolkit (Esri.ArcGISRuntime.Toolkit.Maui) |<\/strong> NuGet<\/a><\/p>\n