Параметры и объекты Popup в WinRT

Разработка под Windows 10 --- Параметры и объекты Popup

Если провести пальцем у правого края экрана Windows 8 (или нажать Windows+C), на экране появляется не только текущая дата и время, но и столбик из пяти значков, называемых чудо-кнопками (charms).

Центральная кнопка переходит к начальному экрану, но другие кнопки предоставляют полезные возможности для ваших приложений. Каждая из них связана с панелью, которую можно открыть, коснувшись чудо-кнопки. Когда ваше приложение находится на экране (кроме уменьшенного состояния Snapped), оно может поддерживать функциональность, связанную с этими четырьмя чудо-кнопками, что мы и рассмотрим в этой и последующих статьях.

Если нажать чудо-кнопку "Параметры" для любой программы, приводившейся ранее, откроется панель всего с единственной кнопкой "Разрешения (Permissions)". Эта кнопка, предоставляемая системой Windows, выводит список разрешений, запрашиваемых вашим приложением в разделе Capabilities файла Package.appxmanifest. Во время выполнения приложение может добавлять новые кнопки на панель "Параметры"; при этом кнопка "Разрешения" сдвигается вниз. Как правило, эти дополнительные кнопки предоставляют информацию о вашей программе: общие сведения, благодарности, условия использования и т д. Другие кнопки могут получать данные от пользователя: настройки, обратная связь и т.д.

Обычно функциональность этих кнопок реализуется хорошо знакомым способом: объектом Popup с потомком UserControl. По традиции такое окно размещается у правого края приложения и простирается на всю высоту экрана.

Чтобы продемонстрировать этот способ, я добавлю традиционное окно About в проект FingerPaint. Так как я собираюсь отправить эту программу в Windows Store, на панели About будет отображаться контактная информация. Начнем с включения в проект FingerPaint нового объекта UserControl, который будет называться About Box. Файл XAML выглядит так:

<UserControl ...>

    <UserControl.Transitions>
        <TransitionCollection>
            <EntranceThemeTransition FromHorizontalOffset="400" />
        </TransitionCollection>
    </UserControl.Transitions>

    <Grid>
        <Border BorderBrush="Black"
                BorderThickness="1"
                Background="#404040"
                Margin="0 12"
                Padding="0 24">
            <StackPanel>
                <StackPanel Orientation="Horizontal">
                    <AppBarButton Icon="Back" Click="OnBackButtonClick"/>

                    <TextBlock Text="О нас" FontSize="56" LineHeight="40">
                        <TextBlock.RenderTransform>
                            <TranslateTransform X="-1" Y="4"/>
                        </TextBlock.RenderTransform>
                    </TextBlock>
                </StackPanel>

                <TextBlock FontSize="24"
                           FontWeight="Light"
                           TextWrapping="Wrap"
                           Margin="24">
                    Это программа была создана для демонстрации возможностей
                    <Italic>Windows Runtime</Italic>.
                    <LineBreak />
                    <LineBreak />
                    Более подробно прочитать о возможностях WinRT вы можете прочитать на сайте www.professorweb.ru.
                </TextBlock>

                <HyperlinkButton HorizontalAlignment="Center" NavigateUri="http://professorweb.ru">
                    <StackPanel>
                        <Image Source="http://professorweb.ru/downloads/logo.png" Stretch="None" />
                    </StackPanel>
                </HyperlinkButton>
            </StackPanel>
        </Border>
    </Grid>
</UserControl>

Я указал для этого элемента управления конкретную ширину, но не высоту, потому что он будет растянут до высоты окна, в котором он отображается. Сверху и снизу были оставлены небольшие поля, а также задан эффект перехода, чтобы казалось, что панель «въезжает» на экран справа. На панели находится кнопка Back с обработчиком Click и кнопка HyperlinkButton с URL-адресом нашего сайта.

Содержимое HyperlinkButton включает элемент Image со ссылкой на растровое изображение, добавленное в папку Assets. Обработчик Click кнопки Back знает, что родителем элемента управления является объект Popup, поэтому он задает свойству IsOpen этого объекта Popup значение false:

private void OnBackButtonClick(object sender, RoutedEventArgs e)
{
    // Закрытие Popup
    Popup popup = this.Parent as Popup;

    if (popup != null)
        popup.IsOpen = false;
}

Это один из способов закрытия временных окон.

Изменения в программе FingerPaint от реализации окна About весьма незначительны. Конструктор MainPage получает объект SettingsPane и назначает обработчик события CommandsRequested:

public MainPage()
{
    // ...

    // Назначение обработчика для панели SettingsPane
    SettingsPane settingsPane = SettingsPane.GetForCurrentView();
    settingsPane.CommandsRequested += OnSettingsPaneCommandsRequested;

    // ...
}

Класс SettingsPane, а также сопутствующие классы и перечисление находятся в пространстве имен Windows.UI.ApplicationSettings. Концептуально объект SettingsPane представляет панель, которую Windows отображает при нажатии пользователем чудо-кнопки Параметры. Именно по этой причине мы получаем объект SettingsPane вместо того, чтобы создавать его. При отображении панель выдает запрос приложению на добавление дополнительных функций (это происходит в обработчике CommandsRequested).

Подключение к другим чудо-кнопкам происходит аналогичным образом. SettingsPane также поддерживает метод Show(), который отображает панель параметров на программном уровне, но для большинства практических целей достаточно назначить обработчик события CommandsRequested. Сохранять объект SettingsPane не нужно, так что две команды в конструкторе MainPage можно объединить:

settingsPane.CommandsRequested += OnSettingsPaneCommandsRequested;

Событие CommandsRequested происходит тогда, когда ваша программа активна, а пользователь нажимает чудо-кнопку "Параметры". Оно позволяет добавить дополнительные команды на панель "Параметры". Так как это происходит при каждом нажатии чудо-кнопки "Параметры", эти дополнительные команды могут быть адаптированы к текущему состоянию приложения. Программа FingerPaint обрабатывает событие CommandsRequested, добавляя в список один объект SettingsCommand:

private void OnSettingsPaneCommandsRequested(SettingsPane sender, 
        SettingsPaneCommandsRequestedEventArgs e)
{
    SettingsCommand aboutCommand = new SettingsCommand(0, "About", OnAboutInvoked);
    e.Request.ApplicationCommands.Add(aboutCommand);
}

С командой связывается идентификатор (которому я задал значение 0, потому что он не используется), текстовая метка и метод, который вызывается при выборе команды пользователем. После того как программа возвращает управление из обработчика CommandsRequested, на экране появляется панель с новой кнопкой About. Команда обрабатывается следующим методом:

private void OnAboutInvoked(IUICommand command)
{
    AboutBox aboutBox = new AboutBox();
    aboutBox.Height = this.ActualHeight;

    Popup popup = new Popup
    {
        IsLightDismissEnabled = true,
        IsOpen = true,
        Child = aboutBox,
        HorizontalOffset = this.ActualWidth - aboutBox.Width
    };
}

Так как объект Popup появляется в фиксированной позиции у правого края страницы, код назначения высоты (Height) объекта AboutBox и горизонтального смещения (HorizontalOff set) объекта Popup очень прост. Результат выглядит так: