Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
860
GeographicSymbolSeries Marker Template
posted

Hi

I have a series of the type GeographicSymbolSeries showing various points on the map.

It is possible to set the MarkerType on the series and this works fine.

However I want to add a label to the symbol and therefor I seeked som inspiration in your example browser. I found this example:

<DataTemplate x:Key="shapeCityMarkerTemplate"> <Grid> <Canvas Margin="-12,-12,0,0"> <Border Canvas.Left="12" Canvas.Top="1" BorderThickness="1" CornerRadius="4"> <Border.Background> <LinearGradientBrush EndPoint="0,1"> <GradientStop Color="White" /> <GradientStop Color="#77ffffff" Offset="1" /> LinearGradientBrush> Border.Background> <Grid> <Rectangle RadiusX="3" RadiusY="3"> <Rectangle.Stroke> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="Transparent" Offset="0"/> <GradientStop Color="White" Offset="1"/> LinearGradientBrush> Rectangle.Stroke> Rectangle> <StackPanel Orientation="Horizontal"> <Ellipse Width="10" Height="10" StrokeThickness="1" Margin="8 3 3 3"> <Ellipse.Stroke> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="Transparent" Offset="0"/> <GradientStop Color="White" Offset="1"/> LinearGradientBrush> Ellipse.Stroke> <Ellipse.Fill> <RadialGradientBrush RadiusY="0.582" RadiusX="0.582" Center="0.505,0.577" GradientOrigin="0.505,0.577"> <GradientStop Color="#FF2D330B" Offset="1"/> <GradientStop Color="#FFA4BA29" Offset="0.695"/> RadialGradientBrush> Ellipse.Fill> Ellipse> <TextBlock Text="{Binding Path=Item.Name}" VerticalAlignment="Center" Margin="3 3 8 3" /> StackPanel> Grid> Border> Canvas> Grid> DataTemplate>

This will always show an Ellipse though.

Do you have some suggestion on how to combine these? Instead of the Ellipse I want to show the MarkerType set on the series, in MarkerTemplate.

  • 34510
    Offline posted

    Hi logimatic,

    Since our markers currently don't have built in labels your approach is on the right track.  You just need to add a little bit more in order to get the marker shape itself to respect the MarkerType property.  For this you can create a DataTemplateSelector that returns one of the marker templates off the XamGeographicMap itself.  For example:

    public class MyMarkerSelector : DataTemplateSelector
    {
        public override DataTemplate SelectTemplate(object item, DependencyObject container)
        {
            Infragistics.Controls.Charts.DataContext dc = (Infragistics.Controls.Charts.DataContext)item;
            var series = dc.Series as Series;
            var markerType = MarkerSeries.ResolveMarkerType(series, (series as MarkerSeries).MarkerType);
            switch (markerType)
            {
                case MarkerType.Circle:
                    return series.SeriesViewer.CircleMarkerTemplate;
                case MarkerType.Diamond:
                    return series.SeriesViewer.DiamondMarkerTemplate;
                case MarkerType.Hexagon:
                    return series.SeriesViewer.HexagonMarkerTemplate;
                case MarkerType.Hexagram:
                    return series.SeriesViewer.HexagramMarkerTemplate;
                case MarkerType.None:
                    return base.SelectTemplate(item, container);
                case MarkerType.Pentagon:
                    return series.SeriesViewer.PentagonMarkerTemplate;
                case MarkerType.Pentagram:
                    return series.SeriesViewer.PentagramMarkerTemplate;
                case MarkerType.Pyramid:
                    return series.SeriesViewer.PyramidMarkerTemplate;
                case MarkerType.Square:
                    return series.SeriesViewer.SquareMarkerTemplate;
                case MarkerType.Tetragram:
                    return series.SeriesViewer.TetragramMarkerTemplate;
                case MarkerType.Triangle:
                    return series.SeriesViewer.TriangleMarkerTemplate;
            }
    
            return base.SelectTemplate(item, container);
        }
    }

    Then inside your current DataTemplate, replace your Ellipse with this:

    <ContentControl Content="{Binding}" ContentTemplateSelector="{StaticResource MyMarkerSelector}"
        VerticalAlignment="Center"/>

    Where MyMarkerSelector is:

    <local:MyMarkerSelector x:Key="MyMarkerSelector"/>