How to animate SettingsFlyout on dismiss

Question

In Windows 8.1, I'm using the new SettingsFlyout control. The flyout animates in correctly and will animate out if you use the control's built-in back button to return to the Settings Charm flyout. But if you light dismiss by clicking outside the flyout, it disappears without a transition animation.

How do you animate a transition out when you light dismiss the SettingsFlyout? (I don't want to return to the Settings Charm flyout, I just want it to slide out on a light dismiss.)

Answer 1

Matt, what you want to do should be easily achievable but is currently not supported by the XAML SettingsFlyout API out of the box. As Jerry points out, there are transitions that allow an animate out effect (in XAML you want EdgeUIThemeTransition). Unfortunately, there is no API support on SettingsFlyout to add this transition, but you can get it to work using your own private popup to host the SettingsFlyout (more on this below):

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;
    }
}

Full solution for this sample: https://github.com/finnigantime/Samples/tree/master/examples/Win8Xaml/SettingsFlyout_AnimateOut

I think SettingsFlyout should have API support for your scenario, so I filed a work item on the XAML team. In the future, such requests/issues can be raised on the MSDN forum as well (moderated by MSFT folks). The limitation here is that SettingsFlyout is implemented on top of Popup with IsLightDismissEnabled="True", and the light-dismiss event currently closes the Popup immediately without allowing unloading child transitions to run. I think this can be overcome and transitions can be supported at the SettingsFlyout API level to enable your scenario.