かずきのUWP入門

1. 1 かずきの UWP 入門

2. 2 目次 1. 本書について........................................................................................................................ 10 2. Universal Windows Platform とは ....................................................................................... 10 2.1. UWP アプリまでの歴史............................................................................................... 11 2.1.1. .NET Framework 3.0 ............................................................................................ 11 2.1.2. Silverlight.............................................................................................................. 11 2.1.3. Windows Phone 7.x .............................................................................................. 11 2.1.4. Windows 8 ............................................................................................................ 12 2.1.5. Universal app........................................................................................................ 12 2.1.6. Universal Windows Platform ................................................................................ 12 2.2. 開発の前に ................................................................................................................... 12 2.3. デバイスファミリ ........................................................................................................ 13 2.4. アダプティブ UI........................................................................................................... 14 2.5. Hello world................................................................................................................... 14 2.5.1. 前準備................................................................................................................... 14 2.5.2. プロジェクトの作成 ............................................................................................. 15 2.5.3. 画面の作成............................................................................................................ 17 2.5.4. プログラムの実行................................................................................................. 21 2.5.5. まとめ................................................................................................................... 25 3. XAML................................................................................................................................... 25

3. 3 4. UWP のコントロールの基本クラス..................................................................................... 30 4.1. DependencyObject....................................................................................................... 30 4.1.1. 依存関係プロパティ ............................................................................................. 31 4.1.2. 添付プロパティ..................................................................................................... 35 4.1.3. スレッド操作 ........................................................................................................ 36 4.2. FrameworkElement ...................................................................................................... 37 4.3. Control ......................................................................................................................... 39 4.4. ContentControl ............................................................................................................ 39 4.5. ItemsControl ................................................................................................................ 39 4.6. Panel ............................................................................................................................ 40 5. データバインディング ......................................................................................................... 41 5.1. 実行時データバインディング ...................................................................................... 41 5.2. コンパイル時データバインディング............................................................................ 48 6. アプリケーションライフサイクル ....................................................................................... 53 6.1. アプリケーションの起動シーケンス............................................................................ 53 6.2. サスペンド時の処理..................................................................................................... 55 6.3. サスペンドからの復帰 ................................................................................................. 56 6.4. アプリケーションライフサイクルに対応したサンプル............................................... 56 7. ローカルデータとローミングデータ ................................................................................... 61 7.1. ローカルアプリデータ ................................................................................................. 62

4. 4 7.2. ローミングデータ ........................................................................................................ 65 7.3. 一時アプリデータ ........................................................................................................ 66 8. Advanced XAML .................................................................................................................. 66 8.1. Style.............................................................................................................................. 66 8.1.1. 定義済みのスタイル ............................................................................................. 69 8.2. アニメーション ............................................................................................................ 70 8.2.1. キーフレームを使ったアニメーション ................................................................ 75 8.2.2. ThemeAnimation.................................................................................................. 76 8.2.3. ThemaTransition.................................................................................................. 79 8.3. Visual State Manager.................................................................................................... 82 8.4. Behavior ....................................................................................................................... 90 8.4.1. インストール ........................................................................................................ 90 8.4.2. 組み込み Behavior ................................................................................................ 91 8.4.3. Behavior の使い方 ................................................................................................ 92 8.4.4. Behavior の作成.................................................................................................... 95 8.4.5. Behavior の細かい使い方 ................................................................................... 103 8.5. DataTemplate ............................................................................................................ 103 8.5.1. ContentControl 系での使用................................................................................ 103 8.5.2. ItemsControl 系での使用.................................................................................... 110 8.6. ControlTemplate........................................................................................................ 114

5. 5 8.6.1. クリック可能なテキストの作成 ......................................................................... 114 8.6.2. コントロールの Visual State............................................................................... 116 9. 代表的なコントロール ....................................................................................................... 120 9.1. レイアウトパネル ...................................................................................................... 120 9.1.1. StackPanel .......................................................................................................... 120 9.1.2. Grid .................................................................................................................... 122 9.1.3. Canvas ................................................................................................................ 126 9.1.4. RelativePanel ...................................................................................................... 128 9.2. Border ........................................................................................................................ 131 9.3. TextBlock ................................................................................................................... 133 9.4. Button ........................................................................................................................ 135 9.5. TextBox...................................................................................................................... 138 9.6. CheckBox ................................................................................................................... 140 9.7. RadioButton ............................................................................................................... 141 9.8. RepeatButton ............................................................................................................. 145 9.9. ToggleSwitch.............................................................................................................. 147 9.10. ToggleButton ......................................................................................................... 149 9.11. ComboBox.............................................................................................................. 150 9.12. CalendarDatePicker ............................................................................................... 153 9.13. CalendarView ......................................................................................................... 156

6. 6 9.14. DatePicker.............................................................................................................. 158 9.15. TimePicker............................................................................................................. 160 9.16. FlipView ................................................................................................................. 162 9.17. Frame ..................................................................................................................... 168 9.18. CommandBar ......................................................................................................... 170 9.19. ListView と GridView............................................................................................. 175 9.19.1. 選択項目の操作................................................................................................... 180 9.20. Image...................................................................................................................... 191 9.20.1. XAML 内での URL............................................................................................. 191 9.20.2. 画像の表示例 ...................................................................................................... 192 9.20.3. ユーザーの指定したファイルの表示.................................................................. 194 9.20.4. 画像の表示時の拡大方法方法............................................................................. 198 9.21. InkCanvas............................................................................................................... 200 9.21.1. ペン以外での入力の受け付け............................................................................. 201 9.21.2. ペンの色・太さを変える .................................................................................... 202 9.21.3. 文字認識 ............................................................................................................. 204 9.22. MapControl ............................................................................................................ 206 9.23. MediaElement ........................................................................................................ 215 9.24. Povot ...................................................................................................................... 217 9.25. PasswordBox .......................................................................................................... 221

7. 7 9.26. ProgressBar ............................................................................................................ 223 9.27. ProgressRing .......................................................................................................... 225 9.28. ScrollViewer ........................................................................................................... 226 9.29. Slider ...................................................................................................................... 231 9.30. WebView ................................................................................................................ 232 9.31. AugoSuggestBox..................................................................................................... 237 9.32. SplitView ................................................................................................................ 248 9.32.1. ハンバーガーメニューの実装............................................................................. 249 10. 共有................................................................................................................................ 253 10.1.1. 共有の送信側の作成 ........................................................................................... 253 10.1.2. 共有の受信側の作成 ........................................................................................... 260 11. バックグラウンドタスク ............................................................................................... 265 11.1.1. バックグラウンドタスクの作成と登録 .............................................................. 265 11.1.2. バックグラウンドタスクとフォアグランドの連携 ............................................ 269 11.1.3. バックグラウンドタスクの追加情報.................................................................. 275 11.1.4. システムイベントへの応答 ................................................................................ 275 12. タイルとトースト .......................................................................................................... 276 12.1.1. タイルやトーストを作成するための補助ツール................................................ 276 12.1.2. ライブタイル ...................................................................................................... 278 12.1.3. セカンダリタイル............................................................................................... 281

8. 8 12.1.4. トースト ............................................................................................................. 284 13. プッシュ通知.................................................................................................................. 293 14. コルタナ連携.................................................................................................................. 313 14.1.1. フォアグラウンドアプリの起動 ......................................................................... 313 14.1.2. バックグラウンドアプリの起動 ......................................................................... 323 15. アプリ間連携.................................................................................................................. 331 15.1. AppService.............................................................................................................. 331 15.2. 別アプリの起動 ...................................................................................................... 336 15.2.1. プロトコルによるアプリの起動 ......................................................................... 336 15.2.2. 結果を受け取るプロトコルによるアプリの起動................................................ 337 16. 複数デバイスに対応したアプリの作成.......................................................................... 339 16.1. アダプティブコード ............................................................................................... 339 16.2. アダプティブ UI..................................................................................................... 344 17. UserControl とテンプレートコントロール ................................................................... 349 17.1. UserControl............................................................................................................ 349 17.2. テンプレートコントロール .................................................................................... 353 18. UWP でのアプリの設計................................................................................................. 361 18.1. MVVM パターンとは............................................................................................. 361 18.2. Prism for Windows Runtime .................................................................................. 362 18.2.1. 足し算アプリの作成 ........................................................................................... 363

9. 9 18.2.2. 基本的なクラスの使い方 .................................................................................... 378 19. まとめ ............................................................................................................................ 387

10. 10 1. 本書について本書は、Windows 10 で追加された Universal Windows Platform（以下 UWP）についての入門書になります。以下の開発環境を前提としています。 1. Windows 10 2. Visual Studio 2015 Update 3 開発言語としては、XAML と C#を使用しています。本書では、C#の言語面での解説は行いません。C#についての入門は別途書籍やサイトなどを参考にしてください。また、UWP を実行する OS は以下のものを想定しています。 1. Windows 10 2. Windows 10 Mobile 2. Universal Windows Platform とは UWP とは、Windows 10 で追加された、プラットフォームで以下の特徴を持ちます。 1. Windows 10 が動くすべてのデバイス上でワンバイナリでアプリが動く (ア) Windows 10 の動くデスクトップ (イ) Windows 10 の動くタブレット (ウ) Windows 10 Mobile の動く電話 (エ) Surface Hub (オ) HoloLens (カ) Windows 10 IoT の動くラズベリーパイなどの IoT デバイス 2. Windows ストアで配布が可能

11. 11 UWP 上で動くアプリのことを UWP アプリといいます。 2.1. UWP アプリまでの歴史ここで少し余談ですが、UWP アプリに至るまでの歴史を著者の主観が入った状態ですが少し見ていきたいと思います。さかのぼれば何処までもさかのぼれますが、ここでは、.NET Framework 3.0 で追加された WPF からの歴史を見ていきたいと思います。 2.1.1. .NET Framework 3.0 .NET Framework 3.0 で、Windows Presentation Foundation（以下 WPF）が追加されました。これは、デスクトップアプリケーションを開発するためのプラットフォームで XAML（ザムル）と呼ばれる XML をベースとした言語で画面を構築して、C#でロジックを記述するという開発スタイルが登場しました。この開発スタイルは、UWP でも受け継がれています。 2.1.2. Silverlight 次に、Rich Internet Application(以下 RIA)と呼ばれるキーワードが持てはやされた時代が来ます。この時は、現在のように HTML5 を中心とした開発ではなく Flash や Siliverlight と呼ばれるブラウザプラグイン上でアプリケーションを構築することが主流だったと私は感じています。（HTML/CSS/JavaScript でも開発出来たが、今よりも凄く大変だった） Silverlight は、勢いのあったころは WPF を駆逐するのではないかと錯覚させるほど、機能追加が活発で、OutOfBrowser というブラウザプラグインなのに、サンドボックス内にありつつデスクトップアプリケーションのように動作するモードなども追加されました。UWP も大ざっぱにみると、サンドボックスの中で動く XAML と C#によって開発されたアプリが動くということで、とても似たような雰囲気があります。 2.1.3. Windows Phone 7.x 次に、Windows Phone です。これは、Silverlight がスマートフォンアプリとして動くという点が特徴です。この時は、Silverlight がこのまま全プラットフォームにひろがっていくのではないかと感じていました。（現実はそうではありませんでしたが…）

12. 12 2.1.4. Windows 8 Silverlight の波も去り、Microsoft がタッチファーストという考えで作り出し、世間的には Vista 並みに失敗したと認識されている（私は好きですよ）Windows 8 が登場します。 Windows 8 では、ストアアプリと呼ばれる UWP の前身となるアプリケーションプラットフォームが登場します。COM の上に構築された Windows Runtime 上で動くアプリケーションがここで登場しました。Windows Runtime は、UWP でも使用されています。 2.1.5. Universal app Windows 8.1 と Windows Phone 8.1 で 95％くらい API が共通化されて、ほぼ同一ソースで Windows 8.1 上と Windows Phone 8.1 上で動くアプリケーションのバイナリを、それぞれ作成することが出来るようになりました。ソースコードレベルとはいえ、同じコードが電話でもパソコンでも動くという大きな衝撃を与えてくれたテクノロジです。 2.1.6. Universal Windows Platform そして、UWP に繋がります。Universal app がソースコードの共有だったものを、UWP では、同一バイナリが Windows 10 の動く様々なデバイスで動くということを実現しました。開発手法は、WPF が登場してから一貫して XAML と C#による開発です。 HoloLens への対応や Windows 10 への力の入れ具合などから、現在、そして今後も大きく Microsoft が投資していくプラットフォームであることが伺えます。現に XAML などの開発言語も WPF と比べて機能強化が積極的に行われています。本書では、この WPF から歴史を積み上げて、現在の最新のプラットフォームである UWP についての開発について取り上げます。 2.2. 開発の前に UWP の開発の話しに入る前に、UWP のアプリの作法であるガイドラインを紹介しておきます。このガイドラインは、守らなければいけないというものではないですが、UWP のアプリを作る上で、よくあるナビゲーションパターンや画面パターンなど、多くの有益な情報が記載されています。

13. 13 是非、Windows ストアなどに提出するようなアプリを作る場合には一読しておくことをお勧めしておきます。 Windows アプリ UX デザインガイドライン https://msdn.microsoft.com/ja-jp/mt634411.aspx 上記ページの中にある、「Windows 10 アプリ UX デザインガイド」が、それになります。 2.3. デバイスファミリ UWP を開発するうえで知っておいたほうがいい概念としてデバイスファミリというものがあります。デバイスファミリとは、アプリが動作するプラットフォームのようなものです。 Universal app が Windows 8.1 と Windows Phone 8.1 などの OS を対象としていたのに対して、UWP ではデバイスファミリを対象とします。デスクトップパソコンでは、デスクトップデバイスファミリに基づいて実行し、モバイル端末ではモバイルデバイスファミリに基づいて実行されます。ユニバーサルデバイスファミリと呼ばれる特別なデバイスファミリも存在し、ユニバーサルデバイスファミリで提供される、API は、全てのデバイスファミリで動作することが保証されています。デバイスファミリの関係をあらわした図を以下に示します。各デバイスファミリには、プラットフォームに固有の API が提供されています。これらの API は、実行時に動的に存在を確認して呼び出すアダプティブコードを記述することが出来ます。デバイスファミリを選択するということは、呼び出せる API 群を決定するということです。先ほども言った通り、アダプティブコードを記述することでデバイスファミリ固有の API を使用しつつ、他のデバイスファミリ上でも動作させるといったことも出来るようになっています。

14. 14 必要があれば、デスクトップデバイスファミリ上でしか動作させないといったことも可能です。 2.4. アダプティブ UI UWP は、様々なデバイス上で動作するアプリケーションを、ワンバイナリで作ることが出来ます。逆に言うと、ワンバイナリで様々な画面サイズで動作するアプリケーションを作らないといけないということになります。このような要件に対応するため、アダプティブ UI を実現しなければなりません。アダプティブ UI は、画面サイズに応じて最適な画面レイアウトを提供する UI です。以下のような小さなモバイル端末から、ホワイトボードサイズの Surface Hub まで様々なデバイスに対応する必要があります。（https://msdn.microsoft.com/ja-jp/library/windows/apps/dn894631.aspx より引用）アダプティブ UI のパターンについても、「開発の前に」で紹介したガイドラインに記載がありますので、併せて確認してみてください。 2.5. Hello world 最初の UWP アプリとして Hello world を作成してみましょう。ボタンを押すと、Hello world というメッセージボックスが表示されます。 2.5.1. 前準備 UWP のアプリを開発するためには、Visual Studio 2015 のインストール時に UWP の開発環境をインストールするように構成する必要があります。選択をせずに、インストールした場合は

15. 15 コントロールパネルからプログラムの追加と削除を選んで、Visual Studio 2015 を選択して変更を押してから、UWP の開発環境をインストールしてください。また、最初にやる設定として、パソコンを開発者モードにする必要があります。設定（Win + i）を表示して「更新とセキュリティ」を選んで、「開発者向け」を選択して「開発者モード」にします。 2.5.2. プロジェクトの作成メニューの「ファイル」→「新規作成」→「プロジェクト」を選択して、「テンプレート」の「Visual C#」の「Windows」の「ユニバーサル」にある「空白のアプリ（ユニバーサル Windows）」を選択します。名前の項目に HelloWorld と入力して「OK」を選択してください。

16. 16 動作対象とするターゲットプラットフォームと最小プラットフォームのバージョンの選択ダイアログが出てくるので、そのまま「OK」を選択してください。作成が完了すると以下のようなプロジェクトが作成されます。

17. 17 1. Assets フォルダインストール後のプログラムフォルダに表示されるアイコンや、タイルなどに表示されるアイコンが入っています。 2. App.xaml/App.xaml.cs アプリケーションのエントリーポイントです。 3. ApplicationInsights.config ApplicationInsights の構成ファイルです。プロジェクト新規作成時に ApplicationInsights を使用しない構成にしていた場合は作成されません。無くても問題ありません。 4. HelloWorld_TemporaryKey.pfx アプリケーションのインストールパッケージを作成するときに使用される鍵です。 5. MainPage.xaml/MainPage.xaml.cs アプリケーション起動時に最初に表示される画面です。 6. Package.appxmanifest アプリケーションのマニフェストファイルです。権限の設定などを行います。 7. project.json NuGet のライブラリの依存関係が記載されています。 2.5.3. 画面の作成

18. 18 Hello world の画面を作成します。MainPage.xaml をダブルクリックして開くとデザイナが表示されます。デザイナの下部には、XAML と呼ばれる画面を記述する言語が表示されています。デザイナの左側にツールボックスが表示されていて、そこにボタンなどの各種コントロールがあります。

19. 19 ツールボックスから Button をデザイナにドラッグアンドドロップすることで、好きな場所にボタンを配置出来ます。

20. 20 Button を選択した状態で、プロパティウィンドウを見ると Button の設定を変更できることがわかります。Content プロパティに Say hello と入力すると Button のテキストが Say hello になります。

21. 21 Button をデザイナ上でダブルクリックすることで、Button がクリックされたときの処理が生成されます。MainPage.xaml.cs が以下のようになります。 public sealed partial class MainPage : Page { public MainPage() { this.InitializeComponent(); } private void button_Click(object sender, RoutedEventArgs e) { } } このように XAML に紐づく C#のファイルをコードビハインドと言います。コードビハインドに処理を書きましょう。button_Click メソッドを以下のように書き換えます。 private async void button_Click(object sender, RoutedEventArgs e) { var dialog = new MessageDialog("Hello world"); await dialog.ShowAsync(); } MessageDialog は、名前空間がデフォルトで using されていないので、「Ctrl + .」を押して using を追加してください。UWP の API は、非同期のものがほとんどです。少しでも処理に時間がかかるものは全て非同期メソッドとして提供されています。async/await は頻繁に使うので、知らない方はマスターしておきましょう。 2.5.4. プログラムの実行最後にプログラムの実行を行います。Visual Studio のツールバーを以下のように「x86」が選択されていることを確認して「▶ローカルコンピューター」を選択します。

22. 22 実行すると Button が置かれた Window が表示されます。Button をクリックすると以下のようにダイアログが表示されます。続けて Windows 10 Mobile で動作させてみましょう。「▶ローカルコンピューター」の横の▼ をクリックすると以下のように動作対象のターゲットが選べます。

23. 23 その中から、「Mobile Emulator 10.0.10586 WVGA 4 inch 512MB」（細かいバージョン番号は異なっている可能性があります）を選択します。選択したあと、再度クリックすると Windows 10 Mobile のエミュレータが起動して Hello world が実行されます。

24. 24 Button をクリックすると、以下のようにダイアログが表示されます。

25. 25 詳しい手順は紹介しませんが、CPU を「ARM」にして「▶Device」にすることで開発者モードにした USB で接続された Windows 10 Mobile の実機にアプリを転送して動かすことが出来ます。Windows 10 Mobile をお持ちの方は試してみてください。 2.5.5. まとめプロジェクトの作成から、アプリケーションの実行までを紹介しました。また、デザイナを使って画面をデザイン出来ることや、C#を使って処理を書けることを示しました。そして、 UWP の醍醐味でもある、デスクトップとモバイルで同じアプリケーションが動くということも示しました。ちょっとした Hello world ですが、色々な物が詰まっています。 3. XAML ここでは、UWP の画面構築に使用する XAML という言語についてみていきます。XAML は、 Hello world の章でデザイナの下に表示されていたもので、XML をベースにして作られた言語になります。XAML は、画面構築専用の言語ではなくて、汎用的に使えるオブジェクトを組み立てるための言語になります。ツリー構造を持ったオブジェクトの構築に必要な機能が色々詰まっています。画面は、Page をルートとしたツリー構造のオブジェクトのため、XAML で記述するのに、とても適している言語です。 XAML は、XML 名前空間を C#の名前空間に、タグをクラス名に、属性をプロパティ名に対応させています。また、XML 名前空間には、いくつかの組み込みのものが定義されていて、それ

26. 26 らには x や d や mc などの名前を付けることが一般的です。一般的な Page（UWP での画面をあらわすクラス）の XAML での定義は以下のようになります。 <Page x:Class="XamlBasics.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> </Page> 4 つの XML 名前空間が定義されています。まずは、XAML で定義する名前空間と、様々な便利機能が定義されている x 名前空間と、デザイナ向けの機能を提供する d 名前空間です。mc 名前空間は、mc:Ignorable で実行時には無視する名前空間を指定するために定義されています。x:Class 属性は、コードビハインドクラスのクラス名をあらわしています。この、x:Class 属性で、XAML と裏のロジックのクラスの結び付けが行われています。この形が UWP で扱う XAML の基本的な形になります。この XAML に紐づくコードビハインドは、以下のようになっています。 using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; namespace XamlBasics { public sealed partial class MainPage : Page { public MainPage() { this.InitializeComponent(); } } }

27. 27 XAML のタグが Page タグなので、Page クラスを継承している点がポイントです。また、 XAML で定義された設定を有効化するために、コンストラクタで InitializeComponent メソッドを呼び出している点もポイントになります。以下に XAML の基本機能を使った XAML を示します。 <Page x:Class="XamlBasics.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:XamlBasics" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Page.Content> <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> <Grid.Children> <Button Content="Hello world" Click="Button_Click" /> </Grid.Children> </Grid> </Page.Content> </Page> まず、Button タグに注目してみましょう。Button の Content 属性に Hello world を指定しています。これは、Button クラスのインスタンスの Content プロパティに Hello world という文字列を設定していることになります。このように、とても直感的に属性を使ってプロパティを設定可能です。また、もう 1 つ Click 属性がありますが、こちらはイベントになります。イベントでは、コードビハインドで対応するメソッドの名前を定義することで、イベントに対してメソッドを追加することが出来ます。次に、Page と Grid の関係について注目してみましょう。先ほどの Button の例のように、単純な文字列や数値の場合は属性を使ってプロパティの値を指定できますが、プロパティに設定したいものが Button や Grid といった他のクラスのインスタンスだった場合に、特別な命名規約に沿ったタグを使うとプロパティを設定できます。命名規約は、「クラス名.プロパティ名」と

28. 28 いうタグになります。このような命名規約のタグを使うことで、タグの子要素のオブジェクトをプロパティに設定することができます。この構文のことを、「プロパティ要素の構文」といいます。次に、Grid の Background 属性で指定されている{}で囲まれた部分です。これは「マークアップ拡張」といって単純な文字列では指定できないようなオブジェクトを設定するための構文になります。StaticResource は、後程説明しますが、UWP のリソースと呼ばれるところから、オブジェクトを取得してきます。その他に{x:Null}などで null を渡すといったことも可能です。次にコンテンツ構文です。コンテンツ構文は、オブジェクトに対して 1 つだけ指定可能なコンテンツプロパティというものを、タグの直下に書くことでコンテンツプロパティに自動で設定出来るものです。例えば、Page では Content プロパティがコンテンツプロパティに指定されています。また、Grid は Children プロパティがコンテンツプロパティに指定されています。そのため、先ほどの XAML は、以下のようにシンプルに記述できます。 <Page x:Class="XamlBasics.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:XamlBasics" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> <Button Content="Hello world" Click="Button_Click" /> </Grid> </Page> その他の構文として、コレクション構文というものがあります。例えば、Grid の Children は、コレクション型なのですが、ここに複数のタグを追加するとコレクションに複数格納されます。例えば、Grid に Button を 2 つ以上置くことが出来ます。例えば以下のように書きます。 <Page x:Class="XamlBasics.MainPage"

29. 29 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:XamlBasics" xmlns:d=http://schemas.microsoft.com/expression/blend/2008tugini xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> <Button Content="Hello world" Click="Button_Click" /> <Button VerticalAlignment="Top" Content="Button2" /> <Button VerticalAlignment="Bottom" Content="Button3" /> </Grid> </Page> 次に、任意の名前空間にあるオブジェクトを XAML に組み込む方法を紹介します。XAML は、XML 名前空間を C#の名前空間と対応づけることができます。対応づけかたは、上記の XAML 内の local という XML 名前空間にあるとおり、「using:名前空間」という形の書式になります。例えば XamlBasics という名前空間に Person という名前のクラスがある場合、以下のように記述できます。 <local:Person /> 次に、添付プロパティという機能を紹介します。添付プロパティは、名前の通りオブジェクト自体には定義されていないプロパティを追加で設定できる機能になります。UWP 上では、主にコントロールのレイアウトに必要な情報をコントロールに追加するために使用されています。例えば、Grid コントロールは、行と列を指定してコントロールを何処に配置するのか指定できるのですが、そこで、以下のように使用されています。 <Page x:Class="XamlBasics.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:XamlBasics" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

30. 30 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> <Grid.RowDefinitions>  <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions>  <Button Content="Layout sample" Grid.Row="0" /> <Button Content="Hello world" Grid.Row="1" /> </Grid> </Page> Button タグの Grid.Row という属性で指定している箇所が添付プロパティにあたります。 Button に Grid が持っている Row という添付プロパティの値を設定しています。このように、他のクラスで定義されたプロパティの値を設定できる点が特徴になります。最後に、マークアップ拡張について説明します。マークアップ拡張は、複雑なオブジェクトを簡単に記述するための記法になります。{}で囲んで記述します。例えば{x:Null}とすることで、 null をあらわすことが出来ます。その他に、データバインディングの章で紹介しますが、 {Binding Path=Name}などのようなデータバインディングオブジェクトの生成や、リソースの参照を行うための{StaticResource KeyName}のようなものがあります。マークアップ拡張のそれぞれの意味については、各章で後述します。 4. UWP のコントロールの基本クラスここでは、UWP のコントロールの基本クラスである、DependencyObject について説明を行います。 4.1. DependencyObject

31. 31 DependencyObject は、UWP のコントロールに必要な基本的な機能を提供します。提供する機能は以下の通りです。 1. 依存関係プロパティ 2. 添付プロパティ 3. スレッド操作順に説明していきます。 4.1.1. 依存関係プロパティ依存関係プロパティは、Windows Runtime で使用される特殊なプロパティで、デフォルト値の提供や、プロパティの値に変更があったときに別のプロパティへの値の伝搬や、アニメーションのサポートや、データバインディングのサポートなど様々な機能を持ったプロパティです。具体的には、以下のように実装されます。 public class Range : Windows.UI.Xaml.DependencyObject { // プロパティのキー public static readonly DependencyProperty ValueProperty = DependencyProperty.Register("Value", typeof(int), typeof(Range), new PropertyMetadata(0, ValueChanged)); // CLR のプロパティとしてラッピング public int Value { get { return (int)GetValue(ValueProperty); } set { SetValue(ValueProperty, value); } } private static void ValueChanged(Windows.UI.Xaml.DependencyObject d, DependencyPropertyChangedEventArgs e) { // 変更があったときの処理

32. 32 } } まず、クラスが DependencyObject クラスを継承していることが必要となります。そして、 DependencyProperty クラスの Register メソッドで依存関係プロパティを登録します。引数は、プロパティ名、プロパティの型、プロパティを所有する型、メタデータになります。メタデータは、PropertyMetadata 型でコンストラクタの引数は、プロパティのデフォルト値と、プロパティに変更があったときのコールバック（コールバックの指定はオプション）になります。コールバックは、static なメソッドで、第一引数に値が変更されたオブジェクトと、プロパティの変更後の値と変更前の値を持ったイベント引数というシグネチャになります。依存関係プロパティ自体には必須ではないのですが、CLR のプロパティの形（要は普通の C#のプロパティ）にラップするのが一般的です。こうすることで、コード上から自然にアクセスが可能になります。CLR のプロパティの形式を使用しない場合と使用する場合のコードを以下に示します。 var r = new Range(); // CLR のプロパティを使用しない場合 r.SetValue(Range.ValueProperty, 10); var value = (int)r.GetValue(Range.ValueProperty); // CLR のプロパティのラッパを使用する場合 r.Value = 100; var value2 = r.Value; 依存関係プロパティの PropertyMetadata のコールバックを使うことで、プロパティの値に変更があったときに、他のプロパティの値に状態を伝搬するなどの処理を書くことが出来ます。例として Range クラスで、Min と Max プロパティを追加して、Value が必ず Min と Max の間にあるように調整する処理を追加したコードを以下に示します。 public class Range : Windows.UI.Xaml.DependencyObject { // プロパティのキー public static readonly DependencyProperty ValueProperty =

33. 33 DependencyProperty.Register("Value", typeof(int), typeof(Range), new PropertyMetadata(0, ValueChanged public static readonly DependencyProperty MinProperty = DependencyProperty.Register("Min", typeof(int), typeof(Range), new PropertyMetadata(int.MinValue, Min public static readonly DependencyProperty MaxProperty = DependencyProperty.Register("Max", typeof(int), typeof(Range), new PropertyMetadata(int.MaxValue, Max // CLR のプロパティとしてラッピング public int Value { get { return (int)GetValue(ValueProperty); } set { SetValue(ValueProperty, value); } } public int Min { get { return (int)GetValue(MinProperty); } set { SetValue(MinProperty, value); } } public int Max { get { return (int)GetValue(MaxProperty); } set { SetValue(MaxProperty, value); } } // コールバック private static void ValueChanged(Windows.UI.Xaml.DependencyObject d, DependencyPropertyChangedEventArgs e { ((Range)d).CourceValue(); }

34. 34 private static void MinChanged(Windows.UI.Xaml.DependencyObject d, DependencyPropertyChangedEventArgs e) { ((Range)d).CourceMin(); ((Range)d).CourceValue(); } private static void MaxChanged(Windows.UI.Xaml.DependencyObject d, DependencyPropertyChangedEventArgs e) { ((Range)d).CourceMax(); ((Range)d).CourceValue(); } // 値を調整するメソッド private void CourceMax() { if (this.Max < this.Min) { this.Max = this.Min; } } private void CourceMin() { if (this.Min > this.Max) { this.Min = this.Max; } } private void CourceValue() { if (this.Max < this.Value)

35. 35 { this.Value = this.Max; } if (this.Min > this.Value) { this.Value = this.Min; } } } このクラスを使って以下のようなコードを記述して動作を確認してみます。 var range = new Range(); Debug.WriteLine($"Min: {range.Min}, Max: {range.Max}, Value: {range.Value}"); range.Min = 0; range.Max = 10; range.Value = 100; Debug.WriteLine($"Min: {range.Min}, Max: {range.Max}, Value: {range.Value}"); range.Max = -1; Debug.WriteLine($"Min: {range.Min}, Max: {range.Max}, Value: {range.Value}"); 実行するとデバッグ時の出力ウィンドウに以下の結果が表示されます。 Min: -2147483648, Max: 2147483647, Value: 0 Min: 0, Max: 10, Value: 10 Min: 0, Max: 0, Value: 0 4.1.2. 添付プロパティ次に、XAML でも紹介した添付プロパティについて説明します。添付プロパティは XAML で説明した通り、オブジェクトに対して別のクラスで定義されたプロパティを取得または設定できる機能になります。DependencyObject では、以下のようにして添付プロパティを定義します。

36. 36 public class AttachedPropertySample { public static readonly DependencyProperty SampleValueProperty = DependencyProperty.RegisterAttached("SampleValue", typeof(int), typeof(AttachedPropertySample), new PropertyMetadata(0)); public static int GetSampleValue(Windows.UI.Xaml.DependencyObject obj) { return (int)obj.GetValue(SampleValueProperty); } public static void SetSampleValue(Windows.UI.Xaml.DependencyObject obj, int value) { obj.SetValue(SampleValueProperty, value); } } DependencyProperty クラスの RegisterAttached メソッドで DependencyProperty クラスのインスタンスを作成する点と、添付プロパティは、CLR の形式のプロパティではなく、static な SetXXX と GetXXX という名前でラッパーを作るという点が異なります。また、添付プロパティを定義するクラスは、必ずしも DependencyObject を継承する必要はありません。先ほどの Range クラスに、SampleValue 添付プロパティの値を設定して取得するコードは以下のようになります。 var range = new Range(); // 添付プロパティの値の設定と取得 AttachedPropertySample.SetSampleValue(range, 100); var sampleValue = AttachedPropertySample.GetSampleValue(range); 添付プロパティも PropertyMetadata を使ってデフォルト値とコールバックが指定できます。コールバックを使うことで依存関係プロパティと同じように、別のプロパティに対して変更を伝搬することが出来ます。 4.1.3. スレッド操作

37. 37 DependencyObject は、生成されたスレッドに紐づくという特徴があります。別スレッドから依存関係プロパティなどの操作を行うと例外が発生します。そのため、UWP のコントロールは UI 用のスレッド（UI スレッド）に紐づけられていて、その他のスレッドから操作することが出来なくなっています。例えば、バックグラウンドでデータを読み込んで UI に反映するといった処理で、この特徴が問題になってきます。そのようなケースに対応するため、 DependencyObject には、自分が生成されたスレッドに紐づく CoreDispatcher というクラスを保持しています。このオブジェクトには DependencyObject の Dispatcher プロパティからアクセスが出来ます。CoreDispatcher クラスには、CoreDispatcher が紐づくスレッドで処理を行うための RunAsync メソッドが定義されていて、以下のように記述することでスレッドを切り替えて処理をすることが出来ます。 await range.Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, () => { // DependencyObject の紐づけられたスレッドで処理を行える }); 第一引数の CoreDiapatcherPriority は処理の実行の優先度で以下の値を指定できます。  Idle 一番優先度が低い。アイドル状態のときに実行される。  Low 低い優先順位。自分より高い優先順位の処理がないと実行される。  Normal 普通の優先順位。順番に実行されます。  High 最高の優先順位。ユーザーアプリケーションでの使用はしない。 4.2. FrameworkElement UWP のコントロールの多くがこのクラスを継承しています。このクラスは、レイアウトや XAML を使ったプログラミングで重要になるデータバインディングや、見た目を共通化するための Style や、リソースと呼ばれるデータを定義しておく場所の機能などを提供しています。

38. 38 レイアウトに関するプロパティとして Margin というプロパティがあります。このプロパティを指定することで、コントロールの内側に余白を設けることが出来ます。例えば Button に余白を設ける場合は以下のように XAML を記述します。 <Button Margin=”10,5,10,5” Content=”Hello” /> マージンは、左、上、右、下の順番でカンマで区切って指定します。以下のように余白が設定されます。(黒枠がマージンの外側) リソースは、Resources プロパティとして定義され、そこにブラシや Style などの様々なオブジェクトの名前を付けて登録することが出来ます。リソースに定義されたオブジェクトは、 StaticResource マークアップ拡張によって XAML から取得できます。例えば、SolidColorBrush と言う単色塗りつぶしのブラシを定義して、ボタンから参照するコードは以下のようになります。 <Page x:Class="XamlBasics.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:XamlBasics" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Page.Resources> <SolidColorBrush x:Key="Brush" Color="Red" /> </Page.Resources> <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> <Button Content="Hello" Background="{StaticResource Brush}" />

39. 39 </Grid> </Page> 赤色のブラシを Brush という名前(x:Key で指定)で定義して、それをボタンの背景色に StaticResource マークアップ拡張を使って指定しています。StaticResource で参照できる値は、 StaticResource を使う場所よりも親のコントロールで定義されている必要があります。例えば、上記の Brush という名前のリソースを取得する場合は、Button よりも上の階層である Page の Resources で定義されているため取得できています。また、StaticResource マークアップ拡張は、親へ親へ Resources を探索していくので、同じ名前のリソースが定義されていた場合は、より自分に近い場所のリソースを参照します。Page まで親へさかのぼって見つからない場合は、App クラスの Resources で定義されたものを参照します。App クラスでも見つからない場合は、組み込みで定義されているリソースを参照します。 4.3. Control FrameworkElement を拡張し、コントロールに必要な基本的な機能を提供します。自分でカスタムコントロールを提供する場合に、このクラスを継承することがあります。主な提供機能はコントロールの見た目を自由に変更することが出来る Template という機能になります。 4.4. ContentControl 単一の要素を表示するためのコントロールになります。Page や Button や UserControl など多くのコントロールが、このコントロールを継承しています。ContentControl は、Content プロパティに設定されたデータを非常に柔軟に表示する能力を持っていて、文字列が設定されていれば文字列を表示し、コントロールが設定されていれば、コントロールを表示します。任意のオブジェクトを表示することも可能で、その場合 ContentTemplate というテンプレートを使って見た目を定義できます。また、ContentTemplateSelector などを使うことでオブジェクトをどのように表示するかということをカスタマイズすることも可能です。 4.5. ItemsControl ItemsControl は複数の要素を表示するためのコントロールになります。ItemsSource プロパティに設定された IEnumerable に対して要素を表示します。表示される 1 要素ずつは ContentControl を継承したクラスにホストされ ContentControl で説明したように柔軟に要素

40. 40 を表示することが出来ます。ListBox、ListView などの複数の要素を表示するコントロールは基本的にこのコントロールを継承しています。 ItemsControl は、INotifyCollectionChanged を実装しているコレクション（厳密には IList も必要）を ItemsSource に設定することで、コレクションの要素の追加や削除に表示を追随させることが出来ます。この INotifyCollectionChanged のデフォルトの実装クラスとして System.Collections.ObjectModel.ObservableCollection<T>クラスが提供されています。このクラスを ItemsSource に設定することで、コレクションの追加・削除に簡単に追随させることが出来るようになります。基本的には、要素は縦に並ぶように配置されますが、ItemsPanel を変更することで縦ならびを横ならびに変更できます。具体的には以下のような XAML を記述します。 <ItemsControl> <ItemsControl.ItemsPanel> <ItemsPanelTemplate>  <StackPanel Orientation="Horizontal" /> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> </ItemsControl> このように、ItemsControl は ContentControl のような柔軟な表示をしつつ、ItemsPanel を使って並びを柔軟に対応できるような作りになっています。 4.6. Panel Panel は、複数のコントロールをホストすることが出来るコントロールです。UWP のレイアウトシステムによって、ホストしたコントロールを柔軟に配置することが出来ます。Canvas（絶対座標での要素の配置）、Grid（テーブルレイアウト）、StackPanel（縦や横に積み上げる形で配置）、RelativePanel（相対位置による配置）などのコントロールがあります。これらのコントロールは Children というプロパティにコントロールを格納して使います。Children プロパティは XAML で説明したコンテンツコントロールになっているため、以下のようにタグの下に直接別のコントロールを記述することが出来ます。

41. 41 <StackPanel> <Button Content=”Button1” /> <Button Content=”Button2” /> <Button Content=”Button3” /> </StackPanel> 5. データバインディング著者が UWP（XAML を使った）アプリケーションで非常に重要な要素と考えるデータバインディングについて説明します。この機能を使いこなすことで、見た目とロジックを綺麗に切り離したアプリケーションを作ることが出来ます。 UWP のデータバインディングには 2 種類のものが存在します。WPF の頃から存在する実行時データバインディングと、UWP に追加されたコンパイル時データバインディングになります。順番に解説していきます。 5.1. 実行時データバインディング実行時データバインディングは、FrameworkElement で実装されている機能になります。 DataContext というプロパティに格納されたオブジェクトと、コントロールのプロパティの値の同期をとる機能になります。（厳密にいうと Binding の Source に設定されたオブジェクトのプロパティと、コントロールのプロパティの同期をとる機能になります。何も指定しないとデフォルトの Binding の Source が DataContext になります。）同期の取り方には、以下の 3 種類が存在します。 1. OneWay（デフォルト） DataContext に設定されたオブジェクトのプロパティ（ソースと言います）からコントロールのプロパティ（ターゲットと言います）に対する 1 方向の値の同期になります。ソースの値の変更を感知したらターゲットの値が更新されます。ソースの値の変更の感知は、 DependencyProperty の場合は自動的に、そうでない場合は INotifyPropertyChanged の PropertyChanged イベントにより検知を行います。

42. 42 2. TwoWay ソースからターゲットの間を双方向に同期を取ります。ソースからターゲットへの同期のタイミングは OneWay と同じです。 3. OneTime 初回の 1 度だけソースからターゲットに対して値の同期を取ります。実行時データバインディングには Binding マークアップ拡張を使います。例えば以下のような Person という名前のクラスがあるとします。 public class Person : INotifyPropertyChanged { public event PropertyChangedEventHandler PropertyChanged; private string name; public string Name { get { return this.name; } set { this.name = value; this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Name))); } } private int age; public int Age { get { return this.age; } set { this.age = value; this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Age)));

43. 43 } } } Name と Age プロパティを持っていて、INotifyPropertyChanged インターフェースによる変更通知を実装しています。これを Page の DataContext に以下のように設定します。 <Page x:Class="RuntimeDataBinding.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:RuntimeDataBinding" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Page.DataContext> <local:Person /> </Page.DataContext> <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> </Grid> </Page> Grid を StackPanel（子要素を縦や横に並べて表示するコントロール）に置き換えて、以下のように TextBox と TextBlock を置いてデータをバインドさせます。 <Page x:Class="RuntimeDataBinding.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:RuntimeDataBinding" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Page.DataContext> <local:Person /> </Page.DataContext>

44. 44 <StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <TextBox Text="{Binding Path=Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" /> <TextBlock Text="{Binding Path=Name}" /> <TextBox Text="{Binding Path=Age, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" /> <TextBlock Text="{Binding Path=Age}" /> </StackPanel> </Page> 最初の TextBox と TextBlock の組が Name プロパティへのデータバインディングで、2 つ目の TextBox と TextBlock の組が Age プロパティへのデータバインディングになります。実行すると TextBox と TextBlock の値が Person クラスを通して同期されていることが確認できます。 Binding マークアップ拡張には、以下のようなプロパティが設定出来ます。  Path ソースのプロパティを指定します。「プロパティ 1.プロパティ 2」のようにオブジェクト

45. 45 を辿るように Path を記述することが出来ます。また、配列などの「プロパティ 1[0]」記法にも対応しています。Path プロパティは、Binding マークアップ拡張の最初に書く場合は、省略することが可能です。つまり先ほどのコードの例は「{Binding Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}」のように記述することが出来ます。  Mode OneWay, TwoWay, OneTime を指定します。  UpdateSourceTrigger Default, PropertyChanged, Explicit を指定します。通常、Default は PropertyChanged と同様の意味になります。TextBox の Text に Binding するときは、Default はフォーカスが外れた時に値の同期をとります。テキストが変化する度に値の同期をとる場合は上記の例のように明示的に PropertyChanged を指定します。Explicit を指定した場合は BindingExpression の UpdateSource メソッドを呼び出したタイミングで同期が取られます。  Converter ソースからターゲットと、ターゲットからソースへ値が同期されるときに値の変換ロジックをあらわす IValueConverter を実装したクラスを指定します。  ConverterParameter Converter に渡すパラメータを指定します。  ElementName データバインディングのソースに x:Name で名前を付けたコントロールを指定する場合に使用します。  FallbackValue バインディングで値を返せない場合に返す値を指定します。  TargetNullValue ターゲットの値が null の時に返す値を指定します。

46. 46  RelativeSource バインディングのソースを相対的に指定します。以下の 2 種類の指定方法があります。 {Binding …, RelativeSource={RelativeSource TemplatedParent}} {Binding …, RelativeSource={RelativeSource Self}} TemplatedParent は、ControlTemplate と呼ばれるコントロールの見た目を定義する場所で使用します。コントロール自身がソースとなります。 Self は、ターゲットの要素をバインディングのソースに指定します。  Source バインディングのソースを指定します。何も指定しない場合はデフォルトで DataContext プロパティの値が使われます。 ElementName などを使ったデータバインディングの例を以下に示します。まず、以下のような IValueConverter インターフェースを実装したクラスを定義します。 public class SanConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, string language) { // ソースからターゲット return $"{value}さん"; } public object ConvertBack(object value, Type targetType, object parameter, string language) { // ターゲットからソース方向 // ここでは未サポート throw new NotSupportedException(); } } Converter は、FrameworkElement で紹介したリソースに定義して使用します。では、TextBox に入力した値を使って「○○さん」と表示する TextBlock を作成してみます。 <Page x:Class="RuntimeDataBinding.MainPage"

47. 47 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:RuntimeDataBinding" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Page.Resources> <local:SanConverter x:Key="SanConverter" /> </Page.Resources> <StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <TextBox x:Name="TextBox" /> <TextBlock Text="{Binding Text, ElementName=TextBox, Converter={StaticResource SanConverter}}" /> </StackPanel> </Page> 実行すると、以下のように TextBox の入力に同期して、TextBlock の値が書き換わります。あまりやる機会はないですが、実行時データバインディングは C#のコードからも設定することが出来ます。例えば、Name というプロパティと TextBox の Text をバインディングする場合は以下のようなコードになります。 var binding = new Binding { Path = new PropertyPath("Name"), Mode = BindingMode.TwoWay, UpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged };

48. 48 this.TextBox.SetBinding(TextBox.TextProperty, binding); Binding クラスのインスタンスを生成して、Path や Mode などのプロパティを設定したあとに、ターゲットとなるオブジェクトの SetBinding メソッドで、バインディングのターゲットとなる依存関係プロパティ（添付プロパティも可）と、Binding オブジェクトを指定します。 5.2. コンパイル時データバインディング実行時データバインディングは、バインディングを実行時に解決しますが、コンパイル時データバインディングは、コンパイル時にバインディングの解決を行います。コンパイル時データバインディングの特徴を以下に示します。  実行時ではなくコンパイル時にバインディングの情報が確定するため実行時データバインディングに比べて高速  バインディングのソースが、DataContext ではなく Page になっている  デフォルトの Mode が OneTime になっている実行時データバインディングとの大きな違いは以上のようになります。コンパイル時データバインディングには、{x:Bind …}というマークアップ拡張を使います。TextBox と TextBlock をバインドするコードの例を以下に示します。 <Page x:Class="CompileTimeDataBinding.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:CompileTimeDataBinding" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <TextBox x:Name="TextBox" /> <TextBlock Text="{x:Bind TextBox.Text, Mode=TwoWay}" /> </StackPanel> </Page>

49. 49 x:Name 属性を使って、TextBox を Page のメンバーとして定義しています。そのため、 TextBlock で定義している x:Bind から TextBox という名前で参照できます。実行すると、以下のようになります。コンパイル時データバインディングで指定可能なプロパティは以下の通りです。  Path  Mode  TargetNullValue  FallbackValue  Converter  ConverterParameter 各パラメータについては実行時データバインディングと、ほぼ同じになります。また、x:Bind の特徴として、イベントハンドラをバインドできるという点があります。イベントハンドラのバインドは、以下のシグネチャのメソッドに対して行えます。 void Foo(); void Foo(object sender, object eventArgs); void Foo(object sender, XXXXEventArgs eventArgs); // 各イベントのイベント引数の型例として、以下のようなクラスをバインドしてみたいと思います。 public class Person : INotifyPropertyChanged { public event PropertyChangedEventHandler PropertyChanged;

50. 50 private string name; public string Name { get { return this.name; } set { this.name = value; this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Name))); } } public void ResetName() { this.Name = null; } } XAML を以下に示します。 <Page x:Class="CompileTimeDataBinding.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:CompileTimeDataBinding" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Page.Resources> <local:Person x:Name="Person" /> </Page.Resources> <StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <TextBox Text="{x:Bind Person.Name, Mode=TwoWay, TargetNullValue='未入力'}" /> <TextBlock Text="{x:Bind Person.Name, Mode=OneWay}" /> <Button Content="Reset"

51. 51 Click="{x:Bind Person.ResetName}" /> </StackPanel> </Page> Page の Resources で x:Name を使って Page のメンバーとして Person を定義しています。コードビハインドで以下のように定義するのと同じようなイメージになります。 public sealed partial class MainPage : Page { public Person Person { get; } = new Person(); } そして、TextBox や TextBlock と Name プロパティをバインドしています。イベントのバインドは Button の Click イベントで行っています。Person クラスに定義した ResetName メソッドをバインドしています。実行すると以下のようになります。 TextBox に入力すると、Person クラスの Name プロパティを介して TextBlock に値が同期されます。(コンパイル時データバインディングの TextBox の Text プロパティへのバインディングは特殊で、フォーカスが外れたときに値の同期が行われます)

52. 52 ボタンをクリックすると、TextBox が未入力の状態に戻ります。

53. 53 この他に、コンパイル時データバインディングは実行時にコードから設定できないという点が実行時データバインディングと異なります。 6. アプリケーションライフサイクル UWP アプリは、デスクトップアプリケーションよりスマートフォンアプリケーションのようなライフサイクルで動作します。具体的に言うと、デスクトップではアプリケーションは最小化すると休止状態に移行して、メモリの使用状況によっては OS によってアプリケーションが終了されることがあります。この終了はアプリケーションから検知することが出来ないため、休止状態に入るときに終了されてもいいようにアプリケーションで備える必要があります。モバイルでは、バックグラウンドに回ったときに、休止状態に入ります。この UWP のライフサイクルを図にすると以下のようになります。アプリケーションの起動は、プロジェクトの App クラスの OnLaunched メソッドがエントリーポイントとなります。このとき、引数の LaunchActivatedEventArgs に直前のアプリの状態（終了状態だったのかなど）が入っているので、それを見て必要に応じて復帰処理などを行います。 6.1. アプリケーションの起動シーケンス

54. 54 アプリケーションは、LaunchActivatedEventArgs の PreviousExecutionState の値を見て起動時の処理を適切に行う必要があります。PreviousExecutionState には、以下の値が格納されています。  NotRunning アプリケーションは実行されていなかった。  Running アプリケーションは実行中。  Suspended アプリケーションは中断状態だった。  Terminated アプリケーションは中断後に終了された。  ClosedByUser アプリケーションはユーザーによって終了された。アプリケーションの起動時に行わないといけないことは、新規作成したひな形の App クラスに定義されています。OnLaunched メソッドから不要な処理やコメントを除いたものを以下に示します。 protected override void OnLaunched(LaunchActivatedEventArgs e) { Frame rootFrame = Window.Current.Content as Frame; if (rootFrame == null) { rootFrame = new Frame(); if (e.PreviousExecutionState == ApplicationExecutionState.Terminated) { //TODO: 以前中断したアプリケーションから状態を読み込みます }

55. 55 Window.Current.Content = rootFrame; } if (e.PrelaunchActivated == false) { if (rootFrame.Content == null) { rootFrame.Navigate(typeof(MainPage), e.Arguments); } Window.Current.Activate(); } } UWP アプリは、Window.Current を通じてアプリの Window にアクセスできます。この Window の Content プロパティに Frame という画面遷移機能を持ったコントロールを配置して、その中で画面遷移を行います。Window.Current.Content に値が設定されていないということは、終了状態からの起動ということなので、Frame を新規作成して設定します。さらに先ほど説明した PreviousExecutionState を確認して Terminated の時に、直前の中断時に保存したデータを使って復元を行います。最後に PrelaunchActivated で直前のアクティブ化状態を確認して、アクティブでない場合は、必要に応じて画面遷移（Frame の Navigate メソッド）を行い、自分自身をアクティブ化します。以上が、アプリケーションの基本的な起動シーケンスになります。 6.2. サスペンド時の処理アプリケーションがサスペンドされるときには、App クラスで Suspending イベントが発生します。デフォルトで作成されている App クラスではコンストラクタで Suspending イベントを購読して、OnSuspending メソッドが呼ばれるようになっています。 public App() { this.InitializeComponent(); this.Suspending += OnSuspending;

56. 56 } private void OnSuspending(object sender, SuspendingEventArgs e) { var deferral = e.SuspendingOperation.GetDeferral(); //TODO: アプリケーションの状態を保存してバックグラウンドの動作があれば停止します deferral.Complete(); } e.SuspendingOperation.GetDeferral メソッドの呼び出しから Complete メソッドの間で保存処理を行います。この GetDeferral で取得したオブジェクトの Complete メソッドを呼び出すと中断時の状態保存が終わったということを通知したことになります。 6.3. サスペンドからの復帰あまり利用することはありませんが、サスペンド状態からアプリケーションが終了されないままフォアグラウンドに復帰したときに呼び出される処理があります。App クラスで Resuming イベントを購読することで処理が出来ます。 6.4. アプリケーションライフサイクルに対応したサンプルここでは、簡単な中断処理に対応したアプリケーションを作成したみたいと思います。 LifecycleApp という名前でアプリケーションを作ります。そして、以下のようなクラスを作成します。 using System.ComponentModel; namespace LifecycleApp { public class LifecycleAppModel : INotifyPropertyChanged { public static LifecycleAppModel Instance { get; } = new LifecycleAppModel(); public event PropertyChangedEventHandler PropertyChanged; private string value;

57. 57 public string Value { get { return this.value; } set { this.value = value; this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Value))); } } } } このクラスを使って簡単なページを作成します。TextBox にデータを表示するだけの単純なページにします。MainPage.xaml.cs に以下のようなプロパティを定義します。 public sealed partial class MainPage : Page { public LifecycleAppModel Model { get; } = LifecycleAppModel.Instance; public MainPage() { this.InitializeComponent(); } } MainPage.xaml を以下のように編集して LifecycleAppModel の Value と TextBox の Text をバインドします。 <Page x:Class="LifecycleApp.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:LifecycleApp" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

58. 58 mc:Ignorable="d"> <StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <TextBox Text="{x:Bind Model.Value, Mode=TwoWay}" /> </StackPanel> </Page> この状態でアプリケーションが中断されたときにどう動くか確認してみます。アプリケーションをデバッグ起動して、Visual Studio のツールバーで右クリックして「デバッグの場所」にチェックを入れます。（チェックが入っている場合は、そのままで大丈夫です）

59. 59 デバッグの場所にチェックを入れると「ライフサイクルイベント」というのが作成されます。そこの「中断とシャットダウン」を選択することで、アプリケーションをサスペンドさせて終了させることが出来ます。

60. 60 MainPage の TextBox に任意の文字列を入力して「中断とシャットダウン」をします。そして、再度アプリケーションを起動すると、TextBox の文字が消えていることが確認できます。ユーザーからしたら、最小化（モバイルの場合はバックグラウンドに回した）したアプリの入力がクリアされてしまったという挙動になります。これを中断処理に対応して改善します。まず、App クラスの OnSuspending メソッドで ApplicationData.Current.LocalSettings を使ってデータの保存を行います。ApplicationData.Current.LocalSettings.Values（ローカルにデータを保存するための Dictionary）に InputValue をキーにして LifecycleAppModel の Value プロパティの値を保存します。 private void OnSuspending(object sender, SuspendingEventArgs e) { var deferral = e.SuspendingOperation.GetDeferral(); ApplicationData.Current.LocalSettings.Values["InputValue"] = LifecycleAppModel.Instance.Value; deferral.Complete(); } 次に、OnLaunched メソッドの Terminated の if 文に、この保存したデータを読み込む処理を追加します。 if (e.PreviousExecutionState == ApplicationExecutionState.Terminated) { if (ApplicationData.Current.LocalSettings.Values.ContainsKey("InputValue")) { LifecycleAppModel.Instance.Value = (string) ApplicationData.Current.LocalSettings.Values["InputValue"];

61. 61 } } キーの存在を確認して、キーが存在した場合にデータの読み出しを行っています。この処理を追加して、先ほどのように「中断とシャットダウン」をします。すると以下のように入力したデータが残っていることが確認できると思います。中断前が以下のようになります。中断からの復帰後は、以下のようになります。 7. ローカルデータとローミングデータ UWP では、以下のデータの保存場所が提供されています。  ローカルアプリデータ  ローミングデータ

62. 62  一時アプリデータアプリデータの保存方法には、設定とファイルという 2 種類があります。設定は、int や string などの基本的な型や DateTime 型や GUID 型などを保存することが出来るディクショナリのような形で提供されます。ファイルは、任意のファイル形式でデータを保存することが出来ます。 7.1. ローカルアプリデータローカルアプリデータは、ApplicationData.Current.LocalSettings で設定にアクセスできます。 ApplicationData.Current.LocalFolder でファイルを保存するためのフォルダにアクセスできます。まず、設定についてみていきます。設定の一番簡単な使い方は、Values プロパティにディクショナリのようにアクセスすることです。コード例を以下に示します。 var settings = ApplicationData.Current.LocalSettings; settings.Values["Key"] = "Value"; var value = (string)settings.Values["Key"]; if (settings.Values.ContainsKey("Key")) { // Key が存在する場合 } else { // Key が存在しない場合 } // 削除 settings.Values.Remove(“Key”); ApplicationDataCompositeValue というクラスを使うことで、値をまとめて管理することが出来ます。以下のようなコードになります。 var settings = ApplicationData.Current.LocalSettings; var composite = new ApplicationDataCompositeValue();

63. 63 composite["Key1"] = "Value1"; composite["Key2"] = "Value2"; settings.Values["compositeValue"] = composite; この他に、ApplicationDataContainer を使って、データを階層化して管理することが出来ます。この階層は 32 階層まで作成することが出来ます。 var settings = ApplicationData.Current.LocalSettings; // 作成 var container = settings.CreateContainer("Container1", ApplicationDataCreateDisposition.Always); // 値の設定 container.Values["Key1"] = "Value1"; // 存在確認 if (settings.Containers.ContainsKey("Container1")) { // 存在するとき } else { // 存在しないとき } // 削除 settings.DeleteContainer("Container1"); 設定は手軽に使えますが、ファイルを使って任意の形式でローカルアプリデータにデータを保存することもできます。ファイルにアクセスするコードは以下のようになります。 // フォルダを取得 var folder = ApplicationData.Current.LocalFolder; // ファイルを作成する（存在する場合は置き換える） var file = await folder.CreateFileAsync("sample.txt", CreationCollisionOption.ReplaceExisting); // ファイルに出力する await FileIO.WriteTextAsync(file, "Hello world"); // ファイルから読み込む var data = FileIO.ReadTextAsync(file);

64. 64 ApplicationData.Current.LocalFolder に対して、CreateFileAsync を呼び出すことでファイルを作成できます。第一引数がファイル名で、第二引数でファイルが存在したときの挙動などを指定します。上記コードでは、ReplaceExisting を指定して、ファイルが既に存在する場合は、新しいもので置き換えるという指定をしています。ファイルの読み書きは FileIO クラスの WriteTextAsync メソッドと ReadTextAsync を使います。JSON.NET などの.NET のクラスライブラリと連携するためには System.IO.Stream が必要になるケースがあります。これは、ファイルの拡張メソッドを使うことで取得が可能になっています。 // 書き込み using (var stream = await file.OpenStreamForWriteAsync()) { // JSON.NET などを使う } // 読み込み using (var stream = await file.OpenStreamForReadAsync()) { // JSON.NET などを使う } アプリケーションのバージョンアップなどにより、設定やファイルに保存しているデータに非互換が発生してしまった場合は、ApplicationData.Current.SetVersionAsync メソッドを使用してバージョン管理を行うことが出来ます。SetVersionAsync メソッドは、第一引数にバージョン番号を指定し、第二引数にコールバックを指定します。コールバックでは、以下のように現在のバージョンと要求されたバージョンが確認できます。 await ApplicationData.Current.SetVersionAsync(0, r => { var d = r.GetDeferral(); Debug.WriteLine($"CurrentVersion: {r.CurrentVersion}, DesiredVersion: {r.DesiredVersion}"); // バージョンが違ってたら必要に応じて変換ロジックを走らせる d.Complete();

65. 65 }); SetVersionAsync を呼び出した場合は、バージョン番号が変わっていなくてもコールバックが呼ばれるので、その点は注意する必要があります。 7.2. ローミングデータローカルアプリデータは、デバイスのローカルストレージに保存されます。ここで紹介するローミングデータは、同じアプリのデータを複数のデバイスで同期をとります。この機能を使うことで、例えばユーザーがデスクトップで途中まで呼んでいた書籍を、外出先で続きから読むといったシナリオが実現可能になります。ローミングデータにも、設定とファイルが存在して、以下のようにアクセスを行います。 // 設定 var roamingSettings = ApplicationData.Current.RoamingSettings; // ファイル var roamingFolder = ApplicationData.Current.RoamingFolder; RoamingSettings も RoamingFolder も、ローカルアプリデータと同じ方法で使用できます。ローミングデータは、ApplicationData.RoamingStorageQuota で指定されるサイズ（KB 単位）以上のデータがある場合は、ローミングが実行されません。この値は、Windows 10 Version 1511 で確認したところ 100 という値が反ってきました。 RoamingData がアップデートされたことを検知するには、 ApplicationData.Current.DataChanged イベントを使用します。以下のようなコードになります。 public MainPage() { this.InitializeComponent(); ApplicationData.Current.DataChanged += Current_DataChanged; } private void Current_DataChanged(ApplicationData sender, object args) {

66. 66 // RoamingData がアップデートされた } 7.3. 一時アプリデータ一時アプリデータは、設定は存在せずにファイルのみになります。以下のようにして一時アプリデータのフォルダを取得します。 // 一時アプリフォルダを取得する var folder = ApplicationData.Current.TemporaryFolder; フォルダ取得後は、ローカルアプリデータで示した通りファイルへのアクセスが可能です。 8. Advanced XAML ここでは、UWP を作るうえで必須となる XAML の高度な機能を紹介したいと思います。 8.1. Style UWP には、Style と呼ばれるコントロールのプロパティの設定を外だしにして定義する仕組みがあります。これを使うことで HTML の CSS のように見た目の定義を別にすることが出来ます。HTML の CSS と異なる点は、XAML という統一された言語でコントロールのツリー構造と見た目の定義ができるという点です。HTML の CSS を知っている方向けに説明すると、 HTML の CSS がセレクタによって適用対象を指定して、見た目を定義するのに対して、 XAML の Style は名前を付けてリソースに定義して、コントロールから、それを参照して設定します。（コントロールのスタイルにインラインで書くことも出来ますが、それならコントロールに直接プロパティを設定したほうがいいと思われます） Style の定義は、以下のように Page や App クラスの Resources に Style タグを使って定義します。 <Page x:Class="ControlsApp.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:ControlsApp" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

67. 67 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Page.Resources>  <Style x:Key="MyTextBlock" TargetType="TextBlock">  <Setter Property="FontStyle" Value="Italic" />  <Setter Property="FontWeight" Value="Bold" /> </Style> </Page.Resources> <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">  <TextBlock Text="Hello world" Style="{StaticResource MyTextBlock}"/> </Grid> </Page> Style タグの TargetType で、何の型に対する Style なのか指定します。そして、Style タグの中に Setter タグを使って何のプロパティに、どんな値を設定するのかを指定します。定義した Style は、コントロールにある Style プロパティに StaticResource マークアップ拡張を使って指定します。上記の XAML で、以下のように TextBlock が太字のイタリック体になります。 Style は、別のスタイルをベースに拡張して作ることも出来ます。Style の BaseOn にベースとなる Style を StaticResource マークアップ拡張で指定します。先ほどの例の MyTextBlock スタ

68. 68 イルを拡張して赤色の設定を追加した ExTextBlock という名前のスタイルを定義した XAML を以下に示します。 <Page x:Class="ControlsApp.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:ControlsApp" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Page.Resources>  <Style x:Key="MyTextBlock" TargetType="TextBlock">  <Setter Property="FontStyle" Value="Italic" />  <Setter Property="FontWeight" Value="Bold" /> </Style>  <Style x:Key="ExTextBlock" TargetType="TextBlock" BasedOn="{StaticResource MyTextBlock}"> <Setter Property="Foreground" Value="Red" /> </Style> </Page.Resources> <StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">  <TextBlock Text="Hello world" Style="{StaticResource MyTextBlock}" /> <TextBlock Text="Hello world2" Style="{StaticResource ExTextBlock}" />

69. 69 </StackPanel> </Page> この XAML を表示すると以下のようになります。ExTextBlock が、MyTextBlock に対して赤色を追加したものになっていることが確認できます。 8.1.1. 定義済みのスタイル UWP には、いくつかの Style が予め定義されています。この定義は「C:Program Files (x86)Windows Kits10DesignTimeCommonConfigurationNeutralUAP10.0.10586.0Generic」フォルダの generic.xaml でされています。よく使うものをいくつか紹介します。  HeaderTextBlockStyle ヘッダー用の大きな TextBlock 用 Style です。  SubheaderTextBlockStyle サブヘッダー用のヘッダーより一回り小さな TextBlock 用の Style です。  TitleTextBlockStyle タイトル用の TextBlock 用の Style です。  SubtitleTextBlockStyle サブタイトル用の TextBlock 用の Style です。  BodyTextBlockStyle 本文用の TextBlock 用の Style です。

かずきのUWP入門

一希 大田

かずきのUWP入門

一希大田