Windows10UWP用のプロジェクトテンプレートを作りました – AppTemplate

Windows10のSDKがRTMといえどプロジェクトテンプレートがないやん!って前から思ってたので作りました。

せっかくWindows10でSplitViewを使ったハンバーガーナビゲーション(命名)があるのに、テンプレートが用意されてなかった上に、初心者がそれをつくろうと思うと結構苦労すると思ったので作ってみました。

結構簡単にハンバーガーナビゲーションのアプリを作れるようになるとおもいます。

このテンプレートは初心者向けなのでMVVMガーViewModelガーって人は自分でViewModel作ってください。

外観

通常はこんな感じ。Windows10のニュースアプリを意識しました。

ハンバーガーボタンを押すことでナビゲーションが開きます。

左下の設定とか押すと、真ん中のコンテンツが変わります

Adaptive UIを意識してデバイスのサイズによって自動的にSplitViewのUIが切り替わります。

App.xamlに定義しているApplicationThemeBrushリソースを変えるだけで簡単にテーマ色を変更できます。

プロジェクトテンプレートのインストール

以下からAppTemplate.zipをダウンロードします。

AppTemplate.zip

ダウンロードしたzipファイルをそのまま

C:\Users\{UserName}\Documents\Visual Studio 2015\Templates\ProjectTemplates

の中に入れます。

VisualStudioの新規プロジェクトを実行するとVisualC#の中にAppTemplateがあるはずです。

プロジェクトを作ると何故かターゲットがARMになってるのでx86に変更し、デバッグが実行できればOKです。

使い方

MainPage.xamlにあるSplitView内のStackPanelにAppBarButtonをはやしましょう。

SplitViewのPaneに表示されるボタンが増えます。

表示するコンテンツを作るために新しくxamlページを作りましょう。

先ほど作ったAppBarButtonのClickイベント時にframeContentをそのページにNavigateすればOKです。

技術的なお話

どういう構成になってるのか知りたい人は見てください。

さて、レイアウトをどうやって作ってるかですが以下の図をみてください。

やっぱりSplitViewです。

SplitViewのPaneにAppBarButtonをおいて、PaneじゃないところにFrameをおいています。

AppBarを押したらFrameを特定のページにNavigateすることでコンテンツを切り替えています。

 

SplitViewのIsOpenPaneプロパティはToggleButtonのIsCheckedと双方向バインドされていて、ハンバーガーボタンを押したらSplitViewが開閉されることになります。

 

SplitViewのPaneの部分はListViewにしようかまよったのですがレイアウトしやすいようにAppBarButtonのStackPanelとしました。

 

AppBarButtonに関してはStyleを少しいじってます。App.xamlにStyleを定義しています。

Styleを外部に定義したAppBarButtonを使用することでSymbolIconを利用したナビゲーションボタンをこれぐらいの簡単なコードで作れます。

SplitViewの中にハンバーガーボタンを収めなかった理由ですが、モバイル表示のときにSplitViewをOverlayにしたかったからです。

ToggleButtonをSplitViewから独立させることでモバイル時にCompact部分がじゃまになりません。

Adaptiveなレイアウトについてですが、モバイル、Normal、Wideの3つのVisualStateを定義しています。

さらに各VisualStateはAdaptiveTriggerを使って横幅によって自動でSplitViewを変化させています。

 

表示されるコンテンツはMainPage.xamlにあるFrameに別のPageをNavigateしているのでコンテンツを作りたいときは各ページを編集するだけでOKです。

タブレットモードやPhoneにあるバックボタンですが、フックしています。

こんなかんじでフックしたバックボタンを使って、FrameをGoBackしています。

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.