Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change multiple elements with one mouseover trigger

Tags:

wpf

I want to change the color of 2 elements inside a stack panel if the users mouse hovers over it. Is there any way to do so in wpf because I´d like to keep my c# code clean from "styling things".

This is what I´ve done so far. Its simply adding triggers to each element inside the stack panel. But thats not quiet ideal because you need to hover over each element to chnage its color.

                <StackPanel Orientation="Horizontal">
                <StackPanel.Resources>
                    <Style TargetType="{x:Type FrameworkElement}">
                        <Setter Property="Label.Foreground" Value="#FF0296AA" />
                        <Setter Property="Rectangle.Fill" Value="#FF0296AA" />
                        <Style.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Label.Foreground" Value="#FFA6FAFA" />
                                <Setter Property="Rectangle.Fill" Value="#FFA6FAFA" />
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                    <Style TargetType="{x:Type Label}" BasedOn="{StaticResource {x:Type FrameworkElement}}" />
                    <Style TargetType="{x:Type Rectangle}" BasedOn="{StaticResource {x:Type FrameworkElement}}" />
                </StackPanel.Resources>
                <Label Content="Create an account" VerticalAlignment="Top"  Padding="0,1,5,1" FontSize="13" Height="21" Cursor="Hand"/>
                <Rectangle Height="12" Margin="0,4,0,0" Width="15" RenderTransformOrigin="0.5,0.5">
                    <Rectangle.OpacityMask>
                        <ImageBrush ImageSource="Images/Controls/external-link-mask.png" Stretch="Uniform"/>
                    </Rectangle.OpacityMask>
                </Rectangle>
            </StackPanel>
like image 733
TomTomB Avatar asked Feb 10 '26 15:02

TomTomB


1 Answers

Sticking close to your existing style, just replace the trigger with a DataTrigger that targets the parent StackPanel

<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type StackPanel}},Path=IsMouseOver}" Value="True">
    <Setter Property="Label.Foreground" Value="#FFA6FAFA" />
    <Setter Property="Rectangle.Fill" Value="#FFA6FAFA" />
</DataTrigger>

Additionally, you may want to give the StackPanel a Background="Transparent" so it will react to mouse over for the whole area and not only when the mouse is exactly above the child controls hit area.

like image 161
grek40 Avatar answered Feb 12 '26 03:02

grek40