Saturday, June 22, 2013

Pulsating Point Symbol for ArcGIS Silverlight Applications

There was a need to display a pulsating/flashing point symbol in one of my Silverlight Application.

Here is the code to do it. You can change the color and timing and make it look better.

Use this "AnimatedPointSymbol" in the code behind file.

Cheers
Anand

========= XAML File content ===========

<esri2009:MarkerSymbol x:Name="AnimatedPointSymbol" OffsetX="12" OffsetY="12">
<esri2009:MarkerSymbol.ControlTemplate>
<ControlTemplate xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid x:Name="RootElement" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<ScaleTransform ScaleX="1" ScaleY="1" />
</Grid.RenderTransform>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard RepeatBehavior="Forever">
<DoubleAnimation BeginTime="0:0:0" Storyboard.TargetName="RootElement" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)" To="1.5" Duration="0:0:1" />
<DoubleAnimation BeginTime="0:0:0" Storyboard.TargetName="RootElement" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)" To="1.5" Duration="0:0:1" />
<DoubleAnimation BeginTime="0:0:0" Storyboard.TargetName="RootElement" Storyboard.TargetProperty="(UIElement.Opacity)" From="1" To="0.5" Duration="00:00:01" />
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver">
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"></VisualState>
<VisualState x:Name="Selected">
<Storyboard RepeatBehavior="Forever">
<DoubleAnimation BeginTime="0:0:0" Storyboard.TargetName="RootElement" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)" To="1.5" Duration="0:0:1" />
<DoubleAnimation BeginTime="0:0:0" Storyboard.TargetName="RootElement" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)" To="1.5" Duration="0:0:1" />
<DoubleAnimation BeginTime="0:0:0" Storyboard.TargetName="RootElement" Storyboard.TargetProperty="(UIElement.Opacity)" From="1" To="0.5" Duration="00:00:01" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Ellipse x:Name="Ellipse" Width="24" Height="24">
<Ellipse.Fill>
<RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
<GradientStop Color="#EEFF0000" Offset="0.0" />
<GradientStop Color="#EEFFFF00" Offset="0.5" />
<GradientStop Color="#EEFF0000" Offset="1.0" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Grid>
</ControlTemplate>
</esri2009:MarkerSymbol.ControlTemplate>
</esri2009:MarkerSymbol>

All Blogs so far ...