CODEWITHSUNDEEP
c#wpftriggersstyles
nevada_scout
nevada_scout

Reputation: 983

Hover over label change rectangle background gradient

I have a rectange with several labels and images over it, and I have it so that when the user hovers their mouse 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 that is over the rectangle the background gradient does not show.

I want to make it so that the gradient shows when hovering over the labels as well as the rectangle.

Is this possible?

Upvotes: 0

Views: 1179

Answers (2)

LongZheng
LongZheng

Reputation: 1893

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

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

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

Upvotes: 0

brunnerh
brunnerh

Reputation: 185280

If by "over" you mean overlayed and not above you can wrap the contents in a Grid (for above you could do this as well i guess, but you should define rows & columns) and use a DataTrigger which triggers if the mouse is over the wrapping grid and not only the rectangle itself, e.g.:

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

Alternatively if the label is overlayed you can make mouse events pass through the Label by setting IsHitTestVisible to false.

Upvotes: 1

Related Questions