自定义Symbols的ControlTemplate模板（上）

最新推荐文章于 2022-12-20 23:42:40 发布

原创最新推荐文章于 2022-12-20 23:42:40 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#C# #Silverlight #样式 #API

arcgis for silverlight 专栏收录该内容

5 篇文章

订阅专栏

本文介绍在ArcGIS for Silverlight API中如何自定义点、线、面的闪烁标注效果，包括XML配置示例及视觉效果说明。

在使用arcgis for silverlight api开发的过程中，难免需要去自定义标注，以下是比较常用的几种标注：

1.点闪烁标注：

  <esri:MarkerSymbol x:Key="syWarningMarker">
            <esri:MarkerSymbol.ControlTemplate>
                <ControlTemplate>
                    <Canvas>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal">
                                    <Storyboard RepeatBehavior="Forever">
                                        <DoubleAnimation BeginTime="00:00:00" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)" From="1" To="10" Duration="00:00:01" />
                                        <DoubleAnimation BeginTime="0:0:0" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)" From="1" To="10" Duration="00:00:01" />
                                        <DoubleAnimation BeginTime="00:00:00" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.Opacity)" From="1" To="0" Duration="00:00:01" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <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>
                        <Ellipse Height="10" Width="10" Canvas.Left="-5" Canvas.Top="-5" Fill="#FFFF0000" x:Name="ellipse1" />
                    </Canvas>
                </ControlTemplate>
            </esri:MarkerSymbol.ControlTemplate>
        </esri:MarkerSymbol>

效果图：

可以将Ellipse元素替换成Image，则可以实现围绕着图片闪烁的标注。

2.面闪烁标注：

esri:FillSymbol x:Key="syRenderFill">
            <esri:FillSymbol.ControlTemplate>
                <ControlTemplate x:Name="CustomPolygonTemplate">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal">
                                    <Storyboard>
                                        <ColorAnimation Storyboard.TargetName="Element"
                                                Storyboard.TargetProperty="(Fill).(Color)"
                                                To="Transparent" Duration="0:0:0.1" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ColorAnimation Storyboard.TargetName="Element"
                                                Storyboard.TargetProperty="(Stroke).(Color)"
                                                To="#8800FFFF" Duration="0:0:0.1" />
                                    </Storyboard>
                                </VisualState>                              
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Path x:Name="Element" Stroke="Transparent" Fill="Transparent"
                                StrokeStartLineCap="Round" StrokeThickness="2"
                                StrokeLineJoin="Round" StrokeEndLineCap="Round">
                            <Path.RenderTransform>
                                <ScaleTransform x:Name="stPath" />
                            </Path.RenderTransform>
                        </Path>
                    </Grid>
                </ControlTemplate>
            </esri:FillSymbol.ControlTemplate>
        </esri:FillSymbol>

3.线闪烁标注：

<esri:LineSymbol x:Key="syQueryLine">
            <esri:LineSymbol.ControlTemplate>
                <ControlTemplate>
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal">
                                    <Storyboard RepeatBehavior="Forever">
                                        <ColorAnimation Storyboard.TargetName="Element"
                                                Storyboard.TargetProperty="(Stroke).(Color)"
                                                To="#8800FFFF" Duration="0:0:1" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Path x:Name="Element" Stroke="#880000FF" Fill="Transparent"
                                StrokeStartLineCap="Round" StrokeThickness="2"
                                StrokeLineJoin="Round" StrokeEndLineCap="Round"/>
                    </Grid>
                </ControlTemplate>
            </esri:LineSymbol.ControlTemplate>
        </esri:LineSymbol>