Question

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

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

由于我是一名仅限XAML的开发人员，这意味着我对C＃没有任何线索，因此我不知道绑定到viewmodel，我正在寻找一种方法来实现触发器和故事板。

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

这是我的代码：

 <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＃方式的解决方案也受到欢迎。

感谢您的任何建议，

格里特

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

Answer 2

由于您未在动画中设置FillBehavior属性，因此将其设置为HoldEnd（即动画在其活动时段结束后保持其值）。所以你只需要一个＆＃34;对面＆＃34;动画重置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值。

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

2 个答案: