5

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.)

Matt
  • 113
  • 1
  • 6

2 Answers2

3

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.

Patrick Finnigan
  • 1,767
  • 16
  • 28
  • This worked perfectly. Just added a tap event on the setting form itself with e.Handled = true so I could tap on the flyout without it dismissing. Thank you! – Matt Jan 09 '14 at 03:19
  • Glad to hear! Thanks - I updated the code (above and on github) with your comment about SettingsFlyout handling Tapped. – Patrick Finnigan Jan 09 '14 at 18:55
  • 1
    Thanks for this sample, it's super useful and concise! One thing, I noticed when you press the Back Button the flyout doesn't dismiss before the SettingPane shows. I haven't figured out how to animate it, but if you want to simply get rid of it you can modify the BackClick handler to include: { if (_p != null) { _p.IsOpen = false; } SettingsPane.Show(); } – YasharBahman Feb 11 '14 at 17:10
  • Thanks Yashar! I'm glad you found the sample helpful. I updated the code above and on Github to reflect your feedback. Yes, I think the BackClick handler needs to set the Border's child to null to force the unload transition to run on the SettingsFlyout, thus animating it out. – Patrick Finnigan Feb 15 '14 at 08:33
  • Thanks @PatrickFinnigan. This was very helpful. It worked seamlessly. However I got one error in the following line this.InitializeComponent(); This error is 'SettingsFlyout1' does not contain a definition for 'InitializeComponent' and no extension method 'InitializeComponent' accepting a first argument of type 'SettingsFlyout1' could be found (are you missing a using directive or an assembly reference?) Am I doing something wrong? – HelpMatters Aug 08 '14 at 04:32
  • Hi vivek. I think that may be caused by a namespace or base class change in your custom SettingsFlyout partial class. If you enlist in the GitHub repository and open the solution does it run for you? Also perhaps see: http://stackoverflow.com/questions/10266558/blankpage-constructor-cannot-initialize-components – Patrick Finnigan Aug 13 '14 at 16:16
0

You need to use the HideEdgeUI animation

Read this: http://msdn.microsoft.com/en-us/library/windows/apps/jj655412.aspx

Jerry Nixon
  • 31,313
  • 14
  • 117
  • 233