This is a migrated thread and some comments may be shown as answers.

Binding shapes in VisualizationLayer

6 Answers 363 Views
Map
This is a migrated thread and some comments may be shown as answers.
Peter
Top achievements
Rank 1
Veteran
Peter asked on 08 Nov 2016, 12:39 PM

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

 

6 Answers, 1 is accepted

Sort by
0
Martin Ivanov
Telerik team
answered on 10 Nov 2016, 02:51 PM
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!
0
Peter
Top achievements
Rank 1
Veteran
answered on 10 Nov 2016, 03:27 PM

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

0
Martin Ivanov
Telerik team
answered on 14 Nov 2016, 09:43 AM
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!
0
Peter
Top achievements
Rank 1
Veteran
answered on 17 Nov 2016, 11:06 AM

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

0
Accepted
Martin Ivanov
Telerik team
answered on 22 Nov 2016, 11:34 AM
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.
0
Peter
Top achievements
Rank 1
Veteran
answered on 25 Nov 2016, 04:28 PM

Hi Martin,

That works thanks,

Pete

Tags
Map
Asked by
Peter
Top achievements
Rank 1
Veteran
Answers by
Martin Ivanov
Telerik team
Peter
Top achievements
Rank 1
Veteran
Share this question
or