使用DoubleAnimation设置图像不透明度 [英] Set Image Opacity with an DoubleAnimation

问题描述

这应该很简单，但我似乎无法正确理解. 我有一个System.Windows.Controls.Image的集合.当我选择其中一个时，我希望所有其他对象都变得不透明0.5.我正在使用MVVM，其背后的逻辑(查找选定的图像并将其设置为Enabled)已在ViewModel中完成，并且正在工作.所以基本上这是可行的:

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>

现在，我希望对不透明度进行动画处理，当未选择图像时，将不透明度从1.0渐变为0.5，将不透明度从0.5渐变为1.0.我本以为这样会起作用:

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>

...但是不是

任何人都有任何想法.任何帮助将不胜感激.提前致谢.

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

推荐答案

您需要

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>

这篇关于使用DoubleAnimation设置图像不透明度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！