visual studio 2013 overview
DESCRIPTION
TRANSCRIPT
![Page 1: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/1.jpg)
Visual Studio 2013C# + XAML 入門Visual Studio の基本的な使い方と C# と XAML 基礎
大田 一希
![Page 2: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/2.jpg)
注意事項• 記載の内容は個人の見解であり、所属する企業を代
表するものではありません。
![Page 3: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/3.jpg)
もくじ• Visual Studio overview
• アプリの作成と実行• プロジェクトの作り方• プログラムの実行方法• おススメのひな形プロジェクトの作り方• アプリの作り方• C#
• 実例:フィードリーダー• まとめ
![Page 4: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/4.jpg)
Visual Studio overview• Windows 上の最強のプログラミング環境
![Page 5: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/5.jpg)
作れるアプリケーション ( 代表的なもの)• デスクトップアプリケーション
C++, C#, VB, F#
![Page 6: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/6.jpg)
Web アプリケーション• クライアント側 HTML5+CSS3/JavaScript
• サーバー側 ASP.NET
ASP.NETHTML5/CSS3JavaScript
HTTP
![Page 7: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/7.jpg)
Windows ストア アプリ• Windows 8 以降用の全画面表示アプリ (1 画面に 2
つ , 3 つ表示も可能)• ストアで配布可能• 開発言語
C#/XAML VB/XAML JS/HTML5+CSS3 C++/XAML, DirectX
![Page 8: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/8.jpg)
作れるもの全体像 + 今回の範囲
Visual Studio
デスクトップアプリ Web アプリ Windows ストア アプリ
ネイティブC/C++
WinFormC#/VB
WPFC#+XAMLVB+XAML
WebFormC#VB
HTMLCSSJS
MVCC#VB
HTMLCSSJS
WebAPIC#VB
.NETXAML/C#XAML/VB
WebHTML5/JS
ネイティブXAML/C++
LightSwitchOffice app, Workflow
Windows phoneetc…
![Page 9: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/9.jpg)
アプリの作成と実行
![Page 10: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/10.jpg)
アプリケーションの単位• ソリューション
Visual Studio でプログラムを作るときの大きな単位 プロジェクトを複数持ってる
• プロジェクト 1 つのアプリケーション (exe, dll, appx) を作るためのソース
コードをまとめたもの
![Page 11: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/11.jpg)
ソリューション (*.sln)
プロジェクト 1( ストアアプリ )
Hoge.cs
Hoge.xaml
Foo.cs
プロジェクト 2( クラスライブラリ )
Moge.cs
Bar.cs
プロジェクト 3( クラスライブラリ )
Bar.cs
Foooooo.cs
![Page 12: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/12.jpg)
ソリューション (*.sln)
プロジェクト 1( ストアアプリ )
Hoge.cs
Hoge.xaml
Foo.cs
最初はシンプルにプロジェクト1つ
![Page 13: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/13.jpg)
ソリューション (*.sln)
プロジェクト 1( ストアアプリ )
Hoge.cs
Hoge.xaml
Foo.cs
最初はシンプルにプロジェクト1つ
コンパイルパッケージング
( 自動でしてくれるので覚えなくても OK)
実行・デバッグ
![Page 14: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/14.jpg)
プロジェクトの作り方• Visual Studio
ファイル→新規作成→プロジェクト
![Page 15: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/15.jpg)
プロジェクトの作り方• インストール済み → テンプレート → Visual C# → Windows
ストア → グリッドアプリケーション (XAML)
アルファベットと数字で好きな名前をつける
![Page 16: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/16.jpg)
プロジェクト完成• 基本的なアプリケーションのひな形が完成
![Page 17: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/17.jpg)
プロジェクトの実行方法
![Page 18: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/18.jpg)
実行方法は 3 通り• ローカルコンピューター• シミュレーター• リモートコンピューター
(今回は割愛します)
![Page 19: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/19.jpg)
実行方法(ローカルコンピューター)• ローカルコンピュータを選択 (or F5)
![Page 20: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/20.jpg)
実行方法(ローカルコンピューター)• 画面全体に表示されます!?
![Page 21: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/21.jpg)
実行方法(シミュレーター)• シミュレータに切り替えて
![Page 22: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/22.jpg)
実行方法(シミュレーター)• シミュレータをクリック( or F5) でシミュレータが
立ち上がってアプリケーションが動きます
![Page 23: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/23.jpg)
ローカルコンピューターとシミュレーターの比較• ローカルコンピューター
実際の動作を確かめることができる
• シミュレーター 動作は本物と変わらないとおもう 解像度を変えて動作させることができる 位置情報を疑似的に与えることができる タッチ非対応端末でもタッチ操作を再現できる
タップ、スワイプ、回転、ピンチ Visual Studio を見ながら動作させることができる
![Page 24: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/24.jpg)
おススメのひな形作成方法
![Page 25: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/25.jpg)
おススメのひな形作成方法が何故必要か• 新しいアプリケーション( XAML )
何もなさ過ぎて辛い
• グリッドアプリケーション( XAML )• ハブアプリケーション( XAML )• 分割アプリケーション( XAML )
色々有りすぎて辛い
あると便利なクラス
邪魔なクラス
![Page 26: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/26.jpg)
作り方• グリッドアプリケーション( XAML )を作成
GroupDetailPage.xaml を削除 GroupedItemsPage.xaml を削除 ItemDetailPage.xaml を削除 DataModel フォルダを削除
![Page 27: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/27.jpg)
作り方• プロジェクトの右クリックメニューから追加→新し
い項目
![Page 28: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/28.jpg)
作り方• 基本ページを MainPage.xaml という名前で作成
![Page 29: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/29.jpg)
App.xaml.cs を書き換える• MainPage を初期表示にする
typeof(GroupedItemsPage) をtypeof(MainPage) に書き換える
![Page 30: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/30.jpg)
余計なもののないひな形の完成
画像 / テキスト
Web からの情報
色々なコントロール
これを土台に自分のオリジナルアプリケーションに仕上げていく
![Page 31: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/31.jpg)
参考• この手順を実施したプロジェクトテンプレートあり
ます Windows ストア アプリのプレーンなプロジェクトテンプ
レートhttp://okazuki.hatenablog.com/entry/2014/03/23/202650
![Page 32: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/32.jpg)
アプリの作り方
![Page 33: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/33.jpg)
もくじ• XAML と C# の役割• 画面の作り方• クラス• XAML とクラス
Binding テンプレート機能
![Page 34: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/34.jpg)
XAML と C# の役割(復習)• 見た目 (XAML) と処理 (C#)
XAML
画面• Button• GridView• ListBox• AppBar• アニメーション• etc…
C#
処理• 画面操作への応答
• クリック• ホールド• etc…
• 計算ロジック• データ取得
• Twitter• Facebook• RSS• etc…
• XAMLへの更新通知
連携
![Page 35: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/35.jpg)
•ツールボックスから画面にドラッグアンドドロップ•マウスで位置を微調整
画面作成
![Page 36: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/36.jpg)
画面作成• プロパティウィンドウ(右下に出てるはず)で細かい設定•よく使うもの
Content プロパティ 表示する内容を設定
Margin プロパティ 左・上・右・下の余白
HorizontalAlignment プロパティ VerticalAlignment プロパティ
上下左右のどちらかに寄せるか、真ん中か、いっぱいにするか Width プロパティ Height プロパティ
幅と高さを指定できる
![Page 37: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/37.jpg)
よく使うコントロール• Button
押すやつ
• TextBlock文字を表示するやつ
• Image 画像を表示するやつ
Button
TextBlock
![Page 38: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/38.jpg)
よく使うコントロール• AppBar
画面の上と下に出る Windows ストア アプリの右クリックメニュー的なもの
• CommandBarボタンを並べるだけに特化した AppBar
• AppBarButton AppBar に置くための専用の丸いボタンコントロール
![Page 39: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/39.jpg)
よく使うコントロール• GridView
横スクロールでコンテンツを表示するやつ
![Page 40: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/40.jpg)
よく使うコントロール ( レイアウト系 )• Border
枠の中にコントロールを配置する Marginや Padding で余白をつけて中にコンテンツを配置する
Padding を 15 に指定して中に Image を配置した例
![Page 41: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/41.jpg)
よく使うコントロール ( レイアウト系 )• StackPanel
縦並び・横並びでコントロールを配置していく
左 Orientation: Vertical右 Orientation: Horizontal
![Page 42: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/42.jpg)
よく使うコントロール ( レイアウト系 )• Grid (一番よく使います)
マス目を区切って、その中にコントロールを配置する
![Page 43: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/43.jpg)
Binding
![Page 44: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/44.jpg)
Binding とは• コントロールのプロパティと、クラスのプロパティ
の値の同期をとる仕組み ページの DataContext プロパティに設定したクラスのプロ
パティとコントロールのプロパティの同期をとる仕組み
![Page 45: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/45.jpg)
Binding とはページ
TextBlock
Text プロパティ
DataContext プロパティ
Person クラスName :たなか同期たなか
ソースターゲット
![Page 46: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/46.jpg)
Binding の方向
OneWay ソースターゲット
ソースターゲット TwoWay
一方通行(デフォルトの挙動)
双方向
![Page 47: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/47.jpg)
バインドの仕方• DataContext に設定するためのクラスを定義する
![Page 48: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/48.jpg)
// データの入れ物のクラスを定義 (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)); } }}
![Page 49: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/49.jpg)
MainPage.xaml.cs の書き換え• DefaultViewModel プロパティの型を Person に変える
MainPage.xaml.csprivate Person defaultViewModel = new Person { Name = " たなか " };
/// <summary>/// これは厳密に型指定されたビュー モデルに変更できます。/// </summary>public Person DefaultViewModel{ get { return this.defaultViewModel; }}
![Page 50: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/50.jpg)
デザイナ用の DataContext の設定• デザイナに DataContext に Person が入っていること
を伝えるために、 pageRoot を選択して書式メニューから [ デザイン時の DataContext の設定 ] を選択
![Page 51: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/51.jpg)
デザイナ用の DataContext の設定
DesignInstance に設定
DataContext に設定するクラスを選択
IsDesignTimeCreatable をチェック
(おまじない的い)
![Page 52: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/52.jpg)
バインドの仕方• バインドしたいコントロールを選択• プロパティウィンドウでバインドしたいプロパティ
の右側の■から「データバインディングの作成」
![Page 53: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/53.jpg)
バインドの仕方• バインドの種類をデータ
コンテキストに設定• パスに DataContext に設定
したクラスのプロパティが出てくるので選択
![Page 54: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/54.jpg)
寄り道• XAML では、以下のようなコードが追加されています
<TextBlock x:Name="pageTitle" Text="{Binding Name}" … IsHitTestVisible="false" …/>
![Page 55: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/55.jpg)
実行して動作を確認• DataContext に設定したクラスの値がコントロール
に表示される
![Page 56: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/56.jpg)
クラスの値を書き換えてみる• CommandBar を BottomAppBar に置いて
AppBarButton を PrimaryCommands に設定する ドキュメントアウトラインの BottomAppBar と
CommandBar の PrimaryCommands の右クリックメニューから追加できる
![Page 57: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/57.jpg)
クラスの値を書き換えてみる• AppBarButton をダブルクリックしてクリック時の処
理を生成
ダブルクリック
private void AppBarButton_Click(object sender, RoutedEventArgs e){
}
処理のひな形が作成される
![Page 58: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/58.jpg)
クラスの値を書き換えてみる• クリック時の処理に DefaultViewModel のプロパティ
を書き換える処理を追加private void AppBarButton_Click(object sender, RoutedEventArgs e){ // DefaultViewModel(Person クラス ) の Name を書き換える this.DefaultViewModel.Name = " クリックしました ";}
![Page 59: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/59.jpg)
動作確認
起動直後 AppBar のボタンを押す 画面の文字が書き換わる
ポイント:画面のデータを直接書き換えてないのに画面のデータが更新されている。
![Page 60: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/60.jpg)
画面作成• ContentTemplate(ItemTemplate) プロパティ
難易度が高いけどよく使うので覚えないと辛い
• Windows ストア アプリでよくみる下のような見た目を作るときに必須
犬の写真アンセム
犬の写真アンセム
犬の写真アンセム
犬の写真アンセム
![Page 61: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/61.jpg)
テンプレート機能とは• データの見た目を定義する機能
犬の写真{Binding Name}
{Binding Picture}データをどういう形で見せるかひな形を定義
データを流し込む
Dog クラスName: アンセムPicture:
犬の写真アンセム
![Page 62: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/62.jpg)
テンプレートの作り方• GridView などで右クリック
追加テンプレートの編集→生成されたアイテムの編集→空アイテムの編集
作成後に、もう一度編集するには「現在の編集」を選ぶ
![Page 63: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/63.jpg)
テンプレートの名前を付ける• 名前大事なので、わかりやすい名前をつけましょう
![Page 64: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/64.jpg)
テンプレート編集画面• 非常に味気ない画面が出ます
ここをクリックでページのデザイン
に戻る
![Page 65: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/65.jpg)
テンプレートの編集•普通のページと同じように編集
![Page 66: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/66.jpg)
データのバインド• Image コントロールは Source プロパティに画像を指定• TextBlock プロパティは Text プロパティに文字列を指定
{Binding Name}
{Binding Picture}データをどういう形で見せるかひな形を定義
デザイン時の DataContext を設定することでGUI 上からバインドもできます。
![Page 67: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/67.jpg)
データの流し込み• GridView に名前をつけて ItemsSource にデータを設定 navigationHelper_LoadState メソッドがページ表示時の処理を書くところ
100件ぶんの Dog データを生成して設定
Dog データを格納するクラス
![Page 68: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/68.jpg)
画像を設定して実行
Assets フォルダに dog.pngを置く
GridView にテンプレートで指定した形でデータが表示される
実行
![Page 69: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/69.jpg)
C#ストアアプリ開発で覚えておいてほしいこと
![Page 71: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/71.jpg)
データと処理の塊のクラス• プロジェクトの右クリックメニューで新規項目追加
![Page 72: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/72.jpg)
名前をつける• わかりやすい名詞をつけましょう
![Page 73: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/73.jpg)
クラスの構造// データの入れ物のクラスを定義 (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)); } }}
名前 継承元公開範囲
プロパティ(クラスの持つデータ)
プロパティ(クラスの持つデータ)
メソッド(処理)
![Page 74: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/74.jpg)
クラスの構造// データの入れ物のクラスを定義 (INotifyPropertyChanged を実装するのはお約束 )public class Person : INotifyPropertyChanged{ public Person() { }}
コンストラクタ最初に必ず呼ばれる
メソッド
![Page 75: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/75.jpg)
MainPage もクラス• MainPage.xaml.cs を見てみよう
![Page 76: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/76.jpg)
MainPage もクラス• MainPage.xaml.cs を見てみよう
![Page 77: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/77.jpg)
たくさんのデータを扱うコレクション• プログラムでは、 1 つだけのデータを扱うことはほ
とんどない。 Twitter のタイムラインしかり、 Facebook のタイムライン
しかし、 LINE の会話データしかり、 etc…
• 以下のように定義する ObservableCollection< 入れるクラスの名前 >
![Page 78: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/78.jpg)
たくさんのデータを扱うコレクション• MainPage に people という名前で
ObservableCollection<Person> を作って AddPeople メソッドで追加をするコード例
![Page 79: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/79.jpg)
コレクションと GridView コントロール• コレクションを GridView の ItemsSource プロパティ
にバインドすると、コレクションの内容を元にGridView が表示されます。 表示内容は ItemTemplate で定義した見た目になります
![Page 80: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/80.jpg)
イベントとイベントハンドラ• アプリケーションは
「コントロールで○○されたときにする ×× をする」の積み重ね
○○ = イベント ×× = イベントハンドラ
• 例ボタンを「クリック」されたら「メッセージを表示」する
![Page 81: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/81.jpg)
コントロールのイベントコントロールを
選ぶプロパティの雷マークをク
リック
コントロールのイベント一覧
ダブルクリックでイベントハンドラ作成
![Page 82: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/82.jpg)
コントロールのイベントイベントハンドラ
![Page 83: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/83.jpg)
覚えておこう( async, await)• 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");}
![Page 84: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/84.jpg)
最後に覚えておくといいポイント• MainPage.xaml.cs
navigationHelper_LoadState メソッド ページ表示時の処理
navigationHelper_SaveState メソッド ページから離れる時の処理
ボタンをダブルクリックして作られるメソッド ボタンをクリックしたときの処理
クラス名と同じ名前のメソッド クラスが作られるときに最初に呼ばれる処理
![Page 85: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/85.jpg)
実例TODO リスト
![Page 86: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/86.jpg)
デモ•時間があれば、軽い RSS 表示アプリを作ってみよう
と思います。
![Page 87: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/87.jpg)
まとめ
![Page 88: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/88.jpg)
これくらい出来ればとりあえず OK• 新規作成• 実行• クラスの作成• データバインド• クリックイベントの処理• コレクションの扱い
![Page 89: Visual studio 2013 Overview](https://reader036.vdocuments.site/reader036/viewer/2022070304/54b9fed04a795944218b45fe/html5/thumbnails/89.jpg)
参考• Windows デベロッパー センター
http://msdn.microsoft.com/ja-jp/windows/br229518.aspx