现在的位置: 首页 > 综合 > 正文

自定义Symbols的ControlTemplate模板(上)

2013年10月01日 ⁄ 综合 ⁄ 共 3251字 ⁄ 字号 评论关闭

在使用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>

抱歉!评论已关闭.