使用DoubleAnimation设置图像不透明度

Question

This should be fairly simple but I can't seem to get it right. I have a collection of System.Windows.Controls.Image . When I select one of them, I would like all the others to get an opacity of 0.5 . I'm using MVVM, and the logic behind this (finding the selected image and setting it as Enabled ) is done in the ViewModel , and is working. So basically this is working:

<Image Grid.Row="0" Source="{Binding ItemImage}" IsEnabled="{Binding ItemImageEnabled}">
<Image.Style>
    <Style TargetType="Image">
        <Style.Triggers>
            <Trigger Property="IsEnabled"  Value="False">
                <Setter Property="Opacity" Value="0.5"/>
            </Trigger>
            <Trigger Property="IsEnabled" Value="True">
                <Setter Property="Opacity" Value="1.0"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</Image.Style>
</Image>

Now I would like the opacity shifting to be animated, fading it from 1.0 to 0.5 when the image is not selected, and fading from 0.5 to 1.0 when it is. I would have thought at this would work:

<Image Grid.Row="0" Source="{Binding ItemImage}" IsEnabled="{Binding ItemImageEnabled}">
<Image.Style>
    <Style TargetType="Image">
        <Style.Triggers>
            <Trigger Property="IsEnabled"  Value="False">
                <Trigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="Opacity" From="1" To="0.5" BeginTime="0:0:0" Duration="0:0:1"/>
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.EnterActions>
            </Trigger>
            <Trigger Property="IsEnabled" Value="True">
                <Trigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0.5" To="1" BeginTime="0:0:0" Duration="0:0:1"/>
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.EnterActions>
            </Trigger>
        </Style.Triggers>
    </Style>
</Image.Style>

... But it doesn't

Anybody have any idea. Any help would be greatly appreciated. Thanks in advance.

Answer 1

You need Trigger.ExitActions instead of two Trigger . This should be what you want:

<Style TargetType="Image">
    <Style.Triggers>        
        <Trigger Property="IsEnabled" Value="True">
            <Trigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0.5" To="1" BeginTime="0:0:0" Duration="0:0:1"/>
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.EnterActions>
            <Trigger.ExitActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="Opacity" From="1" To="0.5" BeginTime="0:0:0" Duration="0:0:1"/>
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.ExitActions>
        </Trigger>
    </Style.Triggers>
</Style>