Toolbar sample using MVVM design pattern

BrianPangtay

Has anyone refactored the Toolbar sample using MVVM design pattern?

Could someone please upload code demonstrating how to implement MVVM?

Thanks.

JakubGutkowski

i.e. buttons are placed inside map template:

<!-- Base Map Style -->
        <Style x:Key="BaseMapStyle" TargetType="esri:Map">
            <Setter Property="IsLogoVisible" Value="False" />
            <Setter Property="Background" Value="{x:Null}" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Grid Background="{TemplateBinding Background}">
                            <Grid x:Name="RootElement" Width="Auto" Height="Auto" />
                            <Rectangle x:Name="ZoomBox" Fill="#55FFFFFF" Stroke="Black" StrokeThickness="2" Visibility="Collapsed" />

                            <!-- Top Toolbox -->
                            <v:MapToolBoxView />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

MapToolBoxView looks like that:

<UserControl x:Class="Xyz.Zyx.Shell.Views.MapToolBoxView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" 
             xmlns:cmd="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.SL4" 
             mc:Ignorable="d"
             d:DesignHeight="300" d:DesignWidth="400"
             x:Name="MapToolBoxControl">
    <UserControl.DataContext>
        <Binding Mode="OneWay" Path="MapToolBox" Source="{StaticResource Locator}"/>
    </UserControl.DataContext>
    <StackPanel Orientation="Vertical" HorizontalAlignment="Right" VerticalAlignment="Top">
        <Button x:Name="SelectionQuery" Content="Info">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">

                    <cmd:EventToCommand Command="{Binding Path=SelectionInfoCommand, Mode=OneWay}"
                                        CommandParameter="{Binding ElementName=MapToolBoxControl}" />

                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>
        
    </StackPanel>
</UserControl>

and ViewModel looks for instance like that:

[Export]
    public class MapToolBoxViewModel : BaseViewModel<MapToolBoxViewModel>
    {
        private readonly IIdentifyService _identifyService;

        [ImportingConstructor]
        public MapToolBoxViewModel(IIdentifyService identifyService)
        {
            _identifyService = identifyService;
            SelectionInfoCommand = new RelayCommand<UIElement>(SetSelectionInfo);
        }

        private Draw _selectionDraw;
        public Draw SelectionDraw
        {
            get { return _selectionDraw; }
            set
            {
                if(_selectionDraw == value) return;
                _selectionDraw = value;
                InvokeProeprtyChanged(() => SelectionDraw);
            }
        }

        public RelayCommand<UIElement> SelectionInfoCommand { get; private set; }

        private void SetSelectionInfo(UIElement control)
        {
            ClearDrawings();

            var map = VizTreeHelper.FindParent<Map>(control);
            if(map == null)
            {
                return;
            }

            SelectionDraw = new Draw(map);
            SelectionDraw.DrawComplete += SelectionDrawComplete;
            
            SelectionDraw.DrawMode = DrawMode.Rectangle;
            SelectionDraw.IsEnabled = true;
            SelectionDraw.Map.Cursor = Cursors.Stylus;
        }

        private void SelectionDrawComplete(object sender, DrawEventArgs e)
        {
            var envelope = e.Geometry as Envelope;
            if(envelope == null)
                return;

            var selectionEnvelopeDto = new EnvelopeDto
                                        {
                                            YMin = envelope.YMin,
                                            YMax = envelope.YMax,
                                            XMin = envelope.XMin,
                                            XMax = envelope.XMax
                                        };

            Messenger.Default.Send(new SearchableMapLayersRequestMessage(selectionEnvelopeDto, "request",
                message =>
                {
                    _identifyService.BeginIdentifyFeaturesInSelection(message.SearchableLayers,
                        message.RequestParams.ToEnvelope(),
                        SelectionDraw.Map.Extent,
                        SelectionDraw.Map.ActualWidth,
                        SelectionDraw.Map.ActualHeight,
                        HandleError);

                    ClearDrawings();

                }));
        }

        private void IdentifyFeatureFaild(Exception exception)
        {
            NotifyMessage("Error occurred, try again", NotificationType.Exception, exception, true);
        }

        private void ClearDrawings()
        {
            if(SelectionDraw == null) return;

                SelectionDraw.IsEnabled = false;
                SelectionDraw.Map.Cursor = Cursors.Arrow;
                SelectionDraw.DrawComplete -= SelectionDrawComplete;
                SelectionDraw = null;
        }
    }