読者です 読者をやめる 読者になる 読者になる

かずきのBlog@hatena

日本マイクロソフトに勤めています。XAML + C#の組み合わせをメインに、たまにASP.NETやJavaなどの.NET系以外のことも書いています。掲載内容は個人の見解であり、所属する企業を代表するものではありません。

Windows 10のUniversal appのSplitView

Win10 XAML UWP
Windows 10 TP段階の情報です

Windows 10 TPのUniversal appの新しいコントロールにSplitViewというのがあります。こいつは、左からニョキっと出てくるメニューを持ったような画面を作るのに便利なコントロールです。

XAMLの構造的には単純です。

<SplitView>
  <SplitView.Pane>
    <!-- ここに左から出てくるメニューを書く -->
  </SplitView.Pane>
  <!-- ここにメインコンテンツを書く -->
</SplitView>

例えば、こんなXAMLになります。

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App11"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Interactivity="using:Microsoft.Xaml.Interactivity" xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
    x:Class="App11.MainPage"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <SplitView>
            <SplitView.Pane>
                <StackPanel>
                    <HyperlinkButton Content="Menu 1" />
                    <HyperlinkButton Content="Menu 2" />
                    <HyperlinkButton Content="Menu 3" />
                    <HyperlinkButton Content="Menu 4" />
                    <HyperlinkButton Content="Menu 5" />
                    <HyperlinkButton Content="Menu 6" />
                    <HyperlinkButton Content="Menu 7" />
                </StackPanel>
            </SplitView.Pane>
            <Border Background="Aqua">
                
            </Border>
        </SplitView>
    </Grid>
</Page>

実行するとメニューは出てない水色が一面にひろがった画面になります。

f:id:okazuki:20150325204453p:plain

メニューの出し方

IsPaneOpenプロパティをTrueにすることで表示することが出来ます。XAMLをこんな風に書き換えて

<SplitView IsPaneOpen="True">
    <SplitView.Pane>
        <StackPanel>
            <HyperlinkButton Content="Menu 1" />
            <HyperlinkButton Content="Menu 2" />
            <HyperlinkButton Content="Menu 3" />
            <HyperlinkButton Content="Menu 4" />
            <HyperlinkButton Content="Menu 5" />
            <HyperlinkButton Content="Menu 6" />
            <HyperlinkButton Content="Menu 7" />
        </StackPanel>
    </SplitView.Pane>
    <Border Background="Aqua">
        
    </Border>
</SplitView>

実行するとメニューが出てきます。

f:id:okazuki:20150325204721p:plain

メニュー以外の場所をクリックすると引っ込みます。(二度と出てきません)

実際の使い方

ToggleButtonあたりのIsCheckedとバインドして使うと出し入れ自由になります。

<SplitView x:Name="SplitView">
    <SplitView.Pane>
        <StackPanel>
            <HyperlinkButton Content="Menu 1" />
            <HyperlinkButton Content="Menu 2" />
            <HyperlinkButton Content="Menu 3" />
            <HyperlinkButton Content="Menu 4" />
            <HyperlinkButton Content="Menu 5" />
            <HyperlinkButton Content="Menu 6" />
            <HyperlinkButton Content="Menu 7" />
        </StackPanel>
    </SplitView.Pane>
    <Border Background="Aqua">
        <ToggleButton Content="Menu" IsChecked="{Binding ElementName=SplitView, Path=IsPaneOpen, Mode=TwoWay}" />
    </Border>
</SplitView>

こうすると、ボタンを押すと出てくるようになります。

画面が広いときへの対応

今までは画面の上に覆いかぶさるように出てきて、関係中所をクリックすると引っ込んでいきましたが、DisplayModeをInlineにして、IsPaneOpenをTrueにすることで、引っ込まないでインラインに表示することが出来ます。

<SplitView DisplayMode="Inline" ... >
  ...
</SplitView>

こんな風に表示されます。

f:id:okazuki:20150325205438p:plain

その他の表示方法

その他にCompactOverlayとCompactInlineという表示の指定方法もあります。これは、引っ込んだ状態でも少しだけ表示されるようになるオプションです。何かメニューがあるんだよ!ということを伝えるためや、全部隠すほど画面は狭くないけど、全部出すには画面が狭いというもどかしい状態のときに指定するといいと思います。

以下にCompact****を指定した状態で引っ込んでるときの表示を示します。

f:id:okazuki:20150325205839p:plain

まとめ

SplitViewは、メニューを持ったアプリをつくるのにとても便利なコントロールです。広い画面、狭い画面、中途半端な大きさな画面のどのパターンにも対応できる表示方法が提供されています。 これと、新しいVisualStateManagerの機能を組み合わせることで画面サイズに応じた見た目をもった画面を簡単に作れるようになっています。

アプリバーとはなんだったのか。