Toolbar sample using MVVM design pattern

BrianPangtay — Wed, 15 Sep 2010 12:35:27 GMT

Has anyone refactored the Toolbar sample using MVVM design pattern?

Could someone please upload code demonstrating how to implement MVVM?

Thanks.

Re: Toolbar sample using MVVM design pattern

KevinSchumm — Mon, 18 Oct 2010 16:56:59 GMT

I'd love to see any example using ESRI's Silverlight SDK using the MVVM pattern. I haven't been able to figure it out or dig anything up.

I'd love to see a reply to this thread.

Re: Toolbar sample using MVVM design pattern

JakubGutkowski — Sat, 11 Dec 2021 15:17:03 GMT

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;
        }
    }

topic Re: Toolbar sample using MVVM design pattern in ArcGIS API for Silverlight Questions

Toolbar sample using MVVM design pattern

Re: Toolbar sample using MVVM design pattern

Re: Toolbar sample using MVVM design pattern