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 and the Bing Maps Sample

BrianGustafson

I am trying to convert the Bing maps sample where you can toggle between the background types to MVVM for practice. I am stuck on how to get the tag off of the radio buttons so that I can toggle and how to bind the layer style property on the bing layer to the LayerType in the ViewModel. Can this be done using MVVM?

Vind meer berichten getagd met

Accepted answers

All comments

JenniferNery

I don't know if we have any write up on this but you can use the API reference page to determine which properties of the map and/or layers are bindable: http://resourcesbeta.arcgis.com/en/help/silverlight-api/apiref/api_start.htm?ESRI.ArcGIS.Client~ESRI.ArcGIS.Client.Map_members.html. It would have information whether it is a DependencyProperty, read-only property, etc.

BrianGustafson

I got it working now, thanks for your help. Is there any documentation on using the map control with MVVM? I am working towards adding some feature layers to my map and then bringing up InfoWindows when clicked.

JenniferNery

Bing.TileLayer.LayerType is a DependencyProperty. I was able to test that it responds to binding using the following code:

 xmlns:bing="clr-namespace:ESRI.ArcGIS.Client.Bing;assembly=ESRI.ArcGIS.Client.Bing"
    xmlns:esri="http://schemas.esri.com/arcgis/client/2009">
    
    <Grid x:Name="LayoutRoot" Background="White">
  <esri:Map x:Name="MyMap">
   <bing:TileLayer 
    ID="BingLayer" LayerStyle="Aerial"
    ServerType="Production"       
    Token="{StaticResource BingKey}"/>     
  </esri:Map>
  <ComboBox x:Name="BingLayerStyle"
      SelectionChanged="BingLayerStyle_SelectionChanged"      
      SelectedItem="{Binding ElementName=MyMap, Path=Layers[BingLayer].LayerStyle, Mode=TwoWay}"
      VerticalAlignment="Top" HorizontalAlignment="Center"/>
 </Grid>

BingLayerStyle.ItemsSource = new ESRI.ArcGIS.Client.Bing.TileLayer.LayerType[]{ 
       ESRI.ArcGIS.Client.Bing.TileLayer.LayerType.Aerial,
       ESRI.ArcGIS.Client.Bing.TileLayer.LayerType.AerialWithLabels,
       ESRI.ArcGIS.Client.Bing.TileLayer.LayerType.Road};
   BingLayerStyle.SelectedIndex = 1;

BrianGustafson

Now the background is set when I initially load the application to the property set in the ViewModel but when I change the background using the radio button nothing changes. I can see that the command is running and setting the value but it is like the layer is not updataing or refreshing.

LayerStyle="{Binding NewLayerType, Source={StaticResource ViewModel}, Mode=TwoWay}"

public class MainPageViewModel : ViewModelBase
 {
  private TileLayer.LayerType _newLayerType;
  public RelayCommand UpdateBackgroundCommand { get; private set; } 
    
  public MainPageViewModel()
  {
   _newLayerType = TileLayer.LayerType.AerialWithLabels;
   WireCommands();
  }
  
  private void WireCommands()
        {
            UpdateBackgroundCommand = new RelayCommand(UpdateBackground);
   UpdateBackgroundCommand.IsEnabled = true;
        }
  
  #region Properties
        public TileLayer.LayerType NewLayerType
        {
            get
            {
                return _newLayerType;
            }

            set
            {
                if (_newLayerType != value)
                {
                    _newLayerType = value;
                    OnPropertyChanged("NewLayerType");
                }
            }
        }
        #endregion
  
  public void UpdateBackground(object param)
        {
   switch(param.ToString())
   {
    case "Road":
     _newLayerType = TileLayer.LayerType.Road;
     MessageBox.Show(_newLayerType.ToString());
     break;
    case "Aerial":
     _newLayerType = TileLayer.LayerType.Aerial;
     MessageBox.Show(_newLayerType.ToString());
     break;
    case "AerialWithLabels":
     _newLayerType = TileLayer.LayerType.AerialWithLabels;
     MessageBox.Show(_newLayerType.ToString());
     break;
   }
        }
 }

public class ViewModelBase : INotifyPropertyChanged
 {
  public bool IsDesignTime
        {
            get { return DesignerProperties.IsInDesignTool; }
        }

        #region INotifyPropertyChanged Members

        public event PropertyChangedEventHandler PropertyChanged;

        protected virtual void OnPropertyChanged(string propName)
        {
            var propChanged = PropertyChanged;
            if (propChanged != null)
            {
                propChanged(this, new PropertyChangedEventArgs(propName));
            }
        }

        #endregion
 }

SomeGISGuy

While the property is bindable, it is only FrameworkElement objects that have a datacontext. You can therefore only bind to static resources.
So usually you would grab the view model that you declared in the resources: LayerType="{Binding NewLayerType Source={StaticResource MyViewModel}}"

BrianGustafson

That got me part of the way. Is the LayerStyle property on the bing tile layer bindable? I have a property of TileLayer.LayerType but the binding does not seem to be working.

<bing:TileLayer ID="BingLayer" LayerStyle="{Binding NewLayerType}"

HyrumErnstrom

Are you using the Command Parameter on the RadioButton. You can also pass data to the ICommand through the CommandParameter Property of the RadioButton.

So you would have your ViewModel as either the DataContext or in a StaticResource that you can bind to, Then you would have a ICommand Property in the ViewModel that you would use in the Command Parameter through Command="{Binding Path=Command ...}". Then in your your CommandParmeters you can use a Binding or just set the value like CommandParameter="Street" or CommandParameter="{Binding Path=Street}". This is just the concept and not example code.

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

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