Select to view content in your preferred language

Change GraphicsLayer symbol

2645
1
09-17-2012 04:44 PM
SteveLi
Emerging Contributor
When you add a GraphicsLayer to the viewer.  Points always show as pushpins.  Is there a way to change symbol of the points?          

  GraphicsLayer graphicsLayer = null;
            graphicsLayer = GetOrCreateLayer("Start Substation");
            graphicsLayer.ClearGraphics();
            startStation.Symbol = LayoutRoot.Resources["RedMarkerSymbol"] as Symbol; //this doesn't work
            graphicsLayer.Graphics.Add(startStation);

            // Add the results graphics layer to the map if it has not already been added
            if (MapApplication.Current.Map.Layers[graphicsLayer.ID] == null)
                MapApplication.Current.Map.Layers.Add(graphicsLayer);
0 Kudos
1 Reply
BrianLeroux
Frequent Contributor
Here is how I added my own custom symbols by addding them to the resource dictionary. The last entry called "CustomStrobeMarkerSymbol" uses visual states to add a label when hovering and simulate the same orange glow used in the viewer when selecting. The XAML.CS code shows how to create the layer passing the renderer name. Hope this helps.

XAML
<UserControl.Resources>
        <ResourceDictionary>
            <esri:SimpleMarkerSymbol x:Key="BlueMarkerSymbol" Color="Blue" Size="12" Style="Circle" />
            <esri:SimpleLineSymbol x:Key="RedLineSymbol" Color="Red" Width="4" Style="Solid" />
            <esri:SimpleLineSymbol x:Key="BlueLineSymbol" Color="Blue" Width="4" Style="Solid" />
            <esri:SimpleFillSymbol x:Key="RedFillSymbol" Fill="#66FF0000" BorderBrush="Red" BorderThickness="2" />
            <esri:SimpleFillSymbol x:Key="BlueFillSymbol" Fill="#660000FF" BorderBrush="Blue" BorderThickness="2" />
            <esri:SimpleFillSymbol x:Key="WhiteFillSymbol" Fill="#AAFFFFFF" BorderBrush="#DD000000" BorderThickness="2" />
            <esri:PictureMarkerSymbol x:Key="RedStickpin"  OffsetX="16" OffsetY="32" Source="/PolicyQuerySpatial.AddIns;component/Images/RedStickpin.png" Height="32" Width="32" />
            <esri:PictureMarkerSymbol x:Key="BlueStickpin"  OffsetX="16" OffsetY="32" Source="/PolicyQuerySpatial.AddIns;component/Images/BlueStickpin.png" Height="32" Width="32" />
            <esri:MarkerSymbol x:Name="CustomStrobeMarkerSymbol">
                <esri:MarkerSymbol.ControlTemplate>
                    <ControlTemplate>
                        <Canvas>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <VisualState x:Name="Selected">
                                        <Storyboard RepeatBehavior="1x"><!--"ForEver"-->
                                            <DoubleAnimation BeginTime="0" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)" From="1" To="6" Duration="00:00:00.5" />
                                            <DoubleAnimation BeginTime="0" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)" From="1" To="6" Duration="00:00:00.5" />
                                            <DoubleAnimation BeginTime="0" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.Opacity)" From="1" To="1" Duration="00:00:01" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Unselected" />
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="labelOnHover" 
                            Storyboard.TargetProperty="Visibility" 
                            Duration="0">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <DoubleAnimation From="0" To="1" Storyboard.TargetName="labelOnHover" 
                             Storyboard.TargetProperty="Opacity"
                             Duration="0:0:.25" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Normal" />
                                </VisualStateGroup>

                            </VisualStateManager.VisualStateGroups>
                            
                            <Ellipse Height="10" Width="10" Canvas.Left="-5" Canvas.Top="-5" RenderTransformOrigin="0.5,0.5" x:Name="ellipse" IsHitTestVisible="False">
                                <Ellipse.RenderTransform>
                                    <ScaleTransform />
                                </Ellipse.RenderTransform>
                                <Ellipse.Fill>
                                    <RadialGradientBrush>
                                        <GradientStop Color="#8DFFFF00" />
                                        <GradientStop Color="#8DFFFF00" Offset=".4" />
                                        <GradientStop Color="#8DFF7600" Offset=".8" />
                                        <GradientStop Color="#00FF7600" Offset="1" />
                                        <!--<GradientStop Color="#00FF0000" Offset="1" />-->
                                    </RadialGradientBrush>
                                </Ellipse.Fill>
                            </Ellipse>
                            <Ellipse Height="10" Width="10" Canvas.Left="-5" Canvas.Top="-5" Fill="#FFFF0000" x:Name="ellipse1" />
                            <Grid Margin="8,-8,0,0" x:Name="labelOnHover" Visibility="Collapsed"
                        HorizontalAlignment="Left" VerticalAlignment="Top" >
                                <!--Text halo using a white blurred text-->
                                <TextBlock Foreground="White" FontWeight="Bold" Text="{Binding Attributes[POLICY_NO]}" >
                    <TextBlock.Effect>
                              <BlurEffect Radius="5" />
                    </TextBlock.Effect>
                                </TextBlock>
                                <!--Text-->
                                <TextBlock Foreground="Black" FontWeight="Bold" Text="{Binding Attributes[POLICY_NO]}" />
                            </Grid>

                        </Canvas>
                    </ControlTemplate>
                </esri:MarkerSymbol.ControlTemplate>
                
            </esri:MarkerSymbol>
        </ResourceDictionary>
    </UserControl.Resources>


XAML.CS
// Retrieve or create a graphics layer to use for displaying results
GraphicsLayer graphicsLayer = null;
            if (featureSet.Features[0].Geometry is ESRI.ArcGIS.Client.Geometry.MapPoint)// && featureSet.Count() < 6)
                graphicsLayer = GetOrCreateLayer("Policy Spatial Query Results", "CustomStrobeMarkerSymbol");

 private GraphicsLayer GetOrCreateLayer(string layerId, string renderer)       
        {
            Layer layer = MapApplication.Current.Map.Layers[layerId];
            if (layer != null && layer is GraphicsLayer)
            {
                return layer as GraphicsLayer;
            }
           else
            {
                GraphicsLayer gLayer = new GraphicsLayer() 
                { 
                    ID = layerId, 
                    Renderer = new SimpleRenderer()
                    {
                        Symbol = Resources[renderer] as Symbol
                    }
                };
                gLayer.SetValue(MapApplication.LayerNameProperty, layerId);
                return gLayer;
            }
        }
0 Kudos