nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

MVVM - View and ViewModel Problems

CorySchinkel

Hi all,

I am using the MVVM pattern and the WPF API to build a mapping app. I have a map object defined in a View and my app logic is defined in a ViewModel. The ViewModel is set as the datacontext of the View. Everything works great until I try to do something like work with the draw object in the ViewModel. The draw constructor requires a reference to the map which I cannot access in the ViewModel. This of course prevents me from defining the draw object in the ViewModel which is needed to respond to events on the draw object. I could define the draw object in the View but it goes against the MVVM pattern to reference the View from the ViewModel. So the dilemma is that I have no way of getting a reference to the map or draw object in the ViewModel and thus no way to handle events raised by those objects and no way to access their properties.

If I were to define the draw object in my view I could setup commanding to handle some of the logic in the ViewModel, but I have requirements that would be difficult to implement with that design. I would prefer to have the draw object (and other esri related objects) defined in the ViewModel and bound to the View somehow, but finding a good way to accomplish that is elusive.

Since I am using MVVM (fairly strictly) I do not want any (or very limited) amounts of code in the view code-behind.

Can someone offer guidance on best practices for handling this type of scenario? Is there a way to make this work?

Thanks,
Cory

Najděte více příspěvků označených jako

Runtime SDK for WPF

Accepted answers

All comments

BrianLocke

MVVM Light!~

AnttiKajanus1

As atomaras said, that solution works quite well in most of the scenarios. Just check that UIVirtualization is support is ok for your needs.

Simplest solution is to create codebehind event handler and then direct selection to viewmodel from there. Yes, it's code in the codebehind but in this kind of scenarios it is ok. I use this solution if I'm lazy and want fast results.

One solution is to create attached property that encapsulates that but that needs a bit more testing. This was found with fast googling
http://blog.functionalfun.net/2009/02/how-to-databind-to-selecteditems.html

(side note, if you guys are coming to DevSummit to Palm Springs this year, I would love to have a chat about MVVM and how you do it).

AnargyrosTomaras

Hi Federer,

You can introduce a boolean IsSelected property in your List ViewModels and Two-Way bind them to the IsSelected DP property of the generated ListBoxItem's.

Here's the XAML part :

<ListBox ItemsSource="{Binding ItemVMs}">
  <ListBox.ItemContainerStyle>
    <Style TargetType="{x:Type ListBoxItem}">
      <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}" />
    </Style>
  </ListBox.ItemContainerStyle>
</ListBox>

Hope this helps.

RogerF

Keith,

If you want to wire up a method on your ViewModel to some arbitrary event, then you need to use something like the InvokeCommandAction which is defined in System.Windows.Interactivity. Then you can generate a command using the CommandGenerator and you're set.

In the case you describe though, you don't really need to use an event to determine if the ComboBox selection changes. You can simply bind to another property in your ViewModel instead.

For example, your view ComboBox might be defined like this:
  <ComboBox ItemsSource="{Binding States}"
            SelectedItem="{Binding CurrentState}"
            Height="25" 
            Width="120"/>
By binding to the SelectedItem property, the setter on you ViewModel property (CurrentState) will get called any time the selection changes.

Hope that helps,
Jeff

Jeff

your MVVM session has been a great starting point for me. I have been working on similar functionality where Listbox needs be multi-selectable. Upon research, I figured that 'SelectedItems' property is not 'bindable' with view. Is there any MVVM way of doing this ?.I need to zoom to the results selected in Listbox. Your quick response will be greatly appreciated.

Thanks

AnargyrosTomaras

Hi,
I have been following this post since a long time and saw the examples above. It is really great work.
However from what I perceive of MVVM, my viewmodel should actually be totally unaware of the view. While when I try to implement the same in ESRI's SDK for WPF, it makes me use instance of Map in the ViewModel.

Has someone found a way to create a viewmodel that does not include a reference to ESRI? This somehow is the first requirement for the application I am developing.

You can always delegate more work (through indirections) to the View.

listen for custom VM events/propertychanges in the View that tells it , indirectly, what to do with the Map.
similarly but with the use of attached properties like here where a property change event

Another solution might be to make you own custom wrapper control (MapControl) that this time IS bindable.
Another solution is to embrace the fact that not everything can and will be bindable and use a hybrid approach which
Now, if all these seem to be too much work then...

Hope this helps

Cheers 🙂

AnkitaBhatia

Hi,
I have been following this post since a long time and saw the examples above. It is really great work.
However from what I perceive of MVVM, my viewmodel should actually be totally unaware of the view. While when I try to implement the same in ESRI's SDK for WPF, it makes me use instance of Map in the ViewModel.

Has someone found a way to create a viewmodel that does not include a reference to ESRI? This somehow is the first requirement for the application I am developing.

I am not aware that using PointDataSource is the preferred way to go with MVVM since. From the experience that I have got with working mainly with Silverlight, is that you can work with Graphic's in the ViewModels with no problem and there is no need to build a lot of extra-work-a-rounds since you can bind the graphics directly. I would be interested if other peoples have different view to this topic.

You can use quite a lot of different approaches here but I have been using GraphicCollection or ObservableCollection<Graphic> that I bind directly in XAML to graphics layer. You can look how you can do that from here http://forums.arcgis.com/threads/63189-GpsLayer-and-MVVM-issues?p=220140&viewfull=1#post220140 With this kind of approach you can easily use other stuff like Task's in very mannered way from the ViewModels (or from the application services since you probably won't want to bloat your VM's code with all that stuff).

Also one good way to abstract association code with the Graphics is to create custom list like in the "Using GraphicsSource Online"-example in the Samples.

Hope this helps.

Edit:
Jeff Jackson kept very good tutorial to MVVM development in Developer summit. I encourage people to check it out http://video.arcgis.com/watch/1185/software-development-and-design-using-mvvm

Hi Antti, and thanks for your reply! I was probably wrong when saying that PointDataSource was the preferred way to go with mvvm in the API. I got this impression when I read the following description on the api web site:

The PointDataSource class provides the implementation necessary to easily bind to items with attributes that reference location using X and Y values. This functionality caters to the use of Model View ViewModel (MVVM) design patterns. In general, the view (user interface [UI]) can bind to data (model) via a view-model, implemented in code-behind.

Anyway, I will go for using a graphiccollection instead, this seems to be a much better approach 🙂 Thanks again for your help!

AnttiKajanus1

I am not aware that using PointDataSource is the preferred way to go with MVVM since. From the experience that I have got with working mainly with Silverlight, is that you can work with Graphic's in the ViewModels with no problem and there is no need to build a lot of extra-work-a-rounds since you can bind the graphics directly. I would be interested if other peoples have different view to this topic.

You can use quite a lot of different approaches here but I have been using GraphicCollection or ObservableCollection<Graphic> that I bind directly in XAML to graphics layer. You can look how you can do that from here http://forums.arcgis.com/threads/63189-GpsLayer-and-MVVM-issues?p=220140&viewfull=1#post220140 With this kind of approach you can easily use other stuff like Task's in very mannered way from the ViewModels (or from the application services since you probably won't want to bloat your VM's code with all that stuff).

Also one good way to abstract association code with the Graphics is to create custom list like in the "Using GraphicsSource Online"-example in the Samples.

Hope this helps.

Edit:
Jeff Jackson kept very good tutorial to MVVM development in Developer summit. I encourage people to check it out http://video.arcgis.com/watch/1185/software-development-and-design-using-mvvm

Hi,

In a project I'm working on we make use of pointdatasource for adding objects to a graphicslayer. However, when using pointdatasource, the resulting graphics will not contain any attribute information, making it impossible (as far as I can see) to show infowindows containing information about the objects, and also to use uniquevaluerenderer to determine which icon each graphics should have.

Is there any workaround for this issue (i.e. is it somehow possible to add attributes to graphics when using pointdatasource)?

Pointdatasource seems to be the preferred way of implementing an mvvm structure using the api.

Any help is greatly appreciated 🙂

Cheers

AnttiKajanus1

Just noting that if you are working with .Net Framework 4.5, you can use MarkupExtensions with Events so you can use similar approach (CommandGenerator) with Events there. In my opinion, its about the time!

You can read more from http://blogs.microsoft.co.il/blogs/pavely/archive/2012/04/07/wpf-4-5-markup-extension-for-events.aspx

EladNachmias

MVVM should be implemented in a manner that the ViewModel is unaware of the View (if you're working ViewModel first, which is, to my opinion - the best way of working since it avoids spaghetti code which i've seen on several projects).
that way you don't need to handle DataContext on xaml level which is a huge advantge since the WPF engine sometimes has some Visual tree quirks that might cause problems when looking for DataContext from the visual tree.
From my experience (after doing many projects with Prism, Caliburn.Micro(best solution)), When you try to do something that you dont have access to (manipulating view from viewmodel), that means you've reached the logical limit of your design pattern.
So don't break the design pattern.
Best practice is these cases is to build your own control (or some wrapper control), create some dependency properties on it, bind to the data source on the view model, and handle changes in the data through that control, not in the VM.
best of luck.

JeffJackson

Keith,

If you want to wire up a method on your ViewModel to some arbitrary event, then you need to use something like the InvokeCommandAction which is defined in System.Windows.Interactivity. Then you can generate a command using the CommandGenerator and you're set.

In the case you describe though, you don't really need to use an event to determine if the ComboBox selection changes. You can simply bind to another property in your ViewModel instead.

For example, your view ComboBox might be defined like this:

  <ComboBox ItemsSource="{Binding States}"
            SelectedItem="{Binding CurrentState}"
            Height="25" 
            Width="120"/>

By binding to the SelectedItem property, the setter on you ViewModel property (CurrentState) will get called any time the selection changes.

Hope that helps,
Jeff

KeithWeber1

Jeff,

I am new to the MVVM pattern and I am trying to learn how to use your MvvmFramework to setup methods to handle events in a ViewModel using your CommandGenerator. In your previous post, it appears that you are using a library from Expression Studios (System.Windows.Interactivity). Is it possible to use the CommandGenerator to setup a method to handle an event for something like the SelectionChanged event of a combobox without using the Expression Studios library? Any help is greatly appreciated.

JeffJackson

I�??ve given the question of how to use the Draw object in an MVVM-friendly way some thought and tried a few different things. Here�??s my take on the cleanest solution (attached), though it�??s certainly got some blemishes�?�

I agree with Cory�??s basic principle �?? that the Draw object makes sense as part of the ViewModel. So I declare it there and it�??s easy enough to create and use. The only question is how to get the Map set into it. For that I rely on an EventTrigger defined on the View�??s root Grid. An InvokeCommandAction lets me call a method on the ViewModel and pass in the map.

      <i:Interaction.Triggers>
        <i:EventTrigger EventName="Loaded">
          <i:InvokeCommandAction Command="{Binding ConverterParameter=SetMap, Converter={framework:CommandGenerator} }"
                                 CommandParameter="{Binding ElementName=MyMap}" />

        </i:EventTrigger>
      </i:Interaction.Triggers>

Then the SetMap method simply connects the map to the Draw object.

The thing to watch out for when you �??cheat�?? like this is to make sure that the various methods on the ViewModel are still testable.

/Jeff

WpfApplication27.zip

JeffJackson

I was hoping to write a series of blog posts on blogs.esri.com but the new site doesn�??t do a good job formatting source code so I�??ve been waiting for some improvements before investing a lot of time on it. In the meantime, here�??s a sample MVVM application (attached) that shows how you can work around the fact that the Map control does not expose a dependency property for its Extent.

The app shows a map of the US and lets you enter text and search for states. The results are displayed on the map and listed beside it. Clicking on a state in the list will zoom the map to its extent.

This is made possible by an attached property defined in the static class MapHelpers and it specified in the View like this:

<esri:Map local:MapHelpers.Extent="{Binding MapExtent}">

The attached property is straight forward. The only logic is in OnExtentPropertyChanged where the DependencyObject is cast to a Map so that ZoomTo can be called, passing in the NewValue. This implementation is very straight forward in that it only allows for one way binding �?? from the VM to the Map.( In some cases you might want a two-way binding such that when the end user zooms or pans the current extent of the map is propagated back to the VM. That is also possible by wiring into the Map�??s ExtentChanged property.)

// note that I tried very hard to paste the code in question here
// so you could see what i was talking about
// but this lame resource center forum wouldn't allow it. Sheesh...

Note that I didn�??t use the Map�??s Extent property to do the zooming. The ZoomTo method provides a nicer implementation, using a smooth animation when you zoom in or out.

Let me know if this was helpful at all. Next I�??ll look into the elusive Draw object�?�

/Jeff

WpfApplication26.zip

JaredWhite

We ran into the same problems building ArcGIS Explorer Online with the ArcGIS Silverlight API, and most recently with the ArcGIS Viewer for Windows and the WPF API.

I'm at the DevSummit this week (and actually doing a session on MVVM) so if you're around I'd love to talk with you about it. When I have some spare cycles I'll put together some thoughts on how we've approached MVVM and the Map control and post it back to this thread.

-Jeff

Hi Jeff,
I just finished the video on esri's site of your seminar session. Did you ever get around to sparing a few cycles on MVVM and map control?

AvnerKashtan

We ran into the same problems building ArcGIS Explorer Online with the ArcGIS Silverlight API, and most recently with the ArcGIS Viewer for Windows and the WPF API.

I'm at the DevSummit this week (and actually doing a session on MVVM) so if you're around I'd love to talk with you about it. When I have some spare cycles I'll put together some thoughts on how we've approached MVVM and the Map control and post it back to this thread.

-Jeff

That would be wonderful. I've been going through the same problems that others here have trying to force the WPF API into the MVVM mindset, and I have to admit that my solution was to be more flexible with my MVVMness - my MapView class has rather a lot of logic in it, unfortunately, with all of the map-specific functionality (selection, zoom/pan, etc) handled in the View, while the MapViewModel mostly handles bringing in the Layers and interacting with other parts of the system. It's not ideal, but it works. I'd love to hear a good write-up of the ups and downs of MVVM with the ArcGIS APIs.

JeffJackson

We ran into the same problems building ArcGIS Explorer Online with the ArcGIS Silverlight API, and most recently with the ArcGIS Viewer for Windows and the WPF API.

I'm at the DevSummit this week (and actually doing a session on MVVM) so if you're around I'd love to talk with you about it. When I have some spare cycles I'll put together some thoughts on how we've approached MVVM and the Map control and post it back to this thread.

-Jeff

AlexAgranov

I'm having a similar issue. My application is also strict MVVM. If I declare my <esri:Map> in a DataTemplate, that is part of the UI and not DataContext(view-model). So in the ViewModel side, I have no access to the esri:Map for doing things like setting off a saved extent. It seems that despite the updates to GraphicsLayer, the esri:Map is not MVVM friendly.

Připojte se k diskusi

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.

Rychlé odkazy

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.