Visual Studio 2013 C# + XAML 入門

Presentation on theme: "Visual Studio 2013 C# + XAML 入門"— Presentation transcript:

1 Visual Studio 2013 C# + XAML 入門
大田　一希

2 注意事項 記載の内容は個人の見解であり、所属する企業を代 表するものではありません。

3 もくじ Visual Studio overview アプリの作成と実行 プロジェクトの作り方 プログラムの実行方法
おススメのひな形プロジェクトの作り方 アプリの作り方 C# 実例：フィードリーダー まとめ

4 Visual Studio overview
Windows上の最強のプログラミング環境

5 作れるアプリケーション(代表的なもの） デスクトップアプリケーション C++, C#, VB, F#

6 Webアプリケーション クライアント側 HTML5+CSS3/JavaScript サーバー側 ASP.NET ASP.NET
HTTP

7 Windows ストア アプリ Windows 8以降用の全画面表示アプリ(1画面に2つ, 3 つ表示も可能） ストアで配布可能 開発言語
C#/XAML VB/XAML JS/HTML5+CSS3 C++/XAML, DirectX

8 LightSwitch Office app, Workflow Windows phone etc…
ネイティブ C/C++ WinForm C#/VB WPF C#+XAML VB+XAML WebForm C# VB HTML CSS JS MVC C# VB HTML CSS JS WebAPI C# VB .NET XAML/C# XAML/VB Web HTML5/JS ネイティブ XAML/C++ デスクトップアプリ Webアプリ Windows ストア アプリ Visual Studio 作れるもの全体像 + 今回の範囲

9 アプリの作成と実行

10 アプリケーションの単位 ソリューション プロジェクト Visual Studioでプログラムを作るときの大きな単位
プロジェクトを複数持ってる プロジェクト 1つのアプリケーション(exe, dll, appx)を作るためのソース コードをまとめたもの

11 ソリューション(*.sln) プロジェクト1 (ストアアプリ) Hoge.cs Hoge.xaml Foo.cs プロジェクト2 (クラスライブラリ) Moge.cs Bar.cs プロジェクト3 (クラスライブラリ) Foooooo.cs

12 最初はシンプルにプロジェクト１つ ソリューション(*.sln) プロジェクト1 (ストアアプリ) Hoge.cs Hoge.xaml
Foo.cs

13 最初はシンプルにプロジェクト１つ コンパイル パッケージング (自動でしてくれるので 覚えなくてもOK) 実行・デバッグ
ソリューション(*.sln) プロジェクト1 (ストアアプリ) Hoge.cs Hoge.xaml Foo.cs コンパイル パッケージング (自動でしてくれるので 覚えなくてもOK) 実行・デバッグ

14 プロジェクトの作り方 Visual Studio ファイル→新規作成→プロジェクト

15 プロジェクトの作り方 インストール済み → テンプレート → Visual C# → Windows ス トア → グリッドアプリケーション(XAML) アルファベットと数字で 好きな名前をつける

16 プロジェクト完成 基本的なアプリケーションのひな形が完成

17 プロジェクトの実行方法

18 実行方法は3通り ローカルコンピューター シミュレーター リモートコンピューター （今回は割愛します）

19 実行方法（ローカルコンピューター） ローカルコンピュータを選択(or F5)

20 実行方法（ローカルコンピューター） 画面全体に表示されます！？

21 実行方法（シミュレーター） シミュレータに切り替えて

22 実行方法（シミュレーター） シミュレータをクリック（or F5)でシミュレータが 立ち上がってアプリケーションが動きます

23 ローカルコンピューターとシミュレーターの比較
実際の動作を確かめることができる シミュレーター 動作は本物と変わらないとおもう 解像度を変えて動作させることができる 位置情報を疑似的に与えることができる タッチ非対応端末でもタッチ操作を再現できる タップ、スワイプ、回転、ピンチ Visual Studioを見ながら動作させることができる

24 おススメのひな形作成方法

25 おススメのひな形作成方法が何故必要か 新しいアプリケーション（XAML） グリッドアプリケーション（XAML）
何もなさ過ぎて辛い グリッドアプリケーション（XAML） ハブアプリケーション（XAML） 分割アプリケーション（XAML） 色々有りすぎて辛い あると便利なクラス 邪魔なクラス

26 作り方 グリッドアプリケーション（XAML）を作成 GroupDetailPage.xamlを削除
GroupedItemsPage.xamlを削除 ItemDetailPage.xamlを削除 DataModelフォルダを削除

27 作り方 プロジェクトの右クリックメニューから追加→新し い項目

28 作り方 基本ページをMainPage.xamlという名前で作成

29 App.xaml.csを書き換える MainPageを初期表示にする typeof(GroupedItemsPage)を
typeof(MainPage)に書き換える

30 これを土台に自分のオリジナルアプリケーションに仕上げていく
余計なもののないひな形の完成 画像/テキスト Webからの情報 色々な コントロール これを土台に自分のオリジナルアプリケーションに仕上げていく

31 参考 この手順を実施したプロジェクトテンプレートあり ます
この手順を実施したプロジェクトテンプレートあり ます Windows ストア アプリのプレーンなプロジェクトテンプ レート

32 アプリの作り方

33 もくじ XAMLとC#の役割 画面の作り方 クラス XAMLとクラス Binding テンプレート機能

34 XAMLとC#の役割（復習） 見た目(XAML)と処理(C#) XAML 画面 Button GridView ListBox AppBar
アニメーション etc… C# 処理 画面操作への応答 クリック ホールド etc… 計算ロジック データ取得 Twitter Facebook RSS XAMLへの更新通知 連携

35 画面作成 ツールボックスから画面にドラッグアンドドロップ マウスで位置を微調整

36 画面作成 プロパティウィンドウ（右下に出てるはず）で細かい 設定 よく使うもの Contentプロパティ Marginプロパティ
プロパティウィンドウ（右下に出てるはず）で細かい 設定 よく使うもの Contentプロパティ 表示する内容を設定 Marginプロパティ 左・上・右・下の余白 HorizontalAlignmentプロパティ VerticalAlignmentプロパティ 上下左右のどちらかに寄せるか、真ん中か、いっぱいにするか Widthプロパティ Heightプロパティ 幅と高さを指定できる

37 よく使うコントロール Button TextBlock Image 押すやつ 文字を表示するやつ 画像を表示するやつ TextBlock

38 よく使うコントロール AppBar CommandBar AppBarButton
画面の上と下に出るWindows ストア アプリの右クリック メニュー的なもの CommandBar ボタンを並べるだけに特化したAppBar AppBarButton AppBarに置くための専用の丸いボタンコントロール

39 よく使うコントロール GridView 横スクロールでコンテンツを表示するやつ

40 Paddingを15に指定して中にImageを配置した例
よく使うコントロール(レイアウト系) Border 枠の中にコントロールを配置する MarginやPaddingで余白をつけて中にコンテンツを配置する Paddingを15に指定して中にImageを配置した例

41 よく使うコントロール(レイアウト系) StackPanel 縦並び・横並びでコントロールを配置していく
左 Orientation: Vertical 右 Orientation: Horizontal

42 よく使うコントロール(レイアウト系) Grid（一番よく使います） マス目を区切って、その中にコントロールを配置する

43 Binding

44 Bindingとは コントロールのプロパティと、クラスのプロパティ の値の同期をとる仕組み
コントロールのプロパティと、クラスのプロパティ の値の同期をとる仕組み ページのDataContextプロパティに設定したクラスのプロパ ティとコントロールのプロパティの同期をとる仕組み

45 Bindingとは ページ DataContextプロパティ TextBlock Personクラス Name：たなか Textプロパティ
同期 ターゲット ソース

46 Bindingの方向 一方通行（デフォルトの挙動） OneWay ソース ターゲット 双方向 ソース ターゲット TwoWay

47 バインドの仕方 DataContextに設定するためのクラスを定義する

48 // データの入れ物のクラスを定義(INotifyPropertyChangedを実装するのはお約束)
public class Person : INotifyPropertyChanged { private string name; // 名前 public string Name get { return name; } set { name = value; OnPropertyChanged(); } // クラスの変更をXAMLへ通知するためのおまじない } // クラスの変更をXAMLへ通知するためのおまじない public event PropertyChangedEventHandler PropertyChanged; protected virtual void OnPropertyChanged([CallerMemberName]string propertyName = null) var h = this.PropertyChanged; if (h != null) h(this, new PropertyChangedEventArgs(propertyName));

49 MainPage.xaml.csの書き換え DefaultViewModelプロパティの型をPersonに変える
private Person defaultViewModel = new Person { Name = "たなか" }; /// <summary> /// これは厳密に型指定されたビュー モデルに変更できます。 /// </summary> public Person DefaultViewModel { get { return this.defaultViewModel; } }

50 デザイナ用のDataContextの設定
デザイナにDataContextにPersonが入っていることを 伝えるために、pageRootを選択して書式メニューか ら[デザイン時のDataContextの設定]を選択

51 デザイナ用のDataContextの設定
DesignInstanceに設定 DataContextに設定する クラスを選択 IsDesignTimeCreatableをチェック （おまじない的い）

52 バインドの仕方 バインドしたいコントロールを選択
プロパティウィンドウでバインドしたいプロパティ の右側の■から「データバインディングの作成」

53 バインドの仕方 バインドの種類をデータ コンテキストに設定 パスにDataContextに設定し たクラスのプロパティが出 てくるので選択

54 寄り道 XAMLでは、以下のようなコードが追加されています
<TextBlock x:Name="pageTitle" Text="{Binding Name}" … IsHitTestVisible="false" …/>

55 実行して動作を確認 DataContextに設定したクラスの値がコントロールに 表示される

56 クラスの値を書き換えてみる CommandBarをBottomAppBarに置いてAppBarButton をPrimaryCommandsに設定する ドキュメントアウトラインのBottomAppBarとCommandBar のPrimaryCommandsの右クリックメニューから追加できる

57 クラスの値を書き換えてみる AppBarButtonをダブルクリックしてクリック時の処 理を生成 ダブルクリック 処理のひな形が作成される
private void AppBarButton_Click(object sender, RoutedEventArgs e) { } ダブルクリック 処理のひな形が作成される

58 クラスの値を書き換えてみる クリック時の処理にDefaultViewModelのプロパティ を書き換える処理を追加
private void AppBarButton_Click(object sender, RoutedEventArgs e) { // DefaultViewModel(Personクラス)のNameを書き換える this.DefaultViewModel.Name = "クリックしました"; }

59 動作確認 ポイント：画面のデータを直接書き換えてないのに画面のデータが更新されている。 起動直後 AppBarのボタンを押す
画面の文字が書き換わる ポイント：画面のデータを直接書き換えてないのに画面のデータが更新されている。

60 画面作成 ContentTemplate(ItemTemplate)プロパティ
難易度が高いけどよく使うので覚えないと辛い Windows ストア アプリでよくみる下のような見た 目を作るときに必須 犬の写真 アンセム 犬の写真 アンセム 犬の写真 アンセム 犬の写真 アンセム

61 データをどういう形で見せるかひな形を定義
テンプレート機能とは データの見た目を定義する機能 犬の写真 {Binding Name} {Binding Picture} データをどういう形で見せるかひな形を定義 犬の写真 アンセム データを流し込む Dogクラス Name: アンセム Picture:

62 テンプレートの作り方 GridViewなどで右クリック 追加テンプレートの編集→生成されたアイテムの編集→空 アイテムの編集
追加テンプレートの編集→生成されたアイテムの編集→空 アイテムの編集 作成後に、もう一度編集するには「現在の編集」を選ぶ

63 テンプレートの名前を付ける 名前大事なので、わかりやすい名前をつけましょう

64 テンプレート編集画面 非常に味気ない画面が出ます ここをクリックでページのデザインに戻る

65 テンプレートの編集 普通のページと同じように編集

66 データのバインド ImageコントロールはSourceプロパティに画像を指定 TextBlockプロパティはTextプロパティに文字列を指定
デザイン時のDataContextを設定することで GUI上からバインドもできます。 {Binding Name} {Binding Picture} データをどういう形で見せるかひな形を定義

67 navigationHelper_LoadStateメソッドがページ表示時の処理を書くところ
データの流し込み GridViewに名前をつけてItemsSourceにデータを設定 navigationHelper_LoadStateメソッドがページ表示時の処理を書くところ 100件ぶんのDogデータを生成して設定 Dogデータを格納するクラス

68 画像を設定して実行 実行 Assetsフォルダにdog.pngを置く GridViewにテンプレートで指定した形でデータが表示される

69 C# ストアアプリ開発で覚えておいてほしいこと

70 C#の情報は C# によるプログラミング入門

71 データと処理の塊のクラス プロジェクトの右クリックメニューで新規項目追加

72 名前をつける わかりやすい名詞をつけましょう

73 クラスの構造 公開範囲 名前 継承元 プロパティ（クラスの持つデータ） プロパティ（クラスの持つデータ） メソッド（処理）
// データの入れ物のクラスを定義(INotifyPropertyChangedを実装するのはお約束) public class Person : INotifyPropertyChanged { private string name; // 名前 public string Name get { return name; } set { name = value; OnPropertyChanged(); } // クラスの変更をXAMLへ通知するためのおまじない } // クラスの変更をXAMLへ通知するためのおまじない public event PropertyChangedEventHandler PropertyChanged; protected virtual void OnPropertyChanged([CallerMemberName]string propertyName = null) var h = this.PropertyChanged; if (h != null) h(this, new PropertyChangedEventArgs(propertyName)); プロパティ（クラスの持つデータ） プロパティ（クラスの持つデータ） メソッド（処理）

74 クラスの構造 コンストラクタ 最初に必ず呼ばれるメソッド
// データの入れ物のクラスを定義(INotifyPropertyChangedを実装するのはお約束) public class Person : INotifyPropertyChanged { public Person() } コンストラクタ 最初に必ず呼ばれるメソッド

75 MainPageもクラス MainPage.xaml.csを見てみよう

76 MainPageもクラス MainPage.xaml.csを見てみよう

77 たくさんのデータを扱うコレクション プログラムでは、1つだけのデータを扱うことはほ とんどない。 以下のように定義する
プログラムでは、1つだけのデータを扱うことはほ とんどない。 Twitterのタイムラインしかり、Facebookのタイムラインし かし、LINEの会話データしかり、etc… 以下のように定義する ObservableCollection<入れるクラスの名前>

78 たくさんのデータを扱うコレクション MainPageにpeopleという名前で ObservableCollection<Person>を作ってAddPeopleメ ソッドで追加をするコード例

79 コレクションとGridViewコントロール
コレクションをGridViewのItemsSourceプロパティに バインドすると、コレクションの内容を元に GridViewが表示されます。 表示内容はItemTemplateで定義した見た目になります

80 イベントとイベントハンドラ アプリケーションは 例 「コントロールで○○されたときにする××をする」の積 み重ね ○○ = イベント
「コントロールで○○されたときにする××をする」の積 み重ね ○○ = イベント ×× = イベントハンドラ 例 ボタンを「クリック」されたら「メッセージを表示」する

81 コントロールのイベント コントロールを選ぶ プロパティの雷マークをクリック ダブルクリックで イベントハンドラ作成 コントロールの
イベント一覧

82 コントロールのイベント イベントハンドラ

83 覚えておこう（async, await) awaitは、時間のかかる処理の完了を待つ asyncはawaitを書くメソッドにつける
メッセージボックスでユーザーがボタンを押すまで待つ ネットワークの先のデータをとってくるときに、取れるま で待つ Windows RuntimeのAPIで***Asyncという名前になっている ものに対して使う asyncはawaitを書くメソッドにつける private async void Button_Click(object sender, RoutedEventArgs e) { var file = await ApplicationData Current.LocalFolder.GetFileAsync("sample.txt"); }

84 最後に覚えておくといいポイント MainPage.xaml.cs navigationHelper_LoadStateメソッド
ページ表示時の処理 navigationHelper_SaveStateメソッド ページから離れる時の処理 ボタンをダブルクリックして作られるメソッド ボタンをクリックしたときの処理 クラス名と同じ名前のメソッド クラスが作られるときに最初に呼ばれる処理

85 実例 TODOリスト

86 デモ 時間があれば、軽いRSS表示アプリを作ってみよう と思います。

87 まとめ

88 これくらい出来ればとりあえずOK 新規作成 実行 クラスの作成 データバインド クリックイベントの処理 コレクションの扱い

89 参考 Windows デベロッパー センター jp/windows/br aspx