Downloaded 67 times
![// データの入れ物のクラスを定義(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));
}
}
}](https://image.slidesharecdn.com/visualstudio2013-140330002516-phpapp01/85/Visual-studio-2013-Overview-48-320.jpg)
![デザイナ用のDataContextの設定
• デザイナにDataContextにPersonが入っていることを
伝えるために、pageRootを選択して書式メニューか
ら[デザイン時のDataContextの設定]を選択](https://image.slidesharecdn.com/visualstudio2013-140330002516-phpapp01/85/Visual-studio-2013-Overview-50-320.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));
}
}
}
名前 継承元公開範囲
プロパティ（クラスの持つデータ）
プロパティ（クラスの持つデータ）
メソッド（処理）](https://image.slidesharecdn.com/visualstudio2013-140330002516-phpapp01/85/Visual-studio-2013-Overview-73-320.jpg)
More Related Content
![[AWSマイスターシリーズ] AWS CLI / AWS Tools for Windows PowerShell](https://cdn.slidesharecdn.com/ss_thumbnails/20140115aws-meister-regenerate-awsclipowershell-140130055421-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Visual studio 2013 Overview
Visual studio 2013 Overview
- 1. Visual Studio 2013 C#+ XAML 入門 Visual Studioの基本的な使い方とC#とXAML基礎 大田 一希
- 2.
- 3. もくじ • Visual Studiooverview • アプリの作成と実行 • プロジェクトの作り方 • プログラムの実行方法 • おススメのひな形プロジェクトの作り方 • アプリの作り方 • C# • 実例：フィードリーダー • まとめ
- 4. Visual Studio overview •Windows上の最強のプログラミング環境
- 5.
- 6. Webアプリケーション • クライアント側 HTML5+CSS3/JavaScript •サーバー側 ASP.NET ASP.NET HTML5/CSS3 JavaScript HTTP
- 7. Windows ストア アプリ •Windows 8以降用の全画面表示アプリ(1画面に2つ, 3 つ表示も可能） • ストアで配布可能 • 開発言語 C#/XAML VB/XAML JS/HTML5+CSS3 C++/XAML, DirectX
- 8. 作れるもの全体像 + 今回の範囲 VisualStudio デスクトップアプリ Webアプリ Windows ストア アプリ ネイティブ 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++ LightSwitch Office app, Workflow Windows phone etc…
- 9.
- 10. アプリケーションの単位 • ソリューション VisualStudioでプログラムを作るときの大きな単位 プロジェクトを複数持ってる • プロジェクト 1つのアプリケーション(exe, dll, appx)を作るためのソース コードをまとめたもの
- 11.
- 12.
- 13.
- 14. プロジェクトの作り方 • Visual Studio ファイル→新規作成→プロジェクト
- 15. プロジェクトの作り方 • インストール済み →テンプレート → Visual C# → Windows ス トア → グリッドアプリケーション(XAML) アルファベットと数字で 好きな名前をつける
- 16.
- 17.
- 18. 実行方法は3通り • ローカルコンピューター • シミュレーター •リモートコンピューター （今回は割愛します）
- 19.
- 20.
- 21.
- 22.
- 23. ローカルコンピューターとシミュレーターの比較 • ローカルコンピューター 実際の動作を確かめることができる •シミュレーター 動作は本物と変わらないとおもう 解像度を変えて動作させることができる 位置情報を疑似的に与えることができる タッチ非対応端末でもタッチ操作を再現できる タップ、スワイプ、回転、ピンチ Visual Studioを見ながら動作させることができる
- 24.
- 25. おススメのひな形作成方法が何故必要か • 新しいアプリケーション（XAML） 何もなさ過ぎて辛い •グリッドアプリケーション（XAML） • ハブアプリケーション（XAML） • 分割アプリケーション（XAML） 色々有りすぎて辛い あると便利なクラス 邪魔なクラス
- 26. 作り方 • グリッドアプリケーション（XAML）を作成 GroupDetailPage.xamlを削除 GroupedItemsPage.xamlを削除 ItemDetailPage.xamlを削除 DataModelフォルダを削除
- 27.
- 28.
- 29.
- 30.
- 31. 参考 • この手順を実施したプロジェクトテンプレートあり ます Windowsストア アプリのプレーンなプロジェクトテンプ レート http://okazuki.hatenablog.com/entry/2014/03/23/202650
- 32.
- 33. もくじ • XAMLとC#の役割 • 画面の作り方 •クラス • XAMLとクラス Binding テンプレート機能
- 34. XAMLとC#の役割（復習） • 見た目(XAML)と処理(C#) XAML 画面 • Button •GridView • ListBox • AppBar • アニメーション • etc… C# 処理 • 画面操作への応答 • クリック • ホールド • etc… • 計算ロジック • データ取得 • Twitter • Facebook • RSS • etc… • XAMLへの更新通知 連携
- 35.
- 36. 画面作成 • プロパティウィンドウ（右下に出てるはず）で細かい 設定 • よく使うもの Contentプロパティ 表示する内容を設定 Marginプロパティ 左・上・右・下の余白 HorizontalAlignmentプロパティ VerticalAlignmentプロパティ 上下左右のどちらかに寄せるか、真ん中か、いっぱいにするか Widthプロパティ Heightプロパティ 幅と高さを指定できる
- 37. よく使うコントロール • Button 押すやつ •TextBlock 文字を表示するやつ • Image 画像を表示するやつ Button TextBlock
- 38. よく使うコントロール • AppBar 画面の上と下に出るWindowsストア アプリの右クリック メニュー的なもの • CommandBar ボタンを並べるだけに特化したAppBar • AppBarButton AppBarに置くための専用の丸いボタンコントロール
- 39.
- 40. よく使うコントロール(レイアウト系) • Border 枠の中にコントロールを配置する MarginやPaddingで余白をつけて中にコンテンツを配置する Paddingを15に指定して中に Imageを配置した例
- 41. よく使うコントロール(レイアウト系) • StackPanel 縦並び・横並びでコントロールを配置していく 左Orientation: Vertical 右 Orientation: Horizontal
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48. // データの入れ物のクラスを定義(INotifyPropertyChangedを実装するのはお約束) public classPerson : 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に変える MainPage.xaml.cs private PersondefaultViewModel = new Person { Name = "たなか" }; /// <summary> /// これは厳密に型指定されたビュー モデルに変更できます。 /// </summary> public Person DefaultViewModel { get { return this.defaultViewModel; } }
- 50.
- 51.
- 52.
- 53.
- 54. 寄り道 • XAMLでは、以下のようなコードが追加されています <TextBlock x:Name="pageTitle"Text="{Binding Name}" … IsHitTestVisible="false" …/>
- 55.
- 56.
- 57. クラスの値を書き換えてみる • AppBarButtonをダブルクリックしてクリック時の処 理を生成 ダブルクリック private voidAppBarButton_Click(object sender, RoutedEventArgs e) { } 処理のひな形が作成される
- 58. クラスの値を書き換えてみる • クリック時の処理にDefaultViewModelのプロパティ を書き換える処理を追加 private voidAppBarButton_Click(object sender, RoutedEventArgs e) { // DefaultViewModel(Personクラス)のNameを書き換える this.DefaultViewModel.Name = "クリックしました"; }
- 59.
- 60. 画面作成 • ContentTemplate(ItemTemplate)プロパティ 難易度が高いけどよく使うので覚えないと辛い •Windows ストア アプリでよくみる下のような見た 目を作るときに必須 犬の写真 アンセム 犬の写真 アンセム 犬の写真 アンセム 犬の写真 アンセム
- 61. テンプレート機能とは • データの見た目を定義する機能 犬の写真 {Binding Name} {BindingPicture} データをどういう形で見せるかひな形を定義 データを流し込む Dogクラス Name: アンセム Picture: 犬の写真 アンセム
- 62. テンプレートの作り方 • GridViewなどで右クリック 追加テンプレートの編集→生成されたアイテムの編集→空 アイテムの編集 作成後に、もう一度編集するには「現在の編集」を選ぶ
- 63.
- 64.
- 65.
- 66. データのバインド • ImageコントロールはSourceプロパティに画像を指定 • TextBlockプロパティはTextプロパティに文字列を指定 {BindingName} {Binding Picture} データをどういう形で見せるかひな形を定義 デザイン時のDataContextを設定することで GUI上からバインドもできます。
- 67.
- 68.
- 69.
- 70.
- 71.
- 72.
- 73. クラスの構造 // データの入れ物のクラスを定義(INotifyPropertyChangedを実装するのはお約束) public classPerson : 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 classPerson : INotifyPropertyChanged { public Person() { } } コンストラクタ 最初に必ず呼ばれる メソッド
- 75.
- 76.
- 77. たくさんのデータを扱うコレクション • プログラムでは、1つだけのデータを扱うことはほ とんどない。 Twitterのタイムラインしかり、Facebookのタイムラインし かし、LINEの会話データしかり、etc… •以下のように定義する ObservableCollection<入れるクラスの名前>
- 78.
- 79.
- 80. イベントとイベントハンドラ • アプリケーションは 「コントロールで○○されたときにする××をする」の積み 重ね ○○ = イベント ×× = イベントハンドラ • 例 ボタンを「クリック」されたら「メッセージを表示」する
- 81.
- 82.
- 83. 覚えておこう（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"); }
- 84. 最後に覚えておくといいポイント • MainPage.xaml.cs navigationHelper_LoadStateメソッド ページ表示時の処理 navigationHelper_SaveStateメソッド ページから離れる時の処理 ボタンをダブルクリックして作られるメソッド ボタンをクリックしたときの処理 クラス名と同じ名前のメソッド クラスが作られるときに最初に呼ばれる処理
- 85.
- 86.
- 87.
- 88. これくらい出来ればとりあえずOK • 新規作成 • 実行 •クラスの作成 • データバインド • クリックイベントの処理 • コレクションの扱い
- 89. 参考 • Windows デベロッパーセンター http://msdn.microsoft.com/ja- jp/windows/br229518.aspx