使用blend制作地图区域改变颜色动画效果

这2天要做一个地图效果，当鼠标划过地图上一个区域时，该区域的颜色变化，然后可以触发鼠标事件。但是又不能用arcgis sl的api，其实用这个要实现非常简单，用graphiclayer就可以了，但是不用的话，就有点麻烦。因为每个区域都是不规则的形状，在winform或者.net里面要用的话，请教了很多哥老关，提到了用directx或者alpha通道来做，现在的水平确实达不到。后来获得了一个chinaren以前的一个类似的效果的源码，但是没有脚本，不好改，想了一下，用SL的话，其实也可以实现这种效果，然后百度了相关的文章，找到了一篇文章。

http://topic.csdn.net/u/20110415/11/48a251e5-c497-4be5-b59e-88f1deb95312.html

 

看了之后稍微改了一下，就可以了。因为地图区域画起来非常麻烦，所以选择在blend里面画path把区域一个一个手工画了出来。动画效果用的vsm，因为只需要提供鼠标移过该区域的效果。

比较麻烦的地方在于自适应分辨率的考虑。在改变浏览器大小之后，就乱套了。网上有说法用grid，或者在sizechange事件里面改。我懒惰的直接在网页里面把object的width和heigth给固定了。。就OK了..

<ControlTemplate x:Name="btn_shannan" TargetType="Button">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <ColorAnimation Duration="0:0:0.5" BeginTime="0:0:0" To="#FFE4E574" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="pathshannan" d:IsOptimized="True"/>
                                    <ColorAnimation Duration="0:0:0.5" BeginTime="0:0:0" To="#FF969755" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="pathshannan" d:IsOptimized="True"/>
                                    <ColorAnimation Duration="0:0:0.5" BeginTime="0:0:0" To="#FFD8DA6C" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="pathshannan" d:IsOptimized="True"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed"/>
                            <VisualState x:Name="Disabled"/>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Path x:Name="pathshannan" Data="｛StaticResource Paht_shannan}“ Height="114.375" Margin="328.833,0,199.542,51.875" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" Width="111.625" d:LayoutOverrides="Height" VerticalAlignment="Bottom">
                        <Path.Fill>
                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                <GradientStop Color="#FFA5DA82" Offset="0"/>
                                <GradientStop Color="#FF65B639" Offset="1"/>
                                <GradientStop Color="#FF92CA70" Offset="0.474"/>
                            </LinearGradientBrush>
                        </Path.Fill>
                    </Path>
                </Grid>
            </ControlTemplate>

上面是其中一个的效果，其它也一样，只是PATH不同。代码里面的PATH没贴，这个path得来，是在blend里面先加载了地图底图，然后一个区域一个区域的画出来的，这么做就不存在坐标系了，但这不是这次需要考虑的。

最后遇到个问题，有几个区域鼠标移上去不是在所有范围都会引发动画，这估计和我PATH没画好有关系，因为按道理是不应该出这种问题的..

其实原理很简单，要做不规则的button，就是button的controltemplate是一个border，直接把这个去掉了用自己的就可以了，这在那个帖子里面也讲的很清楚。因为controltemplate，所以理论上讲control控件都可以这样修改，除了Usercontrol，这个可以看一下sl的帮助文档。