MouseLeave response of a Silverlight 5 grid group

Use Silverlight 5 as a user control, which is to draw several squares with a grid and display several transparent images. The effect is to show the middle one, click on the displayed image and then display the other several pictures together, the mouse immediately after the user control range automatically hide the image displayed after the click

The XAML code is as follows:

       <grid x:name= "oviewimg" height= "280" width= "280" > <Grid.RowDefinitions> <rowdefini tion height= "Panax notoginseng" ></RowDefinition> <RowDefinition></RowDefinition> <rowdefini            tion height= "Panax notoginseng" ></RowDefinition> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <columndefinition width= "Panax Notoginseng" ></ColumnDefinition> <columndefinition></columndefinitio        n> <columndefinition width= "Panax Notoginseng" ></ColumnDefinition> </Grid.ColumnDefinitions> <image x:name= "img01" source= "/img/img01.png" grid.row= "0" grid.column= "0"/> <image x:name= "img02" Sourc E= "/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> 

The goal is: the initial hidden img01-img04 only show oimage pictures, click Oimage and then show this picture, then the mouse left the oviewimg range after hiding img01-img04.

I would ideally write down the following code:

        public Sclampitem (Mlabmpitem labmp)         {        &N Bsp   This.oImage.MouseLeftButtonDown + = oyiboycode_mouseleftbuttondown;            This.oViewImg.MouseLeave + = oyiboycode_mouseleave;</span>       }        void Oyiboycode_mouseleftbuttondown (object sender, MouseButtonEventArgs e)         {    & nbsp       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 O Yiboycode_mouseleave (object sender, MouseEventArgs e) </span>       {            this.img00.Visibility = System.Windows.Visibility.Collaps ed;            this.img02.Visibility = system.windows.visibility.collapsed;    & nbsp       this.img20.Visibility = system.windows.visibility.collapsed;          & nbsp this.img22.Visibility = system.windows.visibility.collapsed;       }

And then the crazy thing came. The mouse left oimage immediately hides four pictures, but not as I imagined, moved out of the oviewimg range to trigger the MouseLeave event. After asked the Niang to know, the grid does not have the background/background color case is unable to trigger the event, that is, the mouse moves to the white space between Oimage and img01-img02 when the MouseLeave event is triggered. So hard to find the mouse position search delusion by calculating the position of the mouse to determine whether the mouse in the grid range and other ways to trigger the hidden operation. Busy a morning, noon meal suddenly think of ... No background and background color can not be triggered, I give it a background color is not OK. Then, after eating, write down the following code.

        Public Sclampitem (Mlabmpitem labmp) {This.oImage.MouseLeftButtonDown + = Oyiboycode_mouseleftbut            Tondown;        This.oViewImg.MouseLeave + = Oyiboycode_mouseleave; } void Oyiboycode_mouseleftbuttondown (object sender, MouseButtonEventArgs e) {This.img00.Visibil            ity = 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; Give the grid a fully transparent background color to ensure that the entire grid range can trigger event This.oViewImg.SetValue (Grid.backgroundproperty, New SolidColorBrush (        Color.FromArgb (0, 255, 255, 255))); } void Oyiboycode_mouseleave (object sender, MouseEventArgs e) {this.img00.Visibility = System.wi Ndows.            visibility.collapsed;            this.img02.Visibility = System.Windows.Visibility.Collapsed; This.img20.Visibility = System.Windows.VisIbility.            Collapsed;            this.img22.Visibility = System.Windows.Visibility.Collapsed;        Removes the Grid background color to ensure that the img01-img04 hidden area does not trigger event This.oViewBigImg.ClearValue (Grid.backgroundproperty); }

For this toss a morning, lost, as a record of experience, save the next time to waste brain and time

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

MouseLeave response of a Silverlight 5 grid group