Settings

Wita w dzisiejszym poście dalej męczę temat charms bar (Win + C) czyli prawego wysuwanego paska. Dziś zajmiemy się ustawieniami naszej aplikacji. Co to znaczy? W przypadku aplikacji metro pisanych na Windows 8 Microsoft mocno zaleca używania jednego miejsca dla ustawień znajduje się właśnie na prawym wysuwanym pasku pod przyciskiem Settings. Jest to miejsce gdzie powinniśmy trzymać ustawienia ponieważ i tak użytkownik musi wejść w to miejsce jeśli będzie chciał zmienić ustawienia nadane przez nas przy pomocy Copabilities. Drugim powodem jest ujednolicenie w obrębie wszystkich aplikacji miejsca gdzie znajdują się ustawienia.

Aby zacząć prace nad ustawieniami trzeba zacząć od stworzenia klasy która będzie definiować ustawienia wysuwanej palety (czyli miejsca w którym będą wyświetlanie ustawienia). Więc dodajmy klasę SettingsFlyout.cs do folderu Common zawartość klasy prezentuje się następująco.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;

namespace ContosoCookbook.Common
{
    class SettingsFlyout
    {
        private const int _width = 346;
        private Popup _popup;

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

Kolejnym krokiem jest dodanie strony do menu ustawień. Dokonujemy tego poprzez obsługę zdążenia CommandsRequested, w metodach OnLaunched(), OnSearchActivated dodajemy nasłuchiwanie zdarzenia.

// Register handler for CommandsRequested events from the settings pane
SettingsPane.GetForCurrentView().CommandsRequested += OnCommandsRequested;

Natomiast samo dodanie już strony do menu wygląda następująco.

void OnCommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args)
{
    var about = new SettingsCommand("about", "About", (handler) =>
        {
            var settings = new SettingsFlyout();
            settings.ShowFlyout(new AboutUserControl());
        });

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

Dodawanie polecenia do menu ustawienia dokonuje się przez dodanie obiektu SettingsCommand do kolekcji ApplicationCommands. Trzeci parametr konstruktora SettingsCommand to obsługa, która jest wywoływana, gdy polecenie jest wywoływane w menu. W tym miejscu, używamy klasy SettingsFlyout aby określić jakie ma ustawienia wyświetlana strona. Można tę klasę używać wielokrotnie w projekcie i zmieniać jedynie wygląd strony. Natomiast wygląd strony jest definiowany przy pomocy kontrolki którą dodaje się przy pomocy metody ShowFlyout.  W metodzie OnCommandsRequested() możemy dodawać więcej stron jeśli jest taka potrzeba. Wracając do wyglądu do projektu dodaje się nowy obiekt UserControl.

Warto pamiętać o przycisku wstecz aby muc wrócić do strony poprzedniej w menu. Kod akcji kliknięcia przycisku wstecz prezentuje się tak.

private void OnBackButtonClicked(object sender, RoutedEventArgs e)
{
    if (this.Parent.GetType() == typeof(Popup))
    {
        ((Popup)this.Parent).IsOpen = false;
    }
    SettingsPane.Show();
}

Natomiast efekt prezentuje się następująco.

W przypadku jak tworzymy bardziej skomplikowaną stronę z ustawieniami czyli interaktywną np.: z przyciskami. zapis ustawień odbywa się w kontrolce którą zdefiniowaliśmy jako wygląd strony. Natomiast odczyt to już w odpowiednich miejscach w aplikacji.