xaml - 如何在关闭时为 SettingsFlyout 设置动画

Question

在 Windows 8.1 中，我使用的是新的 SettingsFlyout 控件。如果您使用控件的内置后退按钮返回到“设置 super 按钮”弹出按钮，该弹出按钮会正确显示动画并且会显示动画。但是，如果您通过在浮出控件外部单击来解除关闭，则它会在没有过渡动画的情况下消失。

当您关闭 SettingsFlyout 时，如何为过渡设置动画？ (我不想返回“设置魅力”弹出按钮，我只想让它在轻轻关闭时滑出。)

Answer 1

Matt，您想要做的事情应该很容易实现，但目前不支持开箱即用的 XAML SettingsFlyout API。正如 Jerry 指出的那样，有一些过渡可以产生动画效果(在 XAML 中你想要 EdgeUIThemeTransition )。不幸的是，在 SettingsFlyout 上没有 API 支持来添加此转换，但您可以使用自己的私有(private)弹出窗口来托管 SettingsFlyout(更多内容见下文)来使其工作:

public sealed partial class SettingsFlyout1 : SettingsFlyout
{
    Popup _p;
    Border _b;

    public SettingsFlyout1()
    {
        this.InitializeComponent();

        BackClick += SettingsFlyout1_BackClick;
        Unloaded += SettingsFlyout1_Unloaded;
        Tapped += SettingsFlyout1_Tapped;
    }

    void SettingsFlyout1_BackClick(object sender, BackClickEventArgs e)
    {
        _b.Child = null;
        SettingsPane.Show();
    }

    void SettingsFlyout1_Unloaded(object sender, RoutedEventArgs e)
    {
        if (_p != null)
        {
            _p.IsOpen = false;
        }
    }

    void SettingsFlyout1_Tapped(object sender, TappedRoutedEventArgs e)
    {
        e.Handled = true;
    }

    public void ShowCustom()
    {
        _p = new Popup();
        _b = new Border();

        _b.ChildTransitions = new TransitionCollection();

        // TODO: if you support right-to-left builds, make sure to test all combinations of RTL operating
        // system build (charms on left) and RTL flow direction for XAML app.  EdgeTransitionLocation.Left
        // may need to be used for RTL (and HorizontalAlignment.Left on the SettingsFlyout below).
        _b.ChildTransitions.Add(new EdgeUIThemeTransition() { Edge = EdgeTransitionLocation.Right });

        _b.Background = new SolidColorBrush(Colors.Transparent);
        _b.Width = Window.Current.Bounds.Width;
        _b.Height = Window.Current.Bounds.Height;
        _b.Tapped += b_Tapped;

        this.HorizontalAlignment = HorizontalAlignment.Right;
        _b.Child = this;

        _p.Child = _b;
        _p.IsOpen = true;
    }

    void b_Tapped(object sender, TappedRoutedEventArgs e)
    {
        Border b = (Border)sender;
        b.Child = null;
    }
}

此示例的完整解决方案: https://github.com/finnigantime/Samples/tree/master/examples/Win8Xaml/SettingsFlyout_AnimateOut

我认为 SettingsFlyout 应该为您的方案提供 API 支持，因此我在 XAML 团队中提交了一个工作项。将来，此类请求/问题也可以在 MSDN 论坛上提出(由 MSFT 人员主持)。这里的限制是 SettingsFlyout 是在 IsLightDismissEnabled="True"的 Popup 之上实现的，并且 light-dismiss 事件当前会立即关闭 Popup，而不允许卸载子转换运行。我认为这是可以克服的，并且可以在 SettingsFlyout API 级别支持转换以启用您的方案。