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

Question

在Windows 8.1中,我使用的是新的SettingsFlyout控件.弹出窗口正确设置动画,如果您使用控件的内置后退按钮返回"设置超级按钮"弹出按钮,则会生成动画.但是如果你通过在弹出窗口外面点击来点亮它,它就会在没有过渡动画的情况下消失.

当你点亮SettingsFlyout时,你如何为转换设置动画？(我不想返回设置魅力弹出窗口,我只是希望它在光线消失时滑出.)

Answer 1

Matt，您想要做的事情应该很容易实现，但目前 XAML SettingsFlyout API 不支持开箱即用。正如 Jerry 指出的，有些过渡允许动画输出效果（在 XAML 中您需要EdgeUIThemeTransition）。不幸的是，SettingsFlyout 上没有 API 支持来添加此转换，但您可以使用自己的私有弹出窗口来托管 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 是在 Popup 之上实现的，IsLightDismissEnabled="True"，并且 light-dismiss 事件当前会立即关闭 Popup，不允许卸载子过渡运行。我认为这个问题可以克服，并且可以在 SettingsFlyout API 级别支持转换来启用您的场景。