Trigger animations of other controls-CodePudding

I'm currently experimenting with WPF/XAML animations. In doing so, the question arose whether it was possible: by hovering over one control element, to trigger the animation of another control element?

Example: When I hover over Label1, the background of Label2 turns yellow and Label3 turns red.

My Try:

<UserControl.Resources>

    <Style TargetType="{x:Type Label}" x:Key="styleOfButtonOne">
        <Setter Property="Background" Value="White"/>
        
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="Red" TargetName="btn_Two"/>
                <Setter Property="Background" Value="Green" TargetName="btn_Three"/>
            </Trigger>
        </Style.Triggers>
    </Style>

</UserControl.Resources>


<Grid>
    <StackPanel Orientation="Vertical">
        <Label x:Name="btn_One" Content="Button One" Style="{StaticResource styleOfButtonOne}"/>
        <Label x:Name="btn_Two" Content="Button Two"/>
        <Label x:Name="btn_Three" Content="Button Three"/>
    </StackPanel>
</Grid>

CodePudding user response：

I found the solution by using ControlTemplate, ControlTemplate.Trigger and SourceName of Trigger.

<Style TargetType="{x:Type ContentControl}"  x:Key="ControlTest">

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate>
                <StackPanel Background="Red">
                    <Label Content="Button 1" Name="lblOne"/>
                    <Label Content="Button 2" Name="lblTwo"/>
                    <Label Content="Button 3" Name="lblThree"/>
                </StackPanel>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True" SourceName="lblOne">
                        <Setter Property="Background" Value="GreenYellow" TargetName="lblTwo"/>
                        <Setter Property="Background" Value="OrangeRed" TargetName="lblThree"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

For using:

<ContentControl Grid.Row="1" Style="{StaticResource ControlTest}"/>

Is there more solutions?

CodePudding user response：

In your case i would just solve this programmatically.

private void btn_oneEnter(object sender, MouseEventArgs e) {
    btn_two.Background = new SolidColorBrush(Colors.Red); //To whatever color you want on hover
}

private void btn_oneLeave(object sender, MouseEventArgs e) {
    btn_two.Background = new SolidColorBrush(Colors.White); //To its original color
}

XAML

    <Label x:Name="btn_One" Content="Button One" mouseEnter="btn_oneEnter" mouseLeave="btn_oneLeave" mo Style="{StaticResource styleOfButtonOne}"/>

Not the prettiest solution but quite simple. Just add mouse events to each button and set their colors using C#

The advantage here is that you can do a lot more when the mouse is over. Easily changing position, rotation, shadows, scale and so on all in one method (and changing them back in the other)