Question

I am working on a Windows 8 metro app and having multiple SettingsFlyout items which get added by below mentioned code

SettingsCommand cmd1 = new SettingsCommand("sample", "Color Settings", (x) =>
        {
            // create a new instance of the flyout
            SettingsFlyout settings = new SettingsFlyout();
            // set the desired width.  If you leave this out, you will get Narrow (346px)
            // optionally change header and content background colors away from defaults (recommended)
            // if using Callisto's AppManifestHelper you can grab the element from some member var you held it in
            // settings.HeaderBrush = new SolidColorBrush(App.VisualElements.BackgroundColor);
            settings.HeaderBrush = new SolidColorBrush(Colors.Black);
            settings.HeaderText = string.Format("Color Settings", App.VisualElements.DisplayName);
            settings.Background = new SolidColorBrush(_background);
            settings.Margin = new Thickness(0);
            // provide some logo (preferrably the smallogo the app uses)
            BitmapImage bmp = new BitmapImage(App.VisualElements.SmallLogoUri);
            settings.SmallLogoImageSource = bmp;

            // set the content for the flyout
            settings.Content = new ColorSettings();
            settings.HorizontalAlignment = Windows.UI.Xaml.HorizontalAlignment.Stretch;

            // open it
            settings.IsOpen = true;

            // this is only for the test app and not needed
            // you would not use this code in your real app
            // ObjectTracker.Track(settings);
        });

Currently using (SettingsPane.Show()) i can be able to show the added flyout items list but I want to programmatically open any setting Flyout item instead of opening a flyout list.

Answer 1

Create a new class

public class SettingsFlyout
{
    private const int _width = 346;
    private Popup _popup;

    /// <summary>
    /// Show the Flyout with the UserControl as content
    /// </summary>
    /// <param name="control"></param>
    public void ShowFlyout(UserControl control)
    {
        _popup = new Popup();
        _popup.Closed += OnPopupClosed;
        Window.Current.Activated += OnWindowActivated;
        _popup.IsLightDismissEnabled = true;
        _popup.Width = _width;
        _popup.Height = Window.Current.Bounds.Height;

        control.Width = _width;
        control.Height = Window.Current.Bounds.Height;

        _popup.Child = control;
        _popup.SetValue(Canvas.LeftProperty, Window.Current.Bounds.Width - _width);
        _popup.SetValue(Canvas.TopProperty, 0);
        _popup.IsOpen = true;
    }

    private void OnWindowActivated(object sender, Windows.UI.Core.WindowActivatedEventArgs e)
    {
        if (e.WindowActivationState == Windows.UI.Core.CoreWindowActivationState.Deactivated)
        {
            _popup.IsOpen = false;
        }
    }

    void OnPopupClosed(object sender, object e)
    {
        Window.Current.Activated -= OnWindowActivated;
    }
}

In a XAML page take a button and then write the button click event.

private void Button_Click_1(object sender, RoutedEventArgs e)
{
    SettingsFlyout flyout = new SettingsFlyout();
    flyout.ShowFlyout(new FlyoutContentUserControl());
}

Please note one thing FlyoutContentUserControl is the user control which you would like to show.

Credits goes to Q42.WinRT