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

がりらぼ

WindowsRuntimeの応援ブログ

CommandBarを追加するには

WindowsRuntime

CommandBar

ストアアプリにはアプリバーをつけることができます。

アプリバーはPageのBottomAppBarプロパティかTopAppBarプロパティに設定しますが、8.1からはCommandBarを上記プロパティに追加することができるようになりました。

CommandBarはPrimaryCommandsプロパティとSecondaryCommandsプロパティを持ちます。

PrimaryCommandsに入れたAppBarButtonは優先的に表示されます。

例えば、PrimaryCommandsとSecondaryCommandsにAppBarButtonなどをいれたとき、アプリの解像度が低くなってすべてのAppBarButtonが表示できなくなったとき、SecondaryCommandsは自動的に非表示になり、PrimaryCommandsが優先的に表示されます。

CommandBarを実装する

CommandBarはPageのBottomAppBarプロパティかTopAppBarプロパティに子要素として入れます。

<Page.BottomAppBar>
    <CommandBar>
        <CommandBar.SecondaryCommands>
            <AppBarButton Icon="Flag"/>
            <AppBarButton Icon="FontSize"/>
            <AppBarButton Icon="Flag"/>
            <AppBarButton Icon="FontSize"/>
        </CommandBar.SecondaryCommands>
        <CommandBar.PrimaryCommands>
            <AppBarButton/>
            <AppBarButton Icon="Edit"/>
            <AppBarButton/>
            <AppBarButton Icon="Edit"/>
        </CommandBar.PrimaryCommands>
    </CommandBar>
</Page.BottomAppBar>

PrimaryCommandsに優先して表示したいコマンドを、SecondaryCommandsにサブコマンドをいれます。

CommandBarはPrimaryCommandsが左側に、SecondaryCommandが右側に寄せて表示されます。

f:id:garicchi:20140506181133p:plain

解像度が低くなったときは優先してPrimaryCommandsが表示されます。

f:id:garicchi:20140506181148p:plain