There is an Image with a style that is placed on MyControl : UserControl , in MyControl there is an IsSelected property.

 <Image.Style> <Style TargetType="{x:Type Image}"> <Style.Triggers> <EventTrigger RoutedEvent="MouseEnter"> <BeginStoryboard> <Storyboard Storyboard.TargetProperty="Opacity"> <DoubleAnimation From="0.4" To="1" Duration="0:0:.25"/> </Storyboard> </BeginStoryboard> </EventTrigger> <EventTrigger RoutedEvent="MouseLeave"> <BeginStoryboard> <Storyboard Storyboard.TargetProperty="Opacity"> <DoubleAnimation From="1" To="0.4" Duration="0:0:.25"/> </Storyboard> </BeginStoryboard> </EventTrigger> </Style.Triggers> </Style> </Image.Style>

How to set the condition of the type: If MyControl.IsSelected then execute triggers, if not, then not execute?

    1 answer 1

    Use MultiDataTrigger on IsMouseOver and IsSelected :

     <Style.Triggers> <MultiDataTrigger> <MultiDataTrigger.Conditions> <Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="True"/> <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource FindAncestor, AncestorType=self:MyControl}}" Value="True"/> </MultiDataTrigger.Conditions> <MultiDataTrigger.EnterActions> <BeginStoryboard> <Storyboard Storyboard.TargetProperty="Opacity"> <DoubleAnimation From="0.4" To="1" Duration="0:0:.25"/> </Storyboard> </BeginStoryboard> </MultiDataTrigger.EnterActions> <MultiDataTrigger.ExitActions> <BeginStoryboard> <Storyboard Storyboard.TargetProperty="Opacity"> <DoubleAnimation From="1" To="0.4" Duration="0:0:.25"/> </Storyboard> </BeginStoryboard> </MultiDataTrigger.ExitActions> </MultiDataTrigger> </Style.Triggers>

    Or you can name the root element in UserControl , and refer to it directly:

      <Condition Binding="{Binding IsSelected, ElementName=Root}" Value="True"/>

    Do not forget to set the initial value of Opacity to 0.4!

    Update: If you want the triggers to work only on MouseIn / Out, and not at the time when the control gets IsSelected , you can do this:

     <UserControl x:Class="SO16.MyControl" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:self="clr-namespace:SO16" Height="30" x:Name="Root"> <UserControl.Resources> <Style x:Key="SelectedImageStyle" TargetType="Image"> <Style.Triggers> <EventTrigger RoutedEvent="MouseEnter"> <BeginStoryboard> <Storyboard Storyboard.TargetProperty="Opacity"> <DoubleAnimation To="1" Duration="0:0:.25"/> </Storyboard> </BeginStoryboard> </EventTrigger> <EventTrigger RoutedEvent="MouseLeave"> <BeginStoryboard> <Storyboard Storyboard.TargetProperty="Opacity"> <DoubleAnimation To="0.4" Duration="0:0:.25"/> </Storyboard> </BeginStoryboard> </EventTrigger> </Style.Triggers> </Style> </UserControl.Resources> <UserControl.Template> <ControlTemplate TargetType="{x:Type UserControl}"> <Grid> <Image Name="InnerImage" Source="https://www.google.com/images/srpr/logo11w.png" Height="30" Opacity="0.4"/> </Grid> <ControlTemplate.Triggers> <Trigger Property="self:MyControl.IsSelected" Value="True"> <Setter Property="Style" TargetName="InnerImage" Value="{StaticResource SelectedImageStyle}"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </UserControl.Template> </UserControl>

    I removed the content in the Template , separated the style into resources, and in DoubleAnimation removed the From .

    • Yes, I implemented it in the same way, straightforward one to one like yours. But there was such a problem when the IsSelected property changed to True and at that moment the mouse was on the control (when I clicked and IsSelected became IsSelected ), then the animation worked and darkened the picture. So far I have decided this way, the input animation for me is FillBehavior="HoldEnd" and the output FillBehavior="Stop" , flashes a little, of course, but as a result it works as it should, maybe if there is still a solution to this problem? And yet, {Binding IsSelected, ElementName=Root doesn't want to work in general for some reason like this ... - SkyDancer
    • @SkyDancer: Did you remember to give the name Root root element in the UserControl ? - VladD
    • @SkyDancer: updated the answer. - VladD 2:23 pm