SplitViewを使ってみる
Win10のUWPではあちこちで使うことになりそうなコントロール。SplitViewを使ってみます。
これは、横からニョキっと出てくるメニューみたいなのを作るときに使うコントロールです。
標準のアプリでもこういうメニューがあちこちで使われてますね。
SplitViewのプロパティ
SplitViewの主なプロパティはこんな感じ。
プロパティ名 | 内容 |
---|---|
Pane | IsPaneOpenがTrueになったときに表示する内容をここで定義します。 |
IsPaneOpen | Paneが開いているか閉じているかをbool値で設定する。 |
DisplayMode | SplitViewのPaneの表示方法を切り替えます。Inline/Overlay/CompactInline/CompactOverlayから選択。 |
PaneBackground | Pane領域の背景色 |
PanePlacement | Paneが画面のどちらから開くか設定。Left/Rightから選択。 |
CompactPaneLength | CompactInline/CompactOverlayの時の、Paneを閉じたときの幅 |
OpenPaneLength | Pane領域の幅 |
サンプル
とりあえず、SplitViewのプロパティを一通り詰め込んでみただけのサンプル
<Page x:Class="LayoutTest.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="using:LayoutTest" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <SplitView x:Name="splitView" IsPaneOpen="{Binding IsOn, ElementName=toggleSwitch, Mode=TwoWay}" DisplayMode="CompactOverlay" PaneBackground="LightGray" PanePlacement="Right" CompactPaneLength ="30" OpenPaneLength="200"> <SplitView.Pane> <StackPanel> <HyperlinkButton Content="Menu1" /> <HyperlinkButton Content="Menu2" /> <HyperlinkButton Content="Menu3" /> <HyperlinkButton Content="Menu4" /> <HyperlinkButton Content="Menu5" /> </StackPanel> </SplitView.Pane> <Grid Background="Beige"> <ToggleSwitch x:Name="toggleSwitch" /> </Grid> </SplitView> </Grid> </Page>
UWPでは頻出しそうなコントロールですが、個人的にはこの手のUIデザインあんま好きじゃなかったりします。。
ハンバーガメニューとこの手のメニューを組み合わせたUIってよくありますが、スマホなどタッチ操作前提の端末では、画面上部をピンポイントで操作するのは結構めんどう。。
でも、この辺のデザインって、タッチ操作とマウス操作のどちらでもそこそこの使いやすさになるような折衷案的なデザインの落としどころなのかなぁ、という気もします。
うーん悩ましい。