しっぽを追いかけて

ぐるぐるしながら考えています

Unity と猫の話題が中心   掲載内容は個人の私見であり、所属組織の見解ではありません

【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>

SplitView は使わず、BottomAppBar にメニューをアプリボタンとして追加することにしました

やることは実はこれだけ、Phone エミュレーターでとりあえず実行

f:id:matatabi_ux:20150720014209p:plain

アプリバーが表示されました・・・しかも右手よりによってます

無理してワンソース UI するよりはスマホは PC やタブレットとは別に作ることもありかと思います

*1:なぜか Windows 8.1 上の Visual Studio 2015 RC では Xaml View が表示されません・・・一度 Windows 10 上の Visual Studio で作成してプロジェクト保存した上で Windows 8.1 側で開きなおせば問題ないのですが;

f:id:matatabi_ux:20150720012804p:plain