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人员主持）。这里的限制是在Popup上使用IsLightDismissEnabled =“True”实现了SettingsFlyout，而light-dismiss事件当前立即关闭Popup而不允许卸载子转换运行。我认为这可以克服，并且可以在SettingsFlyout API级别支持转换以启用您的方案。

Answer 2

您需要使用HideEdgeUI动画

阅读本文：http://msdn.microsoft.com/en-us/library/windows/apps/jj655412.aspx

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

2 个答案: