How to do different marker symbol shapes

DonFreeman · ‎02-28-2013

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>

wangzhifang · ‎02-28-2013

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.

DonFreeman · ‎03-01-2013

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>

wangzhifang · ‎03-05-2013

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.

DominiqueBroux · ‎03-05-2013

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>

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"/>

DonFreeman · ‎03-06-2013

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.

DominiqueBroux · ‎03-06-2013

Easier to animate the ScaleTransform of the root grid.

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

DonFreeman · ‎03-06-2013

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?

DonFreeman · ‎03-06-2013

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>

DominiqueBroux · ‎03-06-2013

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)