The MouseLeave response of the Silverlight 5 Grid group, silverlightgrid

The MouseLeave response of the Silverlight 5 Grid group, silverlightgrid

Use Silverlight 5 as a user control, that is, draw several grids with a Grid to display several transparent images respectively. The effect is to show the middle image. Click the displayed image and then display the other images together. Click the user control to automatically hide the image displayed after the click.

The xaml code is as follows:

       <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>

The goal is to initially hide the img01-img04 to show only the oImage image, click the oImage and then show this image, and then move the mouse out of the oViewImg range to hide the img01-img04.

I would like to write the following code:

        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;        }

Then something went crazy. When the mouse leaves the oImage, the four images are immediately hidden, instead of being removed from the oViewImg to trigger the MouseLeave event. After I asked du Niang to know that Grid does not have a background/background color is not able to trigger the event, that is, when the mouse moves to the blank area between the oImage AND THE img01-img02 triggered the MouseLeave event. To this end, I am eager to search for the mouse position. I want to trigger the hidden operation by calculating the mouse position to determine whether the mouse is in the Grid range. After a very busy morning, I suddenly thought that I could not trigger it when I had dinner at noon without a background or background color. Can I just give it a background color. After dinner, I wrote the following code.

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. im1_2.visibility = System. windows. visibility. visible; this. img‑visibility = System. windows. visibility. visible; this. img22.Visibility = System. windows. visibility. visible; // a completely transparent background color for the Grid to ensure that the event can be triggered in the entire Grid range. 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. im1_2.visibility = System. windows. visibility. collapsed; this. img‑visibility = System. windows. visibility. collapsed; this. img22.Visibility = System. windows. visibility. collapsed; // remove the Grid background color to ensure that hidden areas of the img01-img04 do not trigger the event this. oViewBigImg. clearValue (Grid. backgroundProperty );}

I 've been tossing for this one morning and lost. I 've recorded it as an experience, saving my mind and time.

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.