Silverlight 5 Grid组的MouseLeave响应

用Silverlight 5作个用户控件，即是用Grid画几个格子，分别显示几张透明图片。效果是显示中间那张，点击显示的图片后将其它几张图片一起显示出来，鼠标立刻这个用户控件范围后自动隐藏点击后显示出来的图片

xaml代码如下：

       <Grid x:Name="oViewImg" Height="280" Width="280">
        <Grid.RowDefinitions>
            <RowDefinition Height="37"></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition Height="37"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="37"></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition Width="37"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Image x:Name="img01" Source="/img/img01.png" Grid.Row="0" Grid.Column="0"/>
        <Image x:Name="img02" Source="/img/img02.png" Grid.Row="0" Grid.Column="2"/>
        <Image x:Name="img02" Source="/img/img03.png" Grid.Row="2" Grid.Column="0"/>
        <Image x:Name="img03" Source="/img/img04.png" Grid.Row="2" Grid.Column="2"/>
        <Image x:Name="oImage" Source="/img/temp/img.png" Grid.Column="1" Grid.Row="1" Height="206"/>
        </Grid>

目标是：初始隐藏img01-img04只显示oImage图片，点击oImage后再显示出这次张图片，然后鼠标离开oViewImg范围后隐藏img01-img04。

我很理想的写下以下代码：

        public scLampItem(mLabmpItem labmp)
        {
            this.oImage.MouseLeftButtonDown += oyiboyCode_MouseLeftButtonDown;
           this.oViewImg.MouseLeave += oyiboyCode_MouseLeave;</span>
        }

        void oyiboyCode_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            this.img00.Visibility = System.Windows.Visibility.Visible;
            this.img02.Visibility = System.Windows.Visibility.Visible;
            this.img20.Visibility = System.Windows.Visibility.Visible;
            this.img22.Visibility = System.Windows.Visibility.Visible;
        }
        void oyiboyCode_MouseLeave(object sender, MouseEventArgs e)</span>
        {
            this.img00.Visibility = System.Windows.Visibility.Collapsed;
            this.img02.Visibility = System.Windows.Visibility.Collapsed;
            this.img20.Visibility = System.Windows.Visibility.Collapsed;
            this.img22.Visibility = System.Windows.Visibility.Collapsed;
        }

然后抓狂的事来了。鼠标离开oImage就立刻隐藏了四张图片，而不是我想象的那样，移出了oViewImg的范围才触发MouseLeave事件。问了度娘后才知道，Grid没有背景/背景色的情况下是不能触发事件的，也就是鼠标移到oImage和img01-img02之间的空白区域时就触发了MouseLeave事件。为此猛钻牛角尖去找鼠标位置搜索妄想通过计算鼠标的位置来进行判断鼠标是否在Grid范围之类的办法去来触发隐藏操作。忙乎了一上午，中午吃饭时突然想到...没背景和背景色的情况下不能触发，我给它个背景色不就行了吗。然后吃完饭后写下了以下代码。

        public scLampItem(mLabmpItem labmp)
        {
            this.oImage.MouseLeftButtonDown += oyiboyCode_MouseLeftButtonDown;
            this.oViewImg.MouseLeave += oyiboyCode_MouseLeave;
        }

        void oyiboyCode_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            this.img00.Visibility = System.Windows.Visibility.Visible;
            this.img02.Visibility = System.Windows.Visibility.Visible;
            this.img20.Visibility = System.Windows.Visibility.Visible;
            this.img22.Visibility = System.Windows.Visibility.Visible;
	    //给Grid一个完全透明的背景色，以保证整Grid范围都能触发事件
	    this.oViewImg.SetValue(Grid.BackgroundProperty, new SolidColorBrush(Color.FromArgb(0, 255, 255, 255)));
        }
        void oyiboyCode_MouseLeave(object sender, MouseEventArgs e)
        {
            this.img00.Visibility = System.Windows.Visibility.Collapsed;
            this.img02.Visibility = System.Windows.Visibility.Collapsed;
            this.img20.Visibility = System.Windows.Visibility.Collapsed;
            this.img22.Visibility = System.Windows.Visibility.Collapsed;
            //移除Grid背景色，保证img01-img04隐藏后的区域不会触发事件
	    this.oViewBigImg.ClearValue(Grid.BackgroundProperty);
        }

为这个折腾了一上午，亏死了，作为经验记录一下，省得下次还这样浪费脑力和时间

版权声明：本文为博主原创文章，未经博主允许不得转载。