SplitView

Элемент SplitView представляет контейнер, который состоит из двух панелей: Pane и Content. Панель Content представляет собой основное содержимое контейнера. Она является открытой. А панель Pane может быть скрыта, при необходимости ее можно раскрывать во всю ширину и скрывать обратно:

<Page
    x:Class="LayoutApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:LayoutApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <SplitView x:Name="splitView" Background="White" PaneBackground="LightBlue">
        <SplitView.Pane>
            <StackPanel>
                <TextBlock Text="Выдвижная панель" />
            </StackPanel>
        </SplitView.Pane>
        <SplitView.Content>
            <Grid>
                <Button Content="Переключить вид" HorizontalAlignment="Center" Click="Button_Click" />
            </Grid>
        </SplitView.Content>
    </SplitView>
</Page>

С помощью свойств SplitView.Pane и SplitView.Content устанавливается содержимое панелей Pane и Content. Через свойство PaneBackground задается цвет панели Pane (стандартное свойство Background относится к панели Content). Чтобы разместить на этих панелях какое-либо содержимое, как правило, в них помещается еще один контейнер. Так, в панели Content размещен контейнер Grid, в котором есть кнопка. У этой кнопки задан обработчик нажатия: Click="Button_Click". Поэтому перейдем к файлу кода и поместим в него следующий метод:

private void Button_Click(object sender, RoutedEventArgs e)
{
    splitView.IsPaneOpen = !splitView.IsPaneOpen;
}

Свойство IsPaneOpen элемента SplitView управляет видимостью панели Pane. Если оно равно true, то панель Pane находится в раскрытом состоянии. И если нам вдруг потребуется, чтобы эта панель была по умолчанию раскрыта, то в разметке XAML у SplitView мы могли бы использовать атрибут IsPaneOpen="True".

Теперь если мы запустим приложения, то мы увидим только содержимое панели Content:

Нажмем на кнопку. У нас сработает обработчик, который переключит состояние панели Pane и тем самым раскроет ее:

Обратите внимание, что панель Pane частично перекрывает панель Content и кнопку. Это поведение панели Pane по умолчанию, но его можно переопределить, установив у SplitView нужное значение для атрибута DisplayMode:

• Overlay: панель Pane перекрывает панель Content (по умолчанию). Закрыть панель Pane можно, нажав на любое место на панели Content

• Inline: панель Pane сдвигает панель Content. При этом панель Pane нельзя закрыть, нажав на любое место на панели Content, как в случае с Overlay

• CompactOverlay: начальная ширина панели Pane задается с помощью свойства CompactPaneLength, а остальная часть скрывается. При раскрытии панель Pane действует также, как и при режиме Overlay

• CompactInline: начальная ширина панели Pane задается с помощью свойства CompactPaneLength, а остальная часть скрывается. При раскрытии панель Pane действует также, как и при режиме Inline

Например, используем режим CompactInline:

<SplitView x:Name="splitView" DisplayMode="CompactInline" CompactPaneLength="20"  
			Background="White" PaneBackground="LightBlue" >
<!-- остальное содержимое -->
</SplitView>

В скрытом состоянии:

В раскрытом:

Из остальных свойств SplitView следует отметить свойство OpenPaneLength, которое задает ширину панели Pane в раскрытом состоянии.