【Win10 Pre】 UWP アプリで Windows Phone 向けだけメニューを画面下部に表示したい

前回は SplitView でサイドメニュー式の画面をもつ UWP アプリを作りました

これをそのまま Windows Phone で利用することもできなくはないのですが、懸念点があります

Screen sizes and break points for responsive design - Windows UWP applications | Microsoft Docs

上記 UWP のガイドラインの電話などのデバイスに関する記述には下記のような推奨事項があります

•ユーザーが親指で簡単にアクセスできるように、画面の下部にナビゲーションおよびコマンド要素を配置すると、ハンドヘルドデバイスでのナビゲーションと操作が容易になります。

Windows Phone などのスマホデバイスは縦向きで片手持ちで操作される状況が多く、その場合メニューなどの UI へのタッチ操作は親指だけになってしまうため、必然的に画面下部にそれらの UI を配置することが推奨されているというわけです

しかし、前回作ったレイアウトはサイドメニューなので画面左上にメニューが集まってしまっておりあまりよくありません

・・・ということで、Windows Phone 向けのみメニュー系の UI を画面下部に表示するようにしてみたいと思います

※ Windows 10 Insider Preview Build 10240 時点での情報のため、正式リリース後仕様等が変更になっている可能性があります

スポンサードリンク

前回の MainPage.xaml にコードを追加することで対応することもできるとは思いますが、個人的には PC & タブレットとスマホは利用シーンが異なることが多いので UI を別にした方がよいと思っています

そのため、Windows Phone 用の XAML を別途追加する方法をとってみます

プロジェクト内に「DeviceFamily-Mobile」という名前でフォルダを作ったら、その配下に新しい項目を追加します

f:id:matatabi_ux:20150720012456p:plain

そこで「MainPage.xaml」という名前で「Xaml View」を追加します*1

f:id:matatabi_ux:20150720060348p:plain

作った Xaml View を開いて編集

<Page
    x:Class="SplitViewSample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SplitViewSample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    RequestedTheme="Dark"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <local:VariableHeightGridView x:Name="GridView"
                                      Background="#222222"
                                      ScrollViewer.HorizontalScrollMode="Disabled"
                                      ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                                      ScrollViewer.VerticalScrollMode="Auto"
                                      ScrollViewer.VerticalScrollBarVisibility="Auto"
                                      ScrollViewer.ZoomMode="Disabled">
            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <VariableSizedWrapGrid Orientation="Horizontal"
                                           ItemWidth="180" 
                                           ItemHeight="1" 
                                           HorizontalAlignment="Center"/>
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>
            <GridView.ItemTemplate>
                <DataTemplate>
                    <Border Padding="2,2,0,0">
                        <Image Source="{Binding ImageSource}" Stretch="Uniform"/>
                    </Border>
                </DataTemplate>
            </GridView.ItemTemplate>
        </local:VariableHeightGridView>
    </Grid>
    
    <Page.BottomAppBar>
        <CommandBar IsSticky="True">
            <CommandBar.PrimaryCommands>
                <AppBarButton Label="Search">
                    <AppBarButton.Icon>
                        <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE094;"/>
                    </AppBarButton.Icon>
                </AppBarButton>
                <AppBarButton Label="Like">
                    <AppBarButton.Icon>
                        <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE19F;"/>
                    </AppBarButton.Icon>
                </AppBarButton>
                <AppBarButton Label="Settings">
                    <AppBarButton.Icon>
                        <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE115;"/>
                    </AppBarButton.Icon>
                </AppBarButton>
            </CommandBar.PrimaryCommands>
        </CommandBar>
    </Page.BottomAppBar>
</Page>