Классические дотнетовские приложения хороши тем, что они практически не ограничены в правах и, например, могут работать в трее. Зато универсальные приложения (UWP) более безопасны, и их можно устанавливать и удалять бесчисленное количество раз, не забивая систему и реестр мусором. Платформа UWP постоянно развивается, и, пока пользователи обновляются до Fall Creators Update, который вышел в октябре этого года, мы, разработчики, можем посмотреть на его новые и интересные возможности.

Готов? Скачивай последнюю SDK с официальной страницы, и начнем нашу ознакомительную экскурсию.

В первую очередь хотелось бы отметить множественные улучшения в дизайнере XAML. Одним из самых ожидаемых улучшений для меня было повышение скорости работы. Сравни скорость загрузки в Fall Creators Update (слева) с простым Creators Update:

Сравнение производительности XAML
Сравнение производительности XAML

На конференции Build 2017 Microsoft анонсировала новую систему UI-дизайна под названием Fluent.

Microsoft Fluent Design System
Microsoft Fluent Design System

И вот с этого обновления в UWP начнут появляться новые элементы управления, основанные на этой системе.

 

Navigation View

Navigation View — это out of box контрол для отображения меню.

Navigation View в режиме Minimal
Navigation View в режиме Minimal

Меню выпадает с левой стороны. Кроме того, к меню относится и полоска сверху — Header. На эту полоску можно вынести текст заголовка или дополнительные кнопки.

Меню может использоваться в трех различных вариациях. Вариант на скриншоте сверху — Minimal. В этом режиме Header скрыть нельзя, так как на нем находится кнопка «гамбургер». Есть еще режим Compact, в котором справа отображаются иконки меню.

Navigation View в режиме Compact
Navigation View в режиме Compact

В режиме Expanded меню отображается раскрытым.

Изменяя размер окна приложения, ты можешь изменить режим Navigation View. Ведь система автоматически выбирает режим исходя из размера окна приложения. На этот выбор можно повлиять, указав различные значения пикселей для атрибутов OpenPaneLength, CompactModeThresholdWidth и ExpandedModeThresholdWidth.

Пример кода панели навигации:

<NavigationView x:Name="NavView" IsSettingsVisible="True"
                ItemInvoked="NavView_ItemInvoked">

    <NavigationView.MenuItems>
        <NavigationViewItem Content="Начальная страница" Tag="home">
            <NavigationViewItem.Icon>
                <FontIcon Glyph="&#xE10F;"/>
            </NavigationViewItem.Icon>
        </NavigationViewItem>
        <NavigationViewItemSeparator/>
        <NavigationViewItemHeader Content="Новые возможности"/>
        <NavigationViewItem Icon="AllApps" Content="Автозагрузка" Tag="автозагрузка"/>
        <NavigationViewItem Icon="AllApps" Content="Перезапуск" Tag="перезапуск"/>
        <NavigationViewItem Icon="Video" Content="Color picker" Tag="color picker"/>
        <NavigationViewItem Icon="Audio" Content="Parallax" Tag="parallax"/>
        <NavigationViewItem Icon="Audio" Content="Другие контролы" Tag="другие"/>
    </NavigationView.MenuItems>

    <NavigationView.HeaderTemplate>
        <DataTemplate>
            <Grid Background="LightGray">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <TextBlock Style="{StaticResource TitleTextBlockStyle}"
                       FontSize="28"
                       VerticalAlignment="Center"
                       Margin="12,0"
                       Text="Это Header"/>
                <CommandBar Grid.Column="1"
                        HorizontalAlignment="Right"
                        DefaultLabelPosition="Right">
                    <AppBarButton Label="Дополнительная кнопка" Icon="Refresh"/>
                </CommandBar>
            </Grid>
        </DataTemplate>
    </NavigationView.HeaderTemplate>

    <NavigationView.PaneFooter>
        <Image Source="Assets/logo.png" Width="50" Height="50" />
    </NavigationView.PaneFooter>

    <Frame x:Name="ContentFrame">
        <Frame.ContentTransitions>
            <TransitionCollection>
                <NavigationThemeTransition/>
            </TransitionCollection>
        </Frame.ContentTransitions>
    </Frame>

</NavigationView>
Navigation View, получившееся в результате
Navigation View, получившееся в результате

Обрати внимание, что есть возможность добавить вниз произвольные контролы. В примере туда добавлена картинка (кубик над пунктом меню Settings/Настройки). Сам пункт меню Settings включается и выключается с помощью атрибута IsSettingsVisible.

В коде C# в событии NavView_ItemInvoked можно проверить, была ли нажата кнопка Settings.

if (args.IsSettingsInvoked)
 {
     ContentFrame.Navigate(typeof(SettingsPage));
 }

Или же можно проверить содержимое args.InvokedItem, где должен быть текст нажатого элемента пункта меню. Например, так:

if (args.InvokedItem=="Начальная страница")
 {
     ContentFrame.Navigate(typeof(HomePage));
 }

Более подробную информацию смотри на официальной страничке документации.

 

Person Picture Control

Это элемент управления, отображающий аватар и имя/инициалы пользователя. Довольно простой контрол.

Так выглядит Person Picture Control
Так выглядит Person Picture Control

Добавить на страницу его можно с помощью следующего тега:

<PersonPicture DisplayName="John Doe" Foreground="Black" ProfilePicture="Assets\johndoe.jpg" Initials="JD" />

Его рекомендуется использовать для отображения аватарки текущего пользователя или какого-либо контакта.

Подробнее почитать о нем можно здесь.

 

Rating Control

С этим контролом тоже все должно быть понятно.

Звездочки для выбора рейтинга
Звездочки для выбора рейтинга

Добавить на страницу можно следующим тегом:

<RatingControl x:Name="MyRatings" />

Продолжение доступно только подписчикам

Вариант 1. Оформи подписку на «Хакер», чтобы читать все материалы на сайте

Подписка позволит тебе в течение указанного срока читать ВСЕ платные материалы сайта. Мы принимаем оплату банковскими картами, электронными деньгами и переводами со счетов мобильных операторов. Подробнее о подписке

Вариант 2. Купи один материал

Заинтересовала информация, но нет возможности оплатить подписку? Тогда этот вариант для тебя! Обрати внимание: этот способ покупки доступен только для материалов, опубликованных более двух месяцев назад.


2 комментария

  1. baragoz

    27.10.2017 at 14:27

    Воо, быстро доставили!

  2. growpenny

    03.11.2017 at 13:17

    По описанию — довольно «сырая» технология, которая только получила возможность автозапуска, например.

Оставить мнение

Check Also

ОС максимальной секретности. Выбираем дистрибутив для обхода блокировок и защиты от слежки

Возможно, ты уже пользовался дистрибутивом Tails или даже запускаешь его ежедневно. Но это…