SplitViewの使い方
2017年4月3日:UWP
UWPにはSplitViewにより画面を2つに分けてデザインすることができます。ここでは、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が同期するようになります。これで実行すると、トグルボタンを押すと開いたり閉じたりします。
【閉じている状態】
【開いている状態】
著者:安井 真人(やすい まさと)
@yasui_masatoさんをフォロー