Silverlight 2b2 中自定义控件中子控件MouseEnter事件改变VisualState的问题

 在Silverlight 2 beta2中，开发一个自定义控件ActionSpotButton，该控件包含一个背景矩形rectBackground和一个按钮hotButton。想当用户鼠标移动到Button上时改变背景矩形的颜色。

     

 

generic.xaml文件内容如下：

1. <Style TargetType="local:ActionSpotButton">
2.         <Setter Property="IsEnabled" Value="True" />
3.         <Setter Property="Template">
4.             <Setter.Value>
5.                 <ControlTemplate TargetType="local:ActionSpotButton">
6.                     <Canvas x:Name="RootElement" Background="WhiteSmoke">
7.                         <vsm:VisualStateManager.VisualStateGroups>
8.                             <vsm:VisualStateGroup x:Name="CommonStates">
9.                                 <vsm:VisualState x:Name="Normal" >
10.                                     <Storyboard>
11.                                         <DoubleAnimation BeginTime="00:00:00" From="0" To="0.5" Duration="0" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.Opacity)" />
12.                                     </Storyboard>
13.                                 </vsm:VisualState>
14.                                 <vsm:VisualState x:Name="MouseOver1">
15.                                     <Storyboard>
16.                                         <DoubleAnimation BeginTime="00:00:00" From="0" To="1" Duration="0" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.Opacity)" />
17.                                     </Storyboard>
18.                                 </vsm:VisualState>
19.                             </vsm:VisualStateGroup>
20.                         </vsm:VisualStateManager.VisualStateGroups>
22.                         <Canvas x:Name="HotArea">
23.                             <Rectangle Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Fill="Green" x:Name="image" />
24.                             <Button RenderTransformOrigin="0,0" Content="Hot Button" Cursor="Hand" x:Name="HotButton" Opacity="0.5" Canvas.Left="20" Canvas.Top="20" Width="160" Height="160" />
25.                         </Canvas>
26.                     </Canvas>
27.                 </ControlTemplate>
28.             </Setter.Value>
29.         </Setter>
30.     </Style>

    如果其中HotButton的范围与rectBackground重合,则鼠标移动到hotButton上虽然出发MouseEnter事件,但不会使得rectBackground改变颜色。严格的说，Mouse 必须先经过/滑动过Control中除hotButton以外的区域，然后再滑动到hotButton上时才会使rectBackground改变颜色。

 

    在这个控件中，如果要想hotButton和rectBackground重合，而又要使得鼠标移动到hotButton上rectBackground改变颜色，可以将Control的大小扩大，且将rectBackground和hotButton的位置向右下方做同等位移（位移大小10~20，是否产生效果还与鼠标移动的速度有关）。

 

1.  public override void OnApplyTemplate()
2.         {
3.             base.OnApplyTemplate();
5.             // remove events
6.             if (_hotButton != null)
7.             {
8.                 _hotButton.Click -= new RoutedEventHandler(_hotButton_Click);
9.                 _hotButton.MouseEnter -= new MouseEventHandler(_hotButton_MouseEnter);
10.                 _hotButton.MouseLeave -= new MouseEventHandler(_hotButton_MouseLeave);
11.             }
13.             _hotButton = this.GetTemplateChild("HotButton") as Button;
14.             image = this.GetTemplateChild("image") as Rectangle;
15.             rootElemnt = this.GetTemplateChild("HotArea") as Canvas;
17.             // add events
18.             if (_hotButton != null)
19.             {
20.                 _hotButton.Click += new RoutedEventHandler(_hotButton_Click);
21.                 _hotButton.MouseEnter += new MouseEventHandler(_hotButton_MouseEnter);
22.                 _hotButton.MouseLeave += new MouseEventHandler(_hotButton_MouseLeave);
23.             }
25.             this.SetValue(Canvas.LeftProperty, -20.0);
26.             this.SetValue(Canvas.TopProperty, -20.0);
27.             this.Width += 40.0;
28.             this.Height += 40.0;
29.             rootElemnt.SetValue(Canvas.LeftProperty, 20.0);
30.             rootElemnt.SetValue(Canvas.TopProperty, 20.0);
31.         }