Click here to Skip to main content
Click here to Skip to main content

The Quest for a Settings Flyout

By , 29 Oct 2012
Rate this:
Please Sign up or sign in to vote.

This week I was told by a Microsoft Store representative that, "If you want to use a flyout for your settings then use the standard SettingsFlyout which comes from the right side and has an integrated back button."

Posts in this series:

ap

App Settings Sample

The representative suggested I use the code from the App settings sample found here: http://code.msdn.microsoft.com/windowsapps/App-settings-sample-1f762f49.

The app's description states "This sample demonstrates how to use the ApplicationSettings API and settings flyouts to integrate an app's settings UI with the Settings charm." It was disappointing to discover that (in the C#/XAML version) nothing happens when you select one of the settings commands.  Well, nothing except that a text box on the main page displays "You selected the General settings command" or "You selected the Help settings command."

Quickstart: Adding app settings using XAML

In response upon hearing my dismay, the Microsoft Store representative replied: "This is a better example: http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh872190.aspx"  Well, truth be told, it is a better example: It actually provides some form of flyout functionality.  Here are some of my comments (good and bad) about the code:

  1. The code is for Metro Consumer Preview, not Release Preview, so you have a bunch of brush names to update.
  2. It nicely shows that flyouts should either be 346 or 646 pixels wide.
  3. It uses a nice entrance transitions for the flyout.
  4. The layout is almost identical to the default "Permissions" flyout - which seems to be the gold standard.
  5. The touch area for the back button is only 30x30 (It should be 50x50 according to http://msdn.microsoft.com/en-us/library/windows/apps/hh465415).
  6. Rotating the display when the flyout is open causes very interesting (and wrong) behaviors.
  7. The code does not use a ContentPresenter for the content of the flyout.  This can wrongfully encourage copying/pasting of the same code.
  8. Since a UserControl cannot override PopUp, a lot of extra work is required to incorporate this into an application.
  9. The code-behind for the UserControl SimpleSettingsNarrow assumes it is encapsulated in a PopUp.
  10. The amount of code-behind required in MainPage.xaml.cs for displaying the flyout is almost obscene:
    1. The flyout and a PopUp are created and the flyout is embedded in the PopUp.
    2. Two event handlers are wired to watch when the PopUp is closed and the current window is activated.
    3. The MainPage must close the Popup when it is Activated.
  11. If you have other reasons to monitor OnWindowActivated, the code gets even worse.
Do all this for a flyout?
void BlankPage_CommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args)
{
    SettingsCommand cmd = new SettingsCommand("sample", "Sound Options", (x) =>
    {
        _settingsPopup = new Popup();
        _settingsPopup.Closed += OnPopupClosed;
        Window.Current.Activated += OnWindowActivated;
        _settingsPopup.IsLightDismissEnabled = true;
        _settingsPopup.Width = _settingsWidth;
        _settingsPopup.Height = _windowBounds.Height;

        SimpleSettingsNarrow mypane = new SimpleSettingsNarrow();
        mypane.Width = _settingsWidth;
        mypane.Height = _windowBounds.Height;

        _settingsPopup.Child = mypane;
        _settingsPopup.SetValue(Canvas.LeftProperty, _windowBounds.Width - _settingsWidth);
        _settingsPopup.SetValue(Canvas.TopProperty, 0);
        _settingsPopup.IsOpen = true;
    });

    args.Request.ApplicationCommands.Add(cmd);
}

Callisto

It turns out Tim Heuer has also recently created a solution to the problem: https://github.com/timheuer/callisto. Callisto is a nice attempt at providing those little needed tools for Metro C#/XAML development. However, Callisto too suffers from an inability to handle screen rotations properly.  That may be easily fixed.  A bit more concerning are the many lines of code-behind required to display the SettingsFlyout.  For example, here is Tim's own code from SettingsSample.xaml.cs to open a single flyout.

Still too much code
private void BlankPage_CommandsRequested(SettingsPane sender, 
        SettingsPaneCommandsRequestedEventArgs args)
{
    SettingsCommand cmd = new SettingsCommand("sample", "Sample Custom Setting", (x) =>
    {
        SettingsFlyout settings = new SettingsFlyout();
        settings.FlyoutWidth = (Callisto.Controls.SettingsFlyout.SettingsFlyoutWidth)
          Enum.Parse(typeof(Callisto.Controls.SettingsFlyout.SettingsFlyoutWidth), 
          settingswidth.SelectionBoxItem.ToString());
        //settings.HeaderBrush = new SolidColorBrush(Colors.Orange);
        //settings.Background = new SolidColorBrush(Colors.Red);
        settings.HeaderText = "Foo Bar Custom Settings";

        BitmapImage bmp = new BitmapImage(new Uri("ms-appx:///Assets/SmallLogo.png"));

        settings.SmallLogoImageSource = bmp;

        StackPanel sp = new StackPanel();

        ToggleSwitch ts = new ToggleSwitch();
        ts.Header = "Download updates automatically";

        Button b = new Button();
        b.Content = "Test";

        sp.Children.Add(ts);
        sp.Children.Add(b);

        settings.Content = sp;

        settings.IsOpen = true;

        ObjectTracker.Track(settings);
    });

    args.Request.ApplicationCommands.Add(cmd);
}

I do have a lot of hope for Tim's library because the SettingsFlyout was developed as a custom control and the Generic.xaml appears to be very well written.  I think it is only a matter of time before Callisto's SettingsFlyout takes a nicer shape.

Onward

In any case, these discoveries are enough to motivate me to see if I can build a more charming flyout.

Consider reading CharmFlyout - Another Charming Custom Control next.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

John Michael Hauck
Software Developer (Senior) LECO Corporation
United States United States
John Hauck has been developing software professionally since 1981, and focused on Windows-based development since 1988. For the past 17 years John has been working at LECO, a scientific laboratory instrument company, where he manages software development. John also served as the manager of software development at Zenith Data Systems, as the Vice President of software development at TechSmith, as the lead medical records developer at Instrument Makar, as the MSU student who developed the time and attendance system for Dart container, and as the high school kid who wrote the manufacturing control system at Wohlert. John loves the Lord, his wife, their three kids, and sailing on Lake Michigan.
Follow on   Twitter

Comments and Discussions

 
QuestionFormatting... PinmvpSandeep Mewara28-Oct-12 10:11 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140415.2 | Last Updated 29 Oct 2012
Article Copyright 2012 by John Michael Hauck
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid