Designtime data in MVVM user control using map

2 posts, 0 answers
  1. David Brubacher
    David Brubacher avatar
    29 posts
    Member since:
    Mar 2010

    Posted 18 Dec 2014 Link to this post

    I'm having difficulty displaying design-time data in a user control that makes heavy use of RadMap.
    The method I use for design-time is similar to the Sophia Car Rental project. I set the data context in the UserControl tag as follows:

                 d:DataContext="{d:DesignInstance d:Type=design:PlanViewModel, d:IsDesignTimeCreatable=True}"

    I then create a class that inherits from my run-time view model, but is used to put some dummy data on the screen. Here I am adding an information layer and setting the background to blue so I can see it. Also note the compiler directives to keep this design-time stuff out of my release a..

    using System.Windows.Media;
    using Telerik.Windows.Controls.Map;

    namespace XYZ.ViewModel.Design
        public class PlanViewModel : PlanView.PlanViewModel
            public override void SetControlState(bool resetToInitialState = false)

                var layer = new InformationLayer
                    Background = Brushes.Blue

    Lastly, this happens in the SetControlState() method, which in this case is called in the base class when the map's InitializationCompleted method is called.
    The Layers Collection is defined as such;

            public ObservableCollection<InformationLayer> Layers { get; private set; }

    and the user control definition looks like this;

            <telerik:RadMap HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                            ZoomLevel="{Binding ZoomLevel, Mode=TwoWay}" Center="{Binding Center, Mode=TwoWay}"
                            UseDefaultLayout="False" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4"
                            x:Name="MapContainer" ItemsSource="{Binding Layers}">
                <!-- Send the mouse position to the view model so we can fake the mouse position control with our own data -->
                    <telerik:EventBinding Command="{Binding MousePositionCommand}" EventName="MouseMove"
                                          PassEventArgsToCommand="True" RaiseOnHandledEvents="True"/>
                <!-- This provider gives us a blank slate that can handle UTM based data -->
                            <telerik:EPSG900913Projection />

    If I create the InformationLayer in XAML, I see a blue map as expected. If I do it in code - nothing. This technique works perfectly with other controls, so I'm somewhat at a loss as to what is happening, especially since similar code at run time creates a map with an InformationLayer with a blue background.

    Any suggestions are welcome.

  2. Petar Mladenov
    Petar Mladenov avatar
    2882 posts

    Posted 23 Dec 2014 Link to this post

    Hi David,

    Can you point us to the exact demo you are looking at ? Is it an ORM / ASP Demo, are you sure it is 100% compatible with WPF ? I managed to reproduce this but my ViewModel's constructor is not even fired when I switch to design time. On a side note, please consider having visuals (InformationLayer) in ViewModel a bad practice. Usually MVVM pattern should separate Views, Data (Models) and ViewModels. When you have visuals in the ViewModels you couple the View and the ViewModel.

    Petar Mladenov

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

  3. DevCraft banner
Back to Top