nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

How to do different marker symbol shapes

DonFreeman

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>

Najděte více příspěvků označených jako

Accepted answers

All comments

DominiqueBroux

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)

DonFreeman

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>

DonFreeman

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?

DominiqueBroux

Easier to animate the ScaleTransform of the root grid.

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

DonFreeman

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

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

wangzhifang

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.

DonFreeman

<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

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.

Připojte se k diskusi

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.

Rychlé odkazy

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.