Binding shapes in VisualizationLayer

7 posts, 1 answers
  1. Peter
    Peter avatar
    8 posts
    Member since:
    Oct 2016

    Posted 08 Nov Link to this post

    I have multiple VisualizationLayers in my radmap. On one layer I want to render a collection of shapes (lines, polygons, ellipses). I have bound the collection of shapes to my layer but I notice that when the map is zoomed the shapes remain a constant size. I want to achieve the behaviour shown in the sample app "Information Layer Map Polygon" so the shapes grow/shrink as the map is zoomed in or out. The sample code uses MapPolygon (which I can't use in VisualizationLayer?). Is there some way for me to get the same behaviour in a VisualizationLayer?

    Thanks

    Pete

     

  2. Martin
    Admin
    Martin avatar
    1099 posts

    Posted 10 Nov Link to this post

    Hello Pete,

    Indeed, the map's VisualizationLayer doesn't work with MapShape objects as the MapPolygon, but uses different type of shape models - MapShapeData. You can read more about this in the corresponding article in the documentation of RadMap. Specifically for MapPolygon, it can be replaced with PolygonData.

    Regards,
    Martin
    Telerik by Progress
    Do you need help with upgrading your WPF project? Try the Telerik API Analyzer and share your thoughts!
  3. UI for WPF is Visual Studio 2017 Ready
  4. Peter
    Peter avatar
    8 posts
    Member since:
    Oct 2016

    Posted 10 Nov in reply to Martin Link to this post

    Hi Martin,

    Thanks for the response. I've looked at the documentation you mentioned but there's no example of using PolygonData within a DataTemplate (for the items in the VisualizationLayer) - is that possible? Is there some way I can bind the properties for PolygonData to properties in my view model or will I have to do this in code-behind?

    Thanks,

    Pete

  5. Martin
    Admin
    Martin avatar
    1099 posts

    Posted 14 Nov Link to this post

    Hi Pete,

    The MapShapeData objects cannot be added in a DataTemplate because they are not UI elements. In order to use them in an MVVM scenario you can connect them to your view model, using the map bindable wrappers. Basically, those are classes that allows the view model to communicate with the shape data. Each shape data element has corresponding wrapper. For example, the EllipseData has a MapEllipseView, and the PolygonData, MapPolygonView. You can see how to use the wrappers in the attached project.

    Or you can just create the MapShapeData objects in code, based on your collection of business items.

    Regards,
    Martin
    Telerik by Progress
    Do you need help with upgrading your WPF project? Try the Telerik API Analyzer and share your thoughts!
  6. Peter
    Peter avatar
    8 posts
    Member since:
    Oct 2016

    Posted 17 Nov in reply to Martin Link to this post

    Hi Martin,
    Thanks for the reply. I ran your example and it worked fine. I then changed the xaml to put the template in Window.resources as so:

    <Window.Resources>
        <DataTemplate x:Key="DataTemplate">
            <telerik:MapPolygonView Points="{Binding Points}">
                <telerik:MapPolygonView.ShapeFill>
                    <telerik:MapShapeFill Fill="#33F3277B" Stroke="Green" StrokeThickness="1"/>
                </telerik:MapPolygonView.ShapeFill>
            </telerik:MapPolygonView>
        </DataTemplate>       
    </Window.Resources>     
    <Grid>
        <telerik:RadMap x:Name="RadMap">
            <telerik:RadMap.Provider>
                <telerik:EmptyProvider />
            </telerik:RadMap.Provider>
            <telerik:VisualizationLayer ItemsSource="{Binding}" ItemTemplate="{StaticResource DataTemplate}" />
        </telerik:RadMap>           
    </Grid>

     

    It still worked. I then commented out the VisualizationLayer declaration in the xaml and changed the constructor code in the code-behind i.e.

    public MainWindow()
    {
        InitializeComponent();
        _source = new ObservableCollection<PolygonShapeModel>()
        {
            new PolygonShapeModel()
            {
                Points = new LocationCollection()
                {
                    new Location(5, 5), new Location(5, 30), new Location(30, 30), new Location(30, 5),
                }
            },
        };
     
        var itemTemplate = (DataTemplate)Resources["DataTemplate"];
        RadMap.Items.Add(new VisualizationLayer {ItemsSource = _source, ItemTemplate = itemTemplate});
        this.DataContext = _source;
    }

    When I run this the shape is no longer displayed - can you explain why?
    Thanks
    Pete

  7. Answer
    Martin
    Admin
    Martin avatar
    1099 posts

    Posted 22 Nov Link to this post

    Hello Peter,

    The shape is not display because of the bindable wrappers mechanism that synchronizes the visual elements with the view model. Creating of the corresponding visual depends on a specific shape template defined in the VisualizationLayer's style. If this template is not loaded the shape won't be displayed. It seems that setting the ItemsSource of the layer in the constructor of the view is too early, and the template is still missing.

    In order to resolve this you can set the ItemsSource when the VisualizationLayer is loaded.
    var itemTemplate = (DataTemplate)Resources["DataTemplate"];
    var layer = new VisualizationLayer() { ItemTemplate = itemTemplate };
    layer.Loaded += (s, e) =>
    {               
        layer.ItemsSource = _source;               
    };
     
    map.Items.Add(layer);

    Or you can set the ItemsSource via a binding in code behind.
    var itemTemplate = (DataTemplate)Resources["DataTemplate"];
    var binding = new Binding() { Source = _source };
    var layer = new VisualizationLayer() { ItemTemplate = itemTemplate };
    layer.SetBinding(VisualizationLayer.ItemsSourceProperty, binding);
    map.Items.Add(layer);

    I hope this helps.

    Regards,
    Martin
    Telerik by Progress
    Telerik UI for WPF is ready for Visual Studio 2017 RC! Learn more.
  8. Peter
    Peter avatar
    8 posts
    Member since:
    Oct 2016

    Posted 25 Nov in reply to Martin Link to this post

    Hi Martin,

    That works thanks,

    Pete

Back to Top
UI for WPF is Visual Studio 2017 Ready