Drawing multiple layers over wpf map control

Question

I have the grid with wpf map control and canvas over it for drawing markers over map.

    <Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"></RowDefinition>
    </Grid.RowDefinitions>
    <UserControl Grid.Row="0" Content="{Binding CurrentMap}" />
    <UserControl Grid.Row="0" Content="{Binding DrawningCanvas}" />
</Grid>

Now I needed to use more than 1 layer over the map.

What wpf control I should use for binding to ObservableCollection<Canvas> in DataContext and draw them all over each other?

Sheridan Sheridan · Accepted Answer · 2013-12-04T09:57:23

You seem to be somewhat confused. An ObservableCollection is a collection for data items. A Canvas is a UI control. Therefore, you should never have a data item collection with UI elements in.

Instead, you could have a Marker data class that contains X and Y properties for the marker's positions and maybe Name and ImageSource properties to define what it would look like in the UI. Then you could have a ObservableCollection of type Marker named Markers that you could bind to the ItemsSource property of an ItemsControl. Finally, you could set a Canvas as the ItemsPanel of the ItemsControl:

<ItemsControl ItemsSource="{Binding Markers}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="ContentPresenter">
            <Setter Property="Canvas.Left" Value="{Binding X}"/>
            <Setter Property="Canvas.Top" Value="{Binding Y}"/>
        </Style>
    </ItemsControl.ItemContainerStyle>
    <ItemsControl.ItemTemplate>
        <DataTemplate DataType="{x:Type YourXmlNamespacePrefix:Marker}">
            <StackPanel Orientation="Horizontal">
                <Image Source="{Binding ImageSource}" />
                <TextBlock Text="{Binding Name}" />
            </StackPanel>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

I don't really know why you would want to have multiple layers because you could overlay multiple items on the same layer, but if you really need multiple layers, then you can just add more of the ItemsControl elements shown above.

Drawing multiple layers over wpf map control

1 Answers