topic Re: How to do different marker symbol shapes in ArcGIS API for Silverlight Questions

How to do different marker symbol shapes

DonFreeman — Thu, 28 Feb 2013 19:50:14 GMT

The code below will produce a marker symbol in the shape of a circle. I can also use a rectangle to make a square, But how do you do something similar to create a diamond or triangle?
Thanks

<esri2:MarkerSymbol x:Key="ElectricMarkerSymbol" >
    <esri2:MarkerSymbol.ControlTemplate>
     <ControlTemplate>
      <Ellipse x:Name="Element" Width="9" Height="9" Fill="Green" Stroke="Green" StrokeThickness="1.5">
       <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="SelectionStates">
         <VisualState x:Name="Unselected" />
         <VisualState x:Name="Selected" >
          <Storyboard>
           <ColorAnimation Storyboard.TargetName="Element" 
            Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)"
            To="Yellow" Duration="00:00:0.25"/>

           <ColorAnimation Storyboard.TargetName="Element" 
            Storyboard.TargetProperty="(Ellipse.Stroke).(SolidColorBrush.Color)"
            To="Black" Duration="00:00:0.25"/>

           <DoubleAnimation BeginTime="00:00:00"
            Storyboard.TargetName="Element" 
                                                Storyboard.TargetProperty="(Ellipse.Height)" 
                                                To="15" Duration="0:0:0.1" />
           <DoubleAnimation BeginTime="00:00:00" 
                                                Storyboard.TargetName="Element" 
                                                Storyboard.TargetProperty="(Ellipse.Width)" 
                                                To="15" Duration="0:0:0.1" />

          </Storyboard>
         </VisualState>
        </VisualStateGroup>
       </VisualStateManager.VisualStateGroups>
      </Ellipse>
     </ControlTemplate>
    </esri2:MarkerSymbol.ControlTemplate>
   </esri2:MarkerSymbol>

Re: How to do different marker symbol shapes

wangzhifang — Fri, 01 Mar 2013 00:26:25 GMT

The solution is to use a FillSymbol to your feature rather than MarkerSymbol.
Refer to "custom fill symbol" category in symbol gallery: http://help.arcgis.com/en/webapi/silverlight/samples/SymbolGalleryWeb/start.htm

If you choose not to make your geometry of feature to polygon, then you have to create a list of custom marker symbols first, and then using them as an enumeration based on a attribute field describing the symbol type of your feature.

Re: How to do different marker symbol shapes

DonFreeman — Sat, 11 Dec 2021 15:57:12 GMT

Thank you. I am not having much luck with a custom fill symbol. But the site you reference does provide a marker symbol in the shape of a triangle. I can get that to work with my features. Now I want to animate it similar to an ellipse marker that I have used before. The problem is that the content of the symbol is somewhat different being based on a grid and I can't figure out how to reference the properties. Specifically, what component gets named "Element" and which properties get referenced to produce the desired effect. The code below shows what I am trying to do. Can you help?

<esri:MarkerSymbol x:Key="Green_Triangle" OffsetX="5.74" OffsetY="5.1333">
    <esri:MarkerSymbol.ControlTemplate>
     <ControlTemplate>
      <Grid RenderTransformOrigin="0.5,0.5">       
       
       <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="SelectionStates">
         <VisualState x:Name="Unselected"/>
         <VisualState x:Name="Selected">
          <Storyboard>
           <ColorAnimation Storyboard.TargetName="Element" 
            Storyboard.TargetProperty="(Grid.Fill).(SolidColorBrush.Color)"
            To="Yellow" Duration="00:00:0.25"/>

           <ColorAnimation Storyboard.TargetName="Element" 
            Storyboard.TargetProperty="(Grid.Stroke).(SolidColorBrush.Color)"
            To="Black" Duration="00:00:0.25"/>

           <DoubleAnimation BeginTime="00:00:00"
            Storyboard.TargetName="Element" 
                                                Storyboard.TargetProperty="(Canvas.Path.Height)" 
                                                To="20" Duration="0:0:0.1" />
           
           <DoubleAnimation BeginTime="00:00:00" 
                                                Storyboard.TargetName="Element" 
                                                Storyboard.TargetProperty="(Canvas.Path.Width)" 
                                                To="20" Duration="0:0:0.1" />

          </Storyboard>
         </VisualState>
         
        </VisualStateGroup>
       </VisualStateManager.VisualStateGroups>
              
       <Grid.RenderTransform>
        <TransformGroup>
         <ScaleTransform ScaleX="1" ScaleY="1" />
        </TransformGroup>
       </Grid.RenderTransform>
       <Canvas  x:Name="Element" HorizontalAlignment="Left" VerticalAlignment="Top">
        <Path Width="11.48" Height="10.2667" Fill="Green" Stroke="Green" StrokeThickness="0.5" Data="F1 M 1.12181e-007,10.2667L 5.84208,0L 11.48,10.2667L 1.12181e-007,10.2667 Z " />
       </Canvas>
      </Grid>      
     </ControlTemplate>
    </esri:MarkerSymbol.ControlTemplate>
   </esri:MarkerSymbol>

Re: How to do different marker symbol shapes

wangzhifang — Wed, 06 Mar 2013 06:38:26 GMT

It is difficult to do what you want with custom marker symbol because the geometry is different type and marker symbol assumed your features all have the same geometry type of point.
Just like what I said above, you may consider to use a custom FillSymbol to draw your various kinds of geometries, as long as your geometry type is polygon, no matter what exactly they are(circle/triangle/diamond/...), you can using the single symbol to draw them without doing any more job. The precondition is to change all your feature to polygon based feature.
The other way is to pre-define several custom marker symbol corresponding to your need and using them separately based on your shape type.

Re: How to do different marker symbol shapes

DominiqueBroux — Sat, 11 Dec 2021 15:57:15 GMT

<esri:MarkerSymbol x:Key="Green_Triangle" OffsetX="5.74" OffsetY="5.1333">
                <esri:MarkerSymbol.ControlTemplate>
                    <ControlTemplate>
                        <Grid RenderTransformOrigin="0.5,0.5">                            
                            
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <VisualState x:Name="Unselected"/>
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="Element" 
                                                Storyboard.TargetProperty="(Grid.Fill).(SolidColorBrush.Color)"
                                                To="Yellow" Duration="00:00:0.25"/>

                                            <ColorAnimation Storyboard.TargetName="Element" 
                                                Storyboard.TargetProperty="(Grid.Stroke).(SolidColorBrush.Color)"
                                                To="Black" Duration="00:00:0.25"/>

                                            <DoubleAnimation BeginTime="00:00:00"
                                                Storyboard.TargetName="Element" 
                                                Storyboard.TargetProperty="(Canvas.Path.Height)" 
                                                To="20" Duration="0:0:0.1" />
                                            
                                            <DoubleAnimation BeginTime="00:00:00" 
                                                Storyboard.TargetName="Element" 
                                                Storyboard.TargetProperty="(Canvas.Path.Width)" 
                                                To="20" Duration="0:0:0.1" />

                                        </Storyboard>
                                    </VisualState>
                                    
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                                                        
                            <Grid.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform ScaleX="1" ScaleY="1" />
                                </TransformGroup>
                            </Grid.RenderTransform>
                            <Canvas  x:Name="Element" HorizontalAlignment="Left" VerticalAlignment="Top">
                                <Path Width="11.48" Height="10.2667" Fill="Green" Stroke="Green" StrokeThickness="0.5" Data="F1 M 1.12181e-007,10.2667L 5.84208,0L 11.48,10.2667L 1.12181e-007,10.2667 Z " />
                            </Canvas>
                        </Grid>                        
                    </ControlTemplate>
                </esri:MarkerSymbol.ControlTemplate>
            </esri:MarkerSymbol>

I don't think the Canvas in your symbol is useful.
I suggest you give a name to your Path element so you can animate some Path properties with code like:

<ColorAnimation Storyboard.TargetName="MyPath" 
                         Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)"
                         To="Yellow" Duration="00:00:0.25"/>

Re: How to do different marker symbol shapes

DonFreeman — Sat, 11 Dec 2021 15:57:18 GMT

Thank you Dominique. This gets me pretty close.

<esri:MarkerSymbol x:Key="Green_Triangle" OffsetX="5.74" OffsetY="5.1333">
    <esri:MarkerSymbol.ControlTemplate>
     <ControlTemplate>
      <Grid RenderTransformOrigin="0.5,0.5">       
       
       <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="SelectionStates">
         <VisualState x:Name="Unselected"/>
         <VisualState x:Name="Selected">
          <Storyboard>
           <ColorAnimation Storyboard.TargetName="MyPath" 
            Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)"
            To="Yellow" Duration="00:00:0.25"/>

           <ColorAnimation Storyboard.TargetName="MyPath" 
            Storyboard.TargetProperty="(Path.Stroke).(SolidColorBrush.Color)"
            To="Black" Duration="00:00:0.25"/>

           <DoubleAnimation BeginTime="00:00:00"
            Storyboard.TargetName="MyPath" 
                                                Storyboard.TargetProperty="(Path.Height)" 
                                                To="20" Duration="0:0:0.1" />
           
           <DoubleAnimation BeginTime="00:00:00" 
                                                Storyboard.TargetName="MyPath" 
                                                Storyboard.TargetProperty="(Path.Width)" 
                                                To="20" Duration="0:0:0.1" />

           
          </Storyboard>
         </VisualState>
         
        </VisualStateGroup>
       </VisualStateManager.VisualStateGroups>
              
       <Grid.RenderTransform>
        <TransformGroup>
         <ScaleTransform ScaleX="1" ScaleY="1" />
        </TransformGroup>
       </Grid.RenderTransform>
       <Canvas  x:Name="Element" HorizontalAlignment="Left" VerticalAlignment="Top">
        <Path x:Name="MyPath" Width="11.48" Height="10.2667" Fill="Green" Stroke="Green" 
           StrokeThickness="1.5" 
           Data="F1 M 1.12181e-007,10.2667L 5.84208,0L 11.48,10.2667L 1.12181e-007,10.2667 Z " />
       </Canvas>
      </Grid>      
     </ControlTemplate>
    </esri:MarkerSymbol.ControlTemplate>
   </esri:MarkerSymbol>

I get the color change I wanted but not the size change. Do I need to adjust the Path.Data as well? If so, can you explain how to construct the new data string? I don't see much rhyme or reason to what it contains.

Re: How to do different marker symbol shapes

DominiqueBroux — Wed, 06 Mar 2013 16:04:17 GMT

Easier to animate the ScaleTransform of the root grid.

There are samples here (looks at Custom Marker Symbols category).

Re: How to do different marker symbol shapes

DonFreeman — Sat, 11 Dec 2021 15:57:20 GMT

OK, based on those samples I would expect this to work.

  <esri:MarkerSymbol x:Key="Green_Triangle" OffsetX="5.74" OffsetY="5.1333">
    <esri:MarkerSymbol.ControlTemplate>
     <ControlTemplate>
      <Grid x:Name="MyGrid" RenderTransformOrigin="0.5,0.5">

       <Grid.RenderTransform>
        <TransformGroup>
         <ScaleTransform x:Name="GridScaler" ScaleX="1" ScaleY="1" />
        </TransformGroup>
       </Grid.RenderTransform>
       
       <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="SelectionStates">
         <VisualState x:Name="Unselected"/>
         <VisualState x:Name="Selected">
          <Storyboard>
           <ColorAnimation Storyboard.TargetName="MyPath" 
            Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)"
            To="Yellow" Duration="00:00:0.25"/>

           <ColorAnimation Storyboard.TargetName="MyPath" 
            Storyboard.TargetProperty="(Path.Stroke).(SolidColorBrush.Color)"
            To="Black" Duration="00:00:0.25"/>

           <DoubleAnimation BeginTime="00:00:00"
            Storyboard.TargetName="MyPath" 
                                                Storyboard.TargetProperty="(Path.Height)" 
                                                To="20" Duration="0:0:0.1" />
           
           <DoubleAnimation BeginTime="00:00:00" 
                                                Storyboard.TargetName="MyPath" 
                                                Storyboard.TargetProperty="(Path.Width)" 
                                                To="20" Duration="0:0:0.1" />

           <DoubleAnimation BeginTime="00:00:00" 
                Storyboard.TargetName="GridScaler" 
                Storyboard.TargetProperty="(Grid.RenderTransform).(ScaleTransform.ScaleX)" 
                To="2" 
                Duration="0:0:1" />
           
           <DoubleAnimation BeginTime="00:00:00" 
                Storyboard.TargetName="GridScaler" 
                Storyboard.TargetProperty="(Grid.RenderTransform).(ScaleTransform.ScaleY)" 
                To="2" 
                Duration="0:0:1" />

          </Storyboard>
         </VisualState>
         
        </VisualStateGroup>
       </VisualStateManager.VisualStateGroups>
              
       
   
        

       <Path x:Name="MyPath" Data="F1 M 0,10 L 10,10 L 5,0 Z" Stroke="Green" StrokeThickness="1.5" Fill="Green" />
       
       

      </Grid>      
     </ControlTemplate>
    </esri:MarkerSymbol.ControlTemplate>
   </esri:MarkerSymbol>

Can you spot what I have wrong/missing?

Re: How to do different marker symbol shapes

DonFreeman — Sat, 11 Dec 2021 15:57:23 GMT

OK This seems to work and do what I wanted.

<esri:MarkerSymbol x:Key="Green_Triangle" OffsetX="5.74" OffsetY="5.1333">
    <esri:MarkerSymbol.ControlTemplate>
     <ControlTemplate>
      <Grid x:Name="MyGrid" RenderTransformOrigin="0.5,0.5">

       <Grid.RenderTransform>
        <TransformGroup>
         <ScaleTransform x:Name="GridScaler" ScaleX="1" ScaleY="1" />
        </TransformGroup>
       </Grid.RenderTransform>
       
       <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="SelectionStates">
         <VisualState x:Name="Unselected"/>
         <VisualState x:Name="Selected">
          <Storyboard>
           <ColorAnimation Storyboard.TargetName="MyPath" 
            Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)"
            To="Yellow" Duration="00:00:0.25"/>

           <ColorAnimation Storyboard.TargetName="MyPath" 
            Storyboard.TargetProperty="(Path.Stroke).(SolidColorBrush.Color)"
            To="Black" Duration="00:00:0.25"/>

           <DoubleAnimation BeginTime="00:00:00"
            Storyboard.TargetName="MyPath" 
                                                Storyboard.TargetProperty="(Path.Height)" 
                                                To="20" Duration="0:0:0.1" />
           
           <DoubleAnimation BeginTime="00:00:00" 
                                                Storyboard.TargetName="MyPath" 
                                                Storyboard.TargetProperty="(Path.Width)" 
                                                To="20" Duration="0:0:0.1" />

           <DoubleAnimation BeginTime="00:00:00" 
                Storyboard.TargetName="GridScaler" 
                Storyboard.TargetProperty="(ScaleTransform.ScaleX)" 
                To="2" 
                Duration="0:0:1" />
           
           <DoubleAnimation BeginTime="00:00:00" 
                Storyboard.TargetName="GridScaler" 
                Storyboard.TargetProperty="(ScaleTransform.ScaleY)" 
                To="2" 
                Duration="0:0:1" />
          </Storyboard>
         </VisualState>
         
        </VisualStateGroup>
       </VisualStateManager.VisualStateGroups>
            
       <Path x:Name="MyPath" Data="F1 M 0,-5 L -5,5 L 5,5 Z" Stroke="Green" StrokeThickness="1" Fill="Green" />
       
       <!-- Decode the Path M 0,-5 = Move to point 0,-5 (Y is positive down)
            L -5,5 = Draw line to point -5,5 (left side of the triangle)
            L 5,5 = Draw line to 5,5 (base of the triangle)
            Z = close the shape back to the vertex
       
            This places the original point in the center of the triangle.
       Data="F1 M 0,-5 L -5,5 L 5,5 Z"   //Triangle
       Data="F1 M 0,-6 L-5,0 L 0,6 L 5,0 Z" //Diamond
       
       See also http://resources.arcgis.com/en/help/silverlight-api/samples/SymbolGalleryWeb/start.htm -->

      </Grid>      
     </ControlTemplate>
    </esri:MarkerSymbol.ControlTemplate>
   </esri:MarkerSymbol>

Re: How to do different marker symbol shapes

DominiqueBroux — Thu, 07 Mar 2013 05:22:26 GMT

OK This seems to work and do what I wanted.

Great:). I guess your previous sample was not working because your targetName is a ScaleTransform but you reference a grid in TargetProperty (furthermore there are 3 levels of transforms: RenderTransform, TransformGroup and ScaleTransform and you referenced 2 only)