UWPアプリを作るとき、画面遷移やアーキテクチャで悩んだら!?
～Windows Template Studioを使ってみよう

UWPアプリ開発の最前線 第11回

カスタマイズに着手する

　Windows Template Studioで生成したプロジェクトをひな型として自分のアプリに育てていくには、どこから手を付けるとよいでしょう？　まずは、TODOコメントから始めましょう。

TODOコメントを見る

　TODOコメントとは、冒頭に「TODO 」と書いてあるコメント行のことです。Visual Studioのメニュー［表示］－［タスク一覧］で、次の画像のようにTODOコメントが表示されます。

タスク一覧でTODOコメントを見る

　Windows Template Studioが生成したTODOコメントは「TODO WTS:」で始まっています。そこには、やるべき作業や、利用するときの注意事項などが書かれています。複数行に渡って書かれている場合、タスク一覧には2行目以降が表示されていませんので、タスク一覧でダブルクリックしてソースコードの該当箇所を表示させます。

　このTODOコメントを見ていくと、カスタマイズするべきところが分かってきます。ここでは簡単なところから、WebViewページの初期表示URLと、ハンバーガーメニューのアイコンを変更してみましょう。

WebViewページの初期表示URL

修正箇所を探す

　ページを追加するときに指定した名前に「Page」を付けたものが、そのページのソースファイルの名前になっています。WebViewページのソースコードはWebViewPage.xaml、そのコードビハインドはWebViewPage.xaml.csです。タスク一覧でそれを探してみると、「TODO WTS: Set the URI of the page to show by default」というTODOコメントが見つかります。ここを修正すれば、初期表示URLを変更できそうです。

　タスク一覧でそのTODOコメントをダブルクリックすると、ソースコードの該当箇所が開きます（次の画像）。ここではWebViewPage.xaml.csの12行目です。その次の行にDefaultUrl文字列定数の定義があります。この定数を書き換えればよさそうですね。

初期表示URLの設定箇所をタスク一覧から開いた

コードを追いかけてみる

　書き換える前に、コードを少し追いかけてみましょう。

　文字列定数DefaultUrlは、132行目から始まるコンストラクタの中でSourceプロパティにセットされています（上の画像）。このSourceプロパティは、WebViewPage.xamlでWebViewコントロールのSourceプロパティにバインドされています（次の画像）。ですから、文字列定数DefaultUrlに設定したURLが、WebViewページを表示したときに表示されます。

コードビハインドのSourceプロパティはWebViewコントロールにバインドされている

　ところで、実行中にコードビハインド側（WebViewPage.xaml.cs）のSourceプロパティを変更したらどうなるでしょうか？　SourceプロパティのセッターはSetメソッドを呼び出しています（次の画像）。Setメソッドでは、PropertyChangedEventHandlerイベントを発火させています（このイベントはINotifyPropertyChangedインターフェイスの実装です）。このイベントが発火すると、バインド先に「データが変わったよ！」という通知が飛びます。バインドのモードはOneWayになっていますから（上の画像）、バインド元の変化（＝Sourceプロパティの変更）は自動的にバインド先に反映されます。ちなみに、バインドのモードがOneTime（x:Bindの既定値）のときは、自動的には反映されません。

コードビハインドのSourceプロパティを変更するとイベントが発火する

　画面にTextBoxコントロールなどを追加して、ユーザーが入力したURLをコードビハインドのSourceプロパティにセットするように改造すれば、好きなWebページを表示させられるようになる、というわけです。

　Windows Template Studioが生成したコードは、このように拡張性が考慮されています。そのため、最初は取っ付きにくいかもしれませんが、分かってしまえば簡単に拡張できるようになります。

コードを修正する

　さて、ここでは、初期表示URLを違うものに変えるだけにしましょう。WebViewPage.xaml.csの該当箇所を次のコードのように書き換えます。

初期表示URLを変更する

// TODO WTS: Set the URI of the page to show by default
// private const string DefaultUrl = "https://developer.microsoft.com/en-us/windows/apps";
// bw: 初期表示URLを変更
private const string DefaultUrl = "https://codezine.jp/article/corner/731";

　サンプルコードで筆者が修正した部分のコメントには、このように「bw:」と冒頭に付けてあります。

　これで実行してみると、ちゃんと初期表示URLが変わっています（次の画像）。

初期表示URLが変わった

ハンバーガーメニューのアイコン

　ハンバーガーメニューを表示している大枠のページは、ShellPage.xamlです（常にこの名前）。タスク一覧で探してみると、ShellPage.xaml.csに「// TODO WTS: Change the icons and titles for all NavigationViewItems in ShellPage.xaml.」というTODOコメントが見つかります。アイコンを変えるにはShellPage.xamlを変更しろ、というのですね。

　そこで、ShellPage.xamlを調べてみると、次の画像のようなTODOコメントが見つかります（XAMLファイル内のTODOコメントは、タスク一覧に表示されないのです）。

ShellPage.xamlのTODOコメント

　このコメントと、コメントにあるリンク先の「Modifying the menu items」を読むと、Iconプロパティに適当なSymbol列挙値かFontIconオブジェクトを設定すればよいようです。「Modifying the menu items」には、FontIconオブジェクトを設定する例も書いてあります。さらにTODOコメントには、FontIconオブジェクトに設定できるSegoe UI Symbol iconsのページへのリンクも載っています。このページには1200個以上のアイコンが掲載されています。ちなみに、筆者が公開しているアプリ「bwDevTools: Segoe MDL2 Assets」を使うと、このページに載っているアイコンを名前で絞り込めて、見つけたアイコンをクリックすればFontIconのXAMLコードを得られるので、便利です。

　ここでは、ハンバーガーメニューのアイコンを、次のコードのように変更してみました。Iconプロパティに直接文字列を設定しているのがSymbol列挙値、子要素として定義しているものがFontIconオブジェクトです。

ハンバーガーメニューのアイコンを変更する（ShellPage.xaml）

<winui:NavigationView.MenuItems>
    <!--
    TODO WTS: Change the symbols for each item as appropriate for your app
    More on Segoe UI Symbol icons: https://docs.microsoft.com/windows/uwp/style/segoe-ui-symbol-font
    Or to use an IconElement instead of a Symbol see https://github.com/Microsoft/WindowsTemplateStudio/blob/master/docs/projectTypes/navigationpane.md
    Edit String/en-US/Resources.resw: Add a menu item title for each page
    -->
    <!--<winui:NavigationViewItem x:Uid="Shell_Main" Icon="Document" helpers:NavHelper.NavigateTo="views:MainPage" />
    <winui:NavigationViewItem x:Uid="Shell_DataGrid" Icon="Document" helpers:NavHelper.NavigateTo="views:DataGridPage" />
    <winui:NavigationViewItem x:Uid="Shell_WebView" Icon="Document" helpers:NavHelper.NavigateTo="views:WebViewPage" />
    <winui:NavigationViewItem x:Uid="Shell_Map" Icon="Document" helpers:NavHelper.NavigateTo="views:MapPage" />
    <winui:NavigationViewItem x:Uid="Shell_InkSmartCanvas" Icon="Document" helpers:NavHelper.NavigateTo="views:InkSmartCanvasPage" />-->
    <!-- bw: アイコンを変更 -->
    <winui:NavigationViewItem x:Uid="Shell_Main" Icon="Home" helpers:NavHelper.NavigateTo="views:MainPage" />
    <winui:NavigationViewItem x:Uid="Shell_DataGrid" helpers:NavHelper.NavigateTo="views:DataGridPage" >
        <winui:NavigationViewItem.Icon>
           <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xF0E2;"/>
        </winui:NavigationViewItem.Icon>
    </winui:NavigationViewItem>
    <winui:NavigationViewItem x:Uid="Shell_WebView" Icon="Globe" helpers:NavHelper.NavigateTo="views:WebViewPage" />
    <winui:NavigationViewItem x:Uid="Shell_Map" Icon="Map" helpers:NavHelper.NavigateTo="views:MapPage" />
    <winui:NavigationViewItem x:Uid="Shell_InkSmartCanvas" helpers:NavHelper.NavigateTo="views:InkSmartCanvasPage" >
        <winui:NavigationViewItem.Icon>
            <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE76D;"/>
        </winui:NavigationViewItem.Icon>
    </winui:NavigationViewItem>
</winui:NavigationView.MenuItems>

　これで実行してみると、ハンバーガーメニューのアイコンが次の画像のように変わります。

ハンバーガーメニューのアイコンが変わった