SourceChord

C#とXAML好きなプログラマの備忘録。最近はWPF系の話題が中心です。

SplitViewを使ってみる

Win10のUWPではあちこちで使うことになりそうなコントロール。SplitViewを使ってみます。
これは、横からニョキっと出てくるメニューみたいなのを作るときに使うコントロールです。

標準のアプリでもこういうメニューがあちこちで使われてますね。
f:id:minami_SC:20150902005740p:plain:w200

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>

f:id:minami_SC:20150902005943p:plain:w300




UWPでは頻出しそうなコントロールですが、個人的にはこの手のUIデザインあんま好きじゃなかったりします。。
ハンバーガメニューとこの手のメニューを組み合わせたUIってよくありますが、スマホなどタッチ操作前提の端末では、画面上部をピンポイントで操作するのは結構めんどう。。

でも、この辺のデザインって、タッチ操作とマウス操作のどちらでもそこそこの使いやすさになるような折衷案的なデザインの落としどころなのかなぁ、という気もします。
うーん悩ましい。