メニューとコンテンツを分割したレイアウトを作る – SplitView

SplitView

メニューとコンテンツを縦分割し、メニューを出したり閉じたりするレイアウトを作るには、SplitViewを使います。

メニューを出しているとき(IsPaneOpen=”True”)

メニューを閉じているとき(IsPaneOpen=”False”)

実際に使うときは、このようにSplitView.Paneプロパティにメニュー要素を入れ、子要素にコンテンツを入れることで使うことができます。

<SplitView DisplayMode="Inline" IsPaneOpen="False" OpenPaneLength="320" CompactPaneLength="40" PaneBackground="{x:Null}">
    <SplitView.Pane>
        <Border Background="#CCFF0000">
            <TextBlock Text="Pane" VerticalAlignment="Top" HorizontalAlignment="Left" FontSize="96" Foreground="White" />
        </Border>
    </SplitView.Pane>
    <Border Background="Blue">
        <TextBlock Text="Content" VerticalAlignment="Center" HorizontalAlignment="Left" FontSize="96" Foreground="White" />
    </Border>
</SplitView>

DisplayMode=”Inline”

SplitViewのDisplayModeをInlineにするとPaneによってコンテンツが隠れず、Paneが開いているときは自動的にコンテンツがずれることになります。

DisplayMode=”Overlay”

DisplayModeをOverlayにするとPaneが開いたとき、コンテンツがずれずにPaneにかぶる形になります。

DisplayMode=”CompactInline”

DisplayModeをCompactInlineにするとPaneを閉じたときでもPaneが少しだけ残ります。

DisplayMode=”CompactOverlay”

DisplayModeをCompactOverlayにするとPaneを少し残しつつ、Paneが開いた時もかぶる動作となります

Paneのサイズ

PaneのサイズはSplitViewのOpenPaneLengthプロパティで指定できます。

また、コンパクト表示の時のPaneのサイズはCompactPaneLengthで指定できます。

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.