Geek Answers Handbook

Hover over rectangle label change frame

I have a rectangle with several captions and images above it, and I have it so that when the user hovers over the rectangle, the background changes to a gradient:

<Rectangle Height="88" HorizontalAlignment="Left" Margin="54,28,0,0" Name="rectangle2" VerticalAlignment="Top" Width="327" Cursor="Hand"> <Rectangle.Style> <Style TargetType="{x:Type Rectangle}"> <Setter Property="Fill" Value="Transparent" /> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Fill"> <Setter.Value> <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"> <GradientStop Color="White" Offset="0.0" /> <GradientStop Color="#eee" Offset="1" /> </LinearGradientBrush> </Setter.Value> </Setter> </Trigger> </Style.Triggers> </Style> </Rectangle.Style> </Rectangle>

However, when I hover over one of the labels above the rectangle, the background gradient is not displayed.

I want to make the gradient appear when you hover over the labels, as well as the rectangle.

Is it possible?

0
source share
2 answers

If "over" you mean overlay, and not above, you can wrap the contents in a Grid (since you could do this above, I think, but you have to define rows and columns) and use a DataTrigger that runs if the mouse located above the wrapper grid, not just the rectangle itself, for example:

 <Grid HorizontalAlignment="Center" VerticalAlignment="Center"> <Rectangle Width="100" Height="100" StrokeThickness="1" Stroke="Black"> <Rectangle.Style> <Style TargetType="{x:Type Rectangle}"> <Setter Property="Fill" Value="Transparent" /> <Style.Triggers> <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType=Grid}}" Value="True"> <Setter Property="Fill"> <Setter.Value> <!-- Brush here --> </Setter.Value> </Setter> </DataTrigger> </Style.Triggers> </Style> </Rectangle.Style> </Rectangle> <Label Name="label" Content="This is a Label" /> </Grid>

Otherwise, if the label is superimposed, you can make mouse events through the label by setting IsHitTestVisible to false .

+1
source

Since the other elements are on top of the rectangle, I think you will need to hook into the PreviewMouseMove event for the rectangle.

UIELement.PreviewMouseMove: http://msdn.microsoft.com/en-us/library/system.windows.uielement.previewmousemove.aspx

Event Preview: http://msdn.microsoft.com/en-us/library/ms752279.aspx

0
source

More articles:


All Articles