Hello,

I want to generate a Grid with a MouseOver-Highlighting effect:

 <Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="30"/>
        <RowDefinition Height="30"/>
        <RowDefinition Height="30"/>
        <RowDefinition Height="30"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="auto"/>
        <ColumnDefinition Width="auto"/>
        <ColumnDefinition Width="auto"/>
        <ColumnDefinition Width="auto"/>
    </Grid.ColumnDefinitions>
    <Rectangle x:Name="mouseoverRect" Fill="#ff0000" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="4" MouseEnter="Rectangle_MouseEnter" MouseLeave="Rectangle_MouseLeave" Opacity="0"/>
    <HyperlinkButton Grid.Column="0" Grid.Row="0" x:Name="myLink" NavigateUri="http://www.silverlight.net" Content="Silverlight" Foreground="White"/>
</Grid>

The Events are defined as follows:
Private Sub Rectangle_MouseEnter(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseEventArgs)
    Dim myRect As Rectangle = CType(sender, Rectangle)
    myRect.Opacity = 0.5
End Sub

Private Sub Rectangle_MouseLeave(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseEventArgs)
    Dim myRect As Rectangle = CType(sender, Rectangle)
    myRect.Opacity = 0.0
End Sub

This works rather well, the only problem is that if you move the mouse over the <TextBlock> the MouseEnter-Event for the <Rectangle> will not fire, which is rather ugly.
If I draw the rectangle after the <TextBlock> then the <HyperlinkButton> cannot be clicked anymore -> no hyperlink :(

One possible solution would be to get rid of the <Rectangle> and change the background of the <Grid> row, but I have found no way to do that.
Do you have any idea to create a mouse-over effect that affects the whole row without losing the hyperlink-ability?

Thanks in advance!
buckelkratz

Hi,

You can attach the Rectangle_MouseEnter and Rectangle_MouseLeave event handlers to the mouse enter and leave events of your HyperlinkButton, and in the event handlers reference the rectangle by name (mouseoverRect) instead:

XAML

<HyperlinkButton Grid.Column="0" Grid.Row="0" x:Name="myLink" NavigateUri="http://www.silverlight.net" Content="Silverlight" Foreground="White" MouseEnter="Rectangle_MouseEnter" MouseLeave="Rectangle_MouseLeave"/>

Event Handlers

Private Sub Rectangle_MouseEnter(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseEventArgs)
    Dim myRect As Rectangle = mouseoverRect
    myRect.Opacity = 0.5
End Sub

Private Sub Rectangle_MouseLeave(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseEventArgs)
    Dim myRect As Rectangle = mouseoverRect
    myRect.Opacity = 0.0
End Sub

Please mark this response as answered if it helps.

Good luck,

Sherwin