This project has moved. For the latest updates, please go here.

MapItemsControl ItemTemplate with DataType

Jan 30 at 11:38 AM
Hello,

I've modified the WPF sample application:
<DataTemplate DataType="{x:Type vm:Polyline}">
    <map:MapPanel>
        <map:MapPolyline Locations="{Binding Locations}" Stroke="Red" StrokeThickness="3"/>
        <map:MapItemsControl ItemsSource="{Binding Locations}">
            <map:MapItemsControl.ItemContainerStyle>
                <Style TargetType="map:MapItem">
                    <Setter Property="map:MapPanel.Location" Value="{Binding}" />
                    <Setter Property="HorizontalAlignment" Value="Center" />
                    <Setter Property="VerticalAlignment" Value="Center" />
                </Style>
            </map:MapItemsControl.ItemContainerStyle>
            <map:MapItemsControl.ItemTemplate>
                <DataTemplate>
                    <Rectangle Width="10" Height="10" Fill="Red" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" MouseMove="Rectangle_MouseMove" MouseLeftButtonUp="Rectangle_MouseLeftButtonUp" />
                </DataTemplate>
            </map:MapItemsControl.ItemTemplate>
        </map:MapItemsControl>
    </map:MapPanel>
</DataTemplate>
<map:MapItemsControl ItemsSource="{Binding Polylines}" />
This is since I have different types of Polylines, each with it's own visual, plus each Rectangle has attached events so it can be movable. The problem is the MapPolyline isn't visible... any idea?

Thanks!
Coordinator
Jan 30 at 4:38 PM
Edited Jan 30 at 5:35 PM
The default Style for MapItem (in Generic.xaml) looks like this:
<Style TargetType="map:MapItem">
    <Setter Property="HorizontalAlignment" Value="Stretch"/>
    <Setter Property="VerticalAlignment" Value="Stretch"/>
    <Setter Property="HorizontalContentAlignment" Value="Left"/>
    <Setter Property="VerticalContentAlignment" Value="Top"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="map:MapItem">
                <ContentPresenter Content="{TemplateBinding Content}"
                    ContentTemplate="{TemplateBinding ContentTemplate}"
                    Margin="{TemplateBinding Padding}"
                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
This means that the ContentPresenter is top-left aligned by default. This results in top-left alignment of the parent MapPanel in your DataTemplate, which somehow seems to clip the MapPolyline.

You may either assign an arbitrarily large Width and Height to the MapPanel, or change the MapItemsControl's Style like
<map:MapItemsControl ItemsSource="{Binding Polylines}">
    <map:MapItemsControl.ItemContainerStyle>
        <Style TargetType="map:MapItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
        </Style>
    </map:MapItemsControl.ItemContainerStyle>
</map:MapItemsControl>
I am however not sure any more why exactly the MapItem Style defines these ContentAlignment values. I might remove them completely from the Style after some testing.
Marked as answer by ClemensF on 2/20/2017 at 12:49 PM