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 режиме. Таким образом, вы сможете открыть меню даже в ультракомпактном режиме;
  
  
• Использование 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)