SplitViewの使い方

2017年4月3日：UWP

UWPにはSplitViewにより画面を２つに分けてデザインすることができます。ここでは、SplitViewの使い方と、アプリでよくみるメニューを出したり消したりできる方法について解説します。

SplitView

プロジェクトを作成して、XAMLを以下のように設定します。

<Page
    x:Class="TestApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TestApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid>
        <SplitView x:Name="splitView"
               CompactPaneLength="48"
               OpenPaneLength="320"
               IsPaneOpen="True" 
               DisplayMode="CompactInline"
               PaneBackground="AliceBlue"
               Background="White">
            <SplitView.Pane>
                <Grid>
                    <TextBlock Text="Pane" />
                </Grid>
            </SplitView.Pane>
            <SplitView.Content>
                <Grid>
                    <TextBlock Text="Content" />
                </Grid>
            </SplitView.Content>
        </SplitView>
    </Grid>
</Page>

<SplitView>のタグで囲んだ部分がSplitViewです。そして、<SplitView.Pane>がサブ画面、<SplitView.Content>がメイン画面となります。それぞれにGridを入れて区画化しています。そのGridにはTextBlockが入っており、テキストを表示しています。SplitViewの中のプロパティは以下のようになっています。

  • x:Name：SplitViewの名前。プログラミングの際に使用します
  • DisplayMode：表示の仕方。OverrayだとContentの上にPane。InlineはContentの左にPane。Compactをつけると、非表示にした際に指定した量だけ見せることができます。
  • CompactPaneLength：DisplayModeでCompactを指定した際に、Paneを消した際にどれくらい見えるようにするかを指定できます。今回はCompactInlineなので、Paneを隠しても少し見えます
  • OpenPaneLength：Paneの幅
  • IsPaneOpen：TrueだとPaneが開き、FalseならPaneが閉じる
  • PaneBackGround：Paneの背景色
  • BackGround：全体の背景色

デザインは以下の通りです。

ハンバーガーボタンを追加しPaneの出し入れを可能にする

Paneを出し入れできるようにした方が実用的です。以下では先ほどのXAMLにToggleButtonを追加して、トグルボタンを押すことでPaneの出し入れを可能にしていします。

<Page
    x:Class="TestApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TestApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid>
        <SplitView x:Name="splitView"
               CompactPaneLength="48"
               OpenPaneLength="320"
               IsPaneOpen="{Binding ElementName=HamburgerBtn,Path=IsChecked, Mode=TwoWay}" 
               DisplayMode="CompactInline"
               PaneBackground="AliceBlue"
               Background="White">
            <SplitView.Pane>
                <Grid>
                    <TextBlock Text="Pane" />
                </Grid>
            </SplitView.Pane>
            <SplitView.Content>
                <Grid>
                    <TextBlock Text="Content" />
                </Grid>
            </SplitView.Content>
        </SplitView>
        <ToggleButton x:Name="HamburgerBtn" VerticalAlignment="Top" 
                  Foreground="{ThemeResource AppBarBackgroundThemeBrush}"
                  Background="Blue" Width="48" >
            <ToggleButton.Content>
                <FontIcon x:Name="Hamburger" FontFamily="Segoe MDL2 Assets" Glyph="" />
            </ToggleButton.Content>
        </ToggleButton>
    </Grid>
</Page>

IsOpenPaneの部分を制御しないといけないので、Bingdingを導入しています。ElementNameでどの要素と関連づけるかを指定します。Path=IsCheckedとなっているので、トグルボタンがチェックされているかどうかでTrueとFalseを制御します。TwoWayとしているので、トルグボタンのIsCheckedとIsPaneOpenが同期するようになります。これで実行すると、トグルボタンを押すと開いたり閉じたりします。

【閉じている状態】

【開いている状態】

著者：安井 真人(やすい　まさと)

TOP