1

I want a 'marching ants' line symbol with a white background and gray foreground. To make custom symbols, see the API Reference, and for examples see the symbol gallery.

I got one in a single color easily enough like this:

    <esri:LineSymbol x:Key="ReferencePointLeaderLineSymbol">
        <esri:LineSymbol.ControlTemplate>
            <!-- see the API docs for the Symbol class. A LineSymbol is expected to have a Path element
            with the name Element at the root of the template. A VisualStateGroup called 'CommonStates' 
            can use a state called 'Normal' for normal visual states -->
            <ControlTemplate xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows">
                <Grid>
                    <vsm:VisualStateManager.VisualStateGroups>
                        <vsm:VisualStateGroup x:Name="CommonStates">
                            <vsm:VisualState x:Name="Normal">
                                <Storyboard RepeatBehavior="Forever">
                                    <DoubleAnimation BeginTime="0:0:0" Storyboard.TargetName="Element" Storyboard.TargetProperty="StrokeDashOffset" To="1000" Duration="0:3:0" />
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                    </vsm:VisualStateManager.VisualStateGroups>
                    <Path x:Name="Element" StrokeDashArray="2,1" StrokeDashOffset="0" Stroke="Gray" StrokeThickness="2" />
                </Grid>
            </ControlTemplate>
        </esri:LineSymbol.ControlTemplate>
    </esri:LineSymbol>

And I mocked up a static version of what I want like:

    <Grid HorizontalAlignment="Left" Margin="8,8,0,0" Width="100" Height="100" VerticalAlignment="Top" Background="ForestGreen"> 
        <Line StrokeDashArray="1.6,.4" StrokeDashOffset="0.15" Stroke="White" StrokeThickness="3" X1="10" Y1="10" X2="90" Y2="90" />
        <Line StrokeDashArray="2,1" StrokeDashOffset="0" Stroke="Gray"  StrokeThickness="2" X1="10" Y1="10" X2="90" Y2="90" />
    </Grid>

Which looks like this:

example static symbol

But the problem I am facing is that by the above docs, a line symbol needs a SINGLE Path element with the name 'Element' at its root. How can I do a 'white background, grey foreground' symbol without using two Paths? And how would I animate them to march as a unit?

1

Here is an example: a Path is needed.

<esri:LineSymbol x:Key="AnimLS">
                <esri:LineSymbol.ControlTemplate>
                    <ControlTemplate>
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal">
                                        <Storyboard RepeatBehavior="Forever">
                                            <DoubleAnimation BeginTime="0:0:0" Storyboard.TargetName="Element" 
                                                                                 Storyboard.TargetProperty="StrokeDashOffset" 
                                                                                 To="1000" Duration="0:3:0" />
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <!--For polyline and polygon template, a Path 
                                                    element with the name "Element" is required-->
                            <Path x:Name="Element" StrokeDashArray="2,1" StrokeDashOffset="0"
                                                     Stroke="Green" StrokeThickness="5" />
                        </Grid>
                    </ControlTemplate>
                </esri:LineSymbol.ControlTemplate>
            </esri:LineSymbol>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.