为按钮的工具提示内的图像设置动画

Question

对于我正在处理的应用程序，我需要一个动画。问题是，动画在工具提示中。

所以我有一个按钮，每当我移到按钮上时，工具提示就会出现。工具提示显示一个简短的信息文本 (Textblock)，大约两秒钟后他将展开并显示一张图片。

由于我是一名仅 XAML 的开发人员，这意味着我对 C# 一无所知，因此我不知道如何绑定到视图模型，我正在寻找一种方法来使用触发器和故事板。

我已经通过事件触发器实现了这种效果，它对加载的路由事件做出反应。问题是，当第一次加载工具提示时，这只工作 "only" 一次。

这是我的代码：

 <Button Width="100" Height="100">
    <Button.ToolTip>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <TextBlock Grid.Row="0" Text="Here is some text!"></TextBlock>
            <Image Grid.Row="1" Visibility="Collapsed" Source="MyPicture.png">
                <Image.Style>
                    <Style TargetType="Image">
                        <Style.Triggers>
                            <EventTrigger RoutedEvent="Loaded">
                                <EventTrigger.Actions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames 
                                                Storyboard.TargetProperty="Visibility"
                                                Duration="0"
                                                BeginTime="0:0:2">
                                                <DiscreteObjectKeyFrame Value="{x:Static Visibility.Visible}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger.Actions>
                            </EventTrigger>
                        </Style.Triggers>
                    </Style>
                </Image.Style>
            </Image>
        </Grid>
    </Button.ToolTip>
</Button>

是否有比 "Loaded" 更好的路由事件，或者我是否必须制作自己的路由事件？我可以 link 按钮事件，比如 "When Button IsMouseOver is true do this with the image" 吗？还是有更好的方法？不过，也欢迎使用 C# 解决方案。

感谢您的任何建议，

格瑞特

Answer 1

ToolTip 可见性上的 DataTrigger，具有 Enter 和 Exit 操作应该有效。注意明确的 <ToolTip>...</ToolTip>

<Button Width="100" Height="100">
    <Button.ToolTip>
        <ToolTip>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <TextBlock Grid.Row="0" Text="Here is some text!"></TextBlock>
                <Image Grid.Row="1" Visibility="Collapsed" Source="MyPicture.png">
                    <Image.Style>
                        <Style TargetType="Image">
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding IsVisible, RelativeSource={RelativeSource AncestorType=ToolTip}}"
                                             Value="True">
                                    <DataTrigger.EnterActions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames 
                                                    Storyboard.TargetProperty="Visibility"
                                                    Duration="0"
                                                    BeginTime="0:0:2">
                                                    <DiscreteObjectKeyFrame Value="{x:Static Visibility.Visible}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </DataTrigger.EnterActions>
                                    <DataTrigger.ExitActions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames 
                                                    Storyboard.TargetProperty="Visibility"
                                                    Duration="0">
                                                    <DiscreteObjectKeyFrame Value="{x:Static Visibility.Collapsed}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </DataTrigger.ExitActions>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Image.Style>
                </Image>
            </Grid>
        </ToolTip>
    </Button.ToolTip>
</Button>

Answer 2

由于您没有在动画中设置 FillBehavior 属性，它被设置为 HoldEnd（即动画在其活动期结束后保持其值).所以你只需要一个 "opposite" 动画来重置 Visibility 值：

<Image Grid.Row="1" Visibility="Collapsed" Source="MyPicture.png">
    <Image.Style>
        <Style TargetType="Image">
            <Style.Triggers>
                <EventTrigger RoutedEvent="Loaded">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames
                                Storyboard.TargetProperty="Visibility"
                                Duration="0"
                                BeginTime="0:0:2">
                                    <DiscreteObjectKeyFrame Value="{x:Static Visibility.Visible}"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
                <EventTrigger RoutedEvent="Unloaded">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames
                                Storyboard.TargetProperty="Visibility"
                                Duration="0"
                                BeginTime="0:0:0">
                                    <DiscreteObjectKeyFrame Value="{x:Static Visibility.Collapsed}"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </Image.Style>
</Image>

因此第二个动画将在图像卸载时开始，没有持续时间并重置 Visibility 值。

为按钮的工具提示内的图像设置动画

Animate an image inside of a tooltip of a button

wpf

animation

xaml

triggers

tooltip