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

【问题标题】：Animate an image inside of a tooltip of a button为按钮工具提示内的图像设置动画
【发布时间】：2018-02-15 14:00:33
【问题描述】：

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

所以我有一个按钮，每当我移过按钮时，工具提示就会出现。工具提示显示一个简短的信息文本（文本块），大约两秒钟后，他将展开并显示一个图像。

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

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

这是我的代码：

 <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>

有比“加载”更好的路由事件还是我必须自己制作路由事件？我可以将事件链接到按钮，例如“当按钮 IsMouseOver 为真时，对图像执行此操作”？还是有更好的方法？不过，也欢迎有关 C# 方式的解决方案。

感谢您的建议，

格瑞特

【问题讨论】：

标签： wpf xaml animation triggers tooltip

【解决方案1】：

工具提示可见性上的 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>

【讨论】：

谢谢。（我知道我不应该，但我还是这样做了！哈哈）当我想为我的 TooltipTemplate 调整它时，我是否必须使用 Binding 更改某些内容，或者 AncestorType 仍然是 Tooltip？

【解决方案2】：

由于您没有在动画中设置FillBehavior 属性，因此将其设置为HoldEnd（即动画在其活动期结束后保持其值）。所以你只需要一个“相反”的动画来重置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 值。

【讨论】：