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

Multiple bindings in PolylineItemStyle

Jan 30, 2013 at 12:47 PM
Edited Jan 30, 2013 at 12:55 PM

Hi Clemens, first off great control - thanks!

I'm having some trouble getting a certain requirement to work, I'm sure it's from my basic knowledge of xaml and binding.

Basically I would like a polyline with a textbox giving it's name.

            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="map:MapItem">
                        <Canvas>
                            <Grid Canvas.Left="15" Canvas.Top="-8" map:MapPanel.Location="{Binding LocationXS}">
                                <Rectangle Name="labelBackground" Fill="White" Opacity="0.7"/>
                                <TextBlock Margin="2,0,2,0" Text="{Binding Name}"/>
                            </Grid>
                            <map:MapPolyline Locations ="{Binding Locations}" Stroke="Blue" StrokeThickness="5"/>
                        </Canvas>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>

The polyline is bound to a LocationCollection, and the grid to a Location. (which is actually just the first point in the LocationCollection.

When I run the code above the polylines and Grid are drawn correctly, but as soon as I pan/zoom the map the Grid element floats and does not attach itself to the map. The Polylines are still fine though.

If I try something like this the opposite happens:

        <Style x:Key="PolylineItemStyle" TargetType="map:MapItem">
            <Setter Property="map:MapPanel.Location" Value="{Binding LocationXS}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="map:MapItem">
                        <Canvas>
                            <Grid Canvas.Left="15" Canvas.Top="-8">
                                <Rectangle Name="labelBackground" Fill="White" Opacity="0.7"/>
                                <TextBlock Margin="2,0,2,0" Text="{Binding Name}"/>
                            </Grid>
                            <map:MapPolyline Name="polyz" Locations ="{Binding Locations}" Stroke="Blue" StrokeThickness="5"/>
                        </Canvas>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

The Grid is now fixed to the map, but the MapPolyline floats around not attached. If it's not possible to have multiple bindings, do you have any other suggestions?

Many thanks,

Joe

(Edit: The reason I don't just use a separate style for the Grid (PointItemStyle) is I would like to make use of VisualStateManager and basically only display the names of the polylines when clicked on.)

Coordinator
Jan 30, 2013 at 1:12 PM
Edited Jan 30, 2013 at 1:48 PM

You may put the Canvas and the MapPolyline in a MapPanel:

<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="map:MapItem">
            <map:MapPanel>
                <Canvas map:MapPanel.Location="{Binding Locations[0]}">
                    <Grid Canvas.Left="15" Canvas.Top="-8">
                        ...
                    </Grid>
                </Canvas>
                <map:MapPolyline Locations="{Binding Locations}" Stroke="Blue" StrokeThickness="5"/>
            </map:MapPanel>
        </ControlTemplate>
    </Setter.Value>
</Setter>

Although you can set the MapPanel.Location property on an element that is not the child of a MapPanel, the actual viewport coordinates of such an element won't be updated when the map viewport changes.

MapPolyline behaves slightly different. It gets the Map's ViewportTransform property applied to its Geometry. Therefore it will be properly moved and scaled even if it is not child of a MapPanel.

Jan 30, 2013 at 1:15 PM

Thanks for the quick reply, worked perfectly! ^5