Quantcast
Channel: かずきのBlog@hatena
Viewing all articles
Browse latest Browse all 1387

Universal Windows Platform appのアプリバー

$
0
0
2015/05/03
Windows 10 Insider Preview 10074時点の情報です

Windows 8から登場したAppBarですが、Windows 10になっても健在です。(一瞬死んだかと思った)

Pageには、今まで通りButtomAppBarプロパティとTopAppBarプロパティがあってAppBarとCommandBarを置くことが出来ます。UWPになって変わった点は、電話でもTopAppBarが使えるようになっています。(WP8.1のUniversal appではTopAppBar使うと死んでた)ただ、Visual Studioのドキュメントアウトラインから見るとTopAppBarプロパティは隠されているので、BottomAppBarを使うのが推奨っぽい気がします。ついでに言うと、AppBarコントロールもツールボックスに出てこない(出てこないだけで使うことは出来る)ので、CommandBarを使うのが推奨されてるような空気を感じます。

見た目

UWPのCommandBarコントロールをBottomAppBarにおいてみました。

<Pagex:Class="App8.MainPage"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="using:App8"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"mc:Ignorable="d"><Page.BottomAppBar><CommandBar><CommandBar.SecondaryCommands><AppBarButton Icon="Add"Label="appbarbutton"/><AppBarButton Icon="Admin"Label="appbarbutton"/><AppBarButton Icon="Attach"Label="appbarbutton"/></CommandBar.SecondaryCommands><AppBarButton Icon="Accept"Label="appbarbutton"/><AppBarButton Icon="Cancel"Label="appbarbutton"/></CommandBar></Page.BottomAppBar><Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"></Grid></Page>

この状態で実行すると以下のような見た目になります。

f:id:okazuki:20150503152640p:plain

...をクリックすることでセカンダリーのコマンドが展開されます。

f:id:okazuki:20150503152822p:plain

電話でも同様の見た目になります。

f:id:okazuki:20150503152922p:plain

f:id:okazuki:20150503152947p:plain

閉じてるときの見た目

最小化されてるときの見た目の調整もできます。ClosedDisplayModeプロパティで調整ができます。デフォルトのCompactの見た目は先ほどの通りで、この他に、MinimalとHiddenが選べます。

Minimalは以下のように、...だけが表示されるモードです。

f:id:okazuki:20150503153150p:plain

Hiddenは名前の通り何も表示されません。Hiddenの場合はIsOpenプロパティをTrueにしたりして表示の制御を自前でする必要があります。


Viewing all articles
Browse latest Browse all 1387

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>