UWP: Новые контролы (часть 2). SplitView

Сегодня мы рассмотрим очередной новый контрол, который позволяет создавать адаптивный интерфейс — и это будет SplitView. Обычно этот элемент управления используется для создания меню, но на самом деле он так же позволяет объявить две панели, с совершенно любым содержанием. Основной синтаксис SplitView выглядит следующим образом:

<SplitView IsPaneOpen="False" 
           DisplayMode="CompactInline"  
           PaneBackground="Beige" 
           OpenPaneLength="200" 
           CompactPaneLength="30">
    <SplitView.Pane>
        
    </SplitView.Pane>
    <SplitView.Content>

    </SplitView.Content>
</SplitView>

Свойство DisplayMode можно установить в одно из следующих значений:

  • CompactInline — панель Pane поддерживает компактный режим. Когда она будет расширяться — все содержимое будет смещено, чтобы обеспечить достаточное пространство для расширенной панели;
  • CompactOverlay — данный режим такой же как и предыдущий, но когда панель расширяется она не влияет на остальное содержание. Панель будет размещена над остальным контентом;
  • Inline — поддерживается только в расширенном режиме. Если меню отображается, то весь другой контент будет смещен, чтобы предоставить достаточно места для панели;
  • Overlay — поддерживается только в расширенном режиме. Не влияет на весь другой контент, потому что панель будет размещена над содержанием;

С помощью свойства IsPaneOpen мы можем определить — панель находится в компактном режиме (закрыта) или в расширенном (открыта). Таким образом, если вы установите в свойство IsPaneOpen значение false, то панель будет отображаться в компактном режиме, а если в true — то панель будет отображаться в расширенном режиме.

Таким образом вы можете увидеть, что у SplitView нет ничего, связанного с меню, но у для вас не составит труда разместить что-то вроде ListView внутри и объявить элементы меню. Разрабатывайте и располагайте пункты меню так, что бы пользователи видели только значки в компактном режиме и все остальное в расширенном, а также работайте с VisualStateManager в котором можно изменять DisplayMode и IsPaneOpen свойства в режиме реального времени.

Советую придерживаться этих рекомендаций для создания своего собственного меню:

  • Реализовывать три состояния для меню: расширенное, компактное и ультракомпактное для различных размеров экрана. Если у вас достаточно места, вы можете показывать панель в расширенном режиме без каких-либо проблем, но если у вас мало места — вы можете показывать только иконки. И если у вас совсем нет места (телефон в портретной ориентации), вы должны активировать ультракомпактный режим и скрыть Pane полностью;
  • В компактном и ультракомпактный состоянии добавить кнопку “гамбургера” над меню, которое будет открывать панель в Overlay режиме. Таким образом, вы сможете открыть меню даже в ультракомпактном режиме;
    clip_image002
  • Использование ListView для меню;

Таким образом, ваш VisualStateManager может выглядеть следующим образом (CompactInline по-умолчанию, и IsPaneOpen установлен в True):

<VisualState x:Name="Expanded">
    <VisualState.StateTriggers>
        <AdaptiveTrigger MinWindowWidth="900"></AdaptiveTrigger>
    </VisualState.StateTriggers>
</VisualState>
<VisualState x:Name="Compact">
    <VisualState.Setters>
        <Setter Value="False" Target="splitView.IsPaneOpen"></Setter>
        <Setter Value="CompactOverlay" 
           Target="splitView.DisplayMode"></Setter>
    </VisualState.Setters>
    <VisualState.StateTriggers>
        <AdaptiveTrigger MinWindowWidth="500"></AdaptiveTrigger>
    </VisualState.StateTriggers>
</VisualState>
<VisualState x:Name="UltraCompact">
    <VisualState.Setters>
        <Setter Value="False" Target="splitView.IsPaneOpen"></Setter>
        <Setter Value="Overlay" Target="splitView.DisplayMode"></Setter>
    </VisualState.Setters>
    <VisualState.StateTriggers>
        <AdaptiveTrigger MinWindowWidth="0"></AdaptiveTrigger>
    </VisualState.StateTriggers>
</VisualState>

При реализации кнопку “гамбургера” необходимо добавить логику, которая позволяет расширить меню. Вы можете реализовать эту логику внутри кода страницы или попробовать создать еще несколько состояний и свои собственные триггеры или написать расширение.

Ссылка на источник: UWP: New Controls (part 2 – SplitView)

Реклама
Tagged with: , , , ,
Опубликовано в Development, Windows 10

Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s

%d такие блоггеры, как: