Windows Phone - 点击时弹出动画答案

【问题标题】：Windows Phone - popup animation on tapWindows Phone - 点击时弹出动画
【发布时间】：2015-10-26 10:08:25
【问题描述】：

我正在制作一个带有滑入和滑出效果的弹出窗口。
我想出了“在”部分。当控件的网格加载时，我添加了一个 EventTrigger 来开始故事板。

<Grid.Triggers>
    <EventTrigger RoutedEvent="Grid.Loaded">
        <BeginStoryboard>
            <Storyboard>
                <DoubleAnimation Storyboard.TargetName="SlideTransform"
                                 Storyboard.TargetProperty="Y"
                                 From="1000" To="0" Duration="0:0:0.25"/>
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
</Grid.Triggers>

<Grid.RenderTransform>
    <TranslateTransform x:Name="SlideTransform" Y="1000"/>
</Grid.RenderTransform>

我还将 ViewModel 命令绑定到点击事件以关闭弹出窗口：

<i:Interaction.Triggers>
    <i:EventTrigger EventName="Tap">
        <cmd:EventToCommand Command="{Binding DismissCommand}"/>
    </i:EventTrigger>
</i:Interaction.Triggers>

此命令也用于放置在此网格下方的按钮（在“LayoutRoot”主网格中）。
所有这些工作正常。

现在问题来了——我需要在弹出窗口关闭之前添加一个“滑出”动画。我无法添加

<EventTrigger RoutedEvent="Grid.Tap">

因为我在启动时遇到 xaml 解析异常：

附加信息：未能分配给属性“System.Windows.EventTrigger.RoutedEvent”。

我尝试向整个控件添加“Tap”事件处理程序，但似乎 ViewModel 命令首先被触发并关闭了整个弹出窗口。
关于如何将它们组合在一起的任何想法？

【问题讨论】：

标签： c# xaml animation windows-phone-8 popup

【解决方案1】：

所以我也想通了，以防有人感兴趣。
在每个按钮的 Tap 事件中，我调用一个方法来准备和触发动画：

private void DismissButton_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
    this.dismissAll = false;
    this.PrepareAndStartSlideOutAnimation();
}

private void DismissAllButton_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
    this.dismissAll = true;
    this.PrepareAndStartSlideOutAnimation();
}

private void PrepareAndStartSlideOutAnimation()
{
    Storyboard s = new Storyboard();
    DoubleAnimation animation = new DoubleAnimation();
    animation.From = 0;
    animation.To = 1000;
    animation.Duration = new Duration(TimeSpan.FromMilliseconds(250));

    LayoutRoot.RenderTransform = new CompositeTransform();

    Storyboard.SetTarget(animation, LayoutRoot);
    Storyboard.SetTargetProperty(animation, new PropertyPath("(UIElement.RenderTransform).(CompositeTransform.TranslateY)"));

    s.Completed += SlideOutAnimation_Completed;
    s.Children.Add(animation);
    s.Begin();
}

当动画完成时，我从 DataContext 执行一个命令：

private void SlideOutAnimation_Completed(object sender, EventArgs e)
{
    if (!this.dismissAll)
        (this.DataContext as HelpOverlayControlViewModel).DismissCommand.Execute(null);
    else
        (this.DataContext as HelpOverlayControlViewModel).DismissAllCommand.Execute(null);
}

这不是最“MVVMy”的解决方案，但我想弹出动画并不是 ViewModel 真正关心的问题，所以我将保持原样。

【讨论】：