Select to view content in your preferred language

Convert SimpleMarkerSymbol Strobe To SimpleLineSymbol Strobe

2476
3
03-01-2011 03:15 AM
JoshuaCorcoran
Emerging Contributor
Hello,

I am trying to convert the code provided below which currently makes a MarkerSimple strobe when it is selected to make a line symbol strobe when it is selected. I am still new to WPF and animations are not really my specialty any help would be appreciated.

esri:MarkerSymbol x:Key="StrobeMarkerSymbol">
        <esri:MarkerSymbol.ControlTemplate>
          <ControlTemplate>
            <Canvas>
              <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                  <VisualState x:Name="Selected">
                    <Storyboard RepeatBehavior="Forever">
                      <DoubleAnimation BeginTime="0" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleX)" From="1" To="10" Duration="00:00:01" />
                      <DoubleAnimation BeginTime="0" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleY)" From="1" To="10" Duration="00:00:01" />
                      <DoubleAnimation BeginTime="0" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.Opacity)" From="1" To="0" Duration="00:00:01" />
                    </Storyboard>
                  </VisualState>
                  <!--If normal state is not specified, the animation will keep going until a mouse out. Keep it empty to transition back to original symbol. -->
                  <VisualState x:Name="Normal" />
                </VisualStateGroup>
              </VisualStateManager.VisualStateGroups>
              <!--Strobe ellipse-->
              <!--Note that IsHitTestVisible="False" on the strobe symbol, so only the static ellipse will trigger mouse over/mouse out-->
              <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="#00FF0000" />
                    <GradientStop Color="#FFFF0000" Offset="0.25"/>
                    <GradientStop Color="#00FF0000" Offset="0.5"/>
                    <GradientStop Color="#FFFF0000" Offset="0.75"/>
                    <GradientStop Color="#00FF0000" Offset="1"/>
                  </RadialGradientBrush>
                </Ellipse.Fill>
              </Ellipse>
              <!--Static symbol on top-->
              <Ellipse Height="10" Width="10" Canvas.Left="-5" Canvas.Top="-5" Fill="#FFFF0000" x:Name="ellipse1"/>
            </Canvas>
          </ControlTemplate>
        </esri:MarkerSymbol.ControlTemplate>
      </esri:MarkerSymbol>
0 Kudos
3 Replies
JenniferNery
Esri Regular Contributor
You can look at the animated line symbol in this sample: http://help.arcgis.com/en/webapi/silverlight/samples/start.htm#CustomSymbols.

I think you should be able modify it using the Storyboard from StrobeMarkerSymbol by updating TargetName ("Element") and adding RenderTransform with ScaleTransform to your Path.
0 Kudos
dotMorten_esri
Esri Notable Contributor
The only thing you would be able to animate that would give some kind of strobe effect would be the line width. I doubt it will look very "stroby" though.
0 Kudos
DanielWalton
Frequent Contributor
Just animate the color. That would be kinda stroby. 🙂
0 Kudos