Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
En vedette (20)
Similaire à Visual studio 2013 Overview
Similaire à Visual studio 2013 Overview (20)
Plus de 一希 大田
Plus de 一希 大田 (20)
Dernier
Dernier (11)
Visual studio 2013 Overview
- 1. Visual Studio 2013 C# + XAML 入門 Visual Studioの基本的な使い方とC#とXAML基礎 大田 一希
- 3. もくじ • Visual Studio overview • アプリの作成と実行 • プロジェクトの作り方 • プログラムの実行方法 • おススメのひな形プロジェクトの作り方 • アプリの作り方 • C# • 実例：フィードリーダー • まとめ
- 4. Visual Studio overview • Windows上の最強のプログラミング環境
- 5. 作れるアプリケーション(代表的なもの） • デスクトップアプリケーション C++, C#, VB, F#
- 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. 作れるもの全体像 + 今回の範囲 Visual Studio デスクトップアプリ 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. アプリケーションの単位 • ソリューション Visual Studioでプログラムを作るときの大きな単位 プロジェクトを複数持ってる • プロジェクト 1つのアプリケーション(exe, dll, appx)を作るためのソース コードをまとめたもの
- 14. プロジェクトの作り方 • Visual Studio ファイル→新規作成→プロジェクト
- 15. プロジェクトの作り方 • インストール済み → テンプレート → Visual C# → Windows ス トア → グリッドアプリケーション(XAML) アルファベットと数字で 好きな名前をつける
- 17. プロジェクトの実行方法
- 18. 実行方法は3通り • ローカルコンピューター • シミュレーター • リモートコンピューター （今回は割愛します）
- 23. ローカルコンピューターとシミュレーターの比較 • ローカルコンピューター 実際の動作を確かめることができる • シミュレーター 動作は本物と変わらないとおもう 解像度を変えて動作させることができる 位置情報を疑似的に与えることができる タッチ非対応端末でもタッチ操作を再現できる タップ、スワイプ、回転、ピンチ Visual Studioを見ながら動作させることができる
- 24. おススメのひな形作成方法
- 25. おススメのひな形作成方法が何故必要か • 新しいアプリケーション（XAML） 何もなさ過ぎて辛い • グリッドアプリケーション（XAML） • ハブアプリケーション（XAML） • 分割アプリケーション（XAML） 色々有りすぎて辛い あると便利なクラス 邪魔なクラス
- 26. 作り方 • グリッドアプリケーション（XAML）を作成 GroupDetailPage.xamlを削除 GroupedItemsPage.xamlを削除 ItemDetailPage.xamlを削除 DataModelフォルダを削除
- 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への更新通知 連携
- 36. 画面作成 • プロパティウィンドウ（右下に出てるはず）で細かい 設定 • よく使うもの Contentプロパティ 表示する内容を設定 Marginプロパティ 左・上・右・下の余白 HorizontalAlignmentプロパティ VerticalAlignmentプロパティ 上下左右のどちらかに寄せるか、真ん中か、いっぱいにするか Widthプロパティ Heightプロパティ 幅と高さを指定できる
- 37. よく使うコントロール • Button 押すやつ • TextBlock 文字を表示するやつ • Image 画像を表示するやつ Button TextBlock
- 38. よく使うコントロール • AppBar 画面の上と下に出るWindows ストア アプリの右クリック メニュー的なもの • CommandBar ボタンを並べるだけに特化したAppBar • AppBarButton AppBarに置くための専用の丸いボタンコントロール
- 40. よく使うコントロール(レイアウト系) • Border 枠の中にコントロールを配置する MarginやPaddingで余白をつけて中にコンテンツを配置する Paddingを15に指定して中に Imageを配置した例
- 41. よく使うコントロール(レイアウト系) • StackPanel 縦並び・横並びでコントロールを配置していく 左 Orientation: Vertical 右 Orientation: Horizontal
- 43. Binding
- 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に変える MainPage.xaml.cs private Person defaultViewModel = new Person { Name = "たなか" }; /// <summary> /// これは厳密に型指定されたビュー モデルに変更できます。 /// </summary> public Person DefaultViewModel { get { return this.defaultViewModel; } }
- 51. デザイナ用のDataContextの設定 DesignInstanceに設定 DataContextに設定する クラスを選択 IsDesignTimeCreatableをチェック （おまじない的い）
- 54. 寄り道 • XAMLでは、以下のようなコードが追加されています <TextBlock x:Name="pageTitle" Text="{Binding Name}" … IsHitTestVisible="false" …/>
- 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 = "クリックしました"; }
- 60. 画面作成 • ContentTemplate(ItemTemplate)プロパティ 難易度が高いけどよく使うので覚えないと辛い • Windows ストア アプリでよくみる下のような見た 目を作るときに必須 犬の写真 アンセム 犬の写真 アンセム 犬の写真 アンセム 犬の写真 アンセム
- 61. テンプレート機能とは • データの見た目を定義する機能 犬の写真 {Binding Name} {Binding Picture} データをどういう形で見せるかひな形を定義 データを流し込む Dogクラス Name: アンセム Picture: 犬の写真 アンセム
- 62. テンプレートの作り方 • GridViewなどで右クリック 追加テンプレートの編集→生成されたアイテムの編集→空 アイテムの編集 作成後に、もう一度編集するには「現在の編集」を選ぶ
- 66. データのバインド • ImageコントロールはSourceプロパティに画像を指定 • TextBlockプロパティはTextプロパティに文字列を指定 {Binding Name} {Binding Picture} データをどういう形で見せるかひな形を定義 デザイン時のDataContextを設定することで GUI上からバインドもできます。
- 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() { } } コンストラクタ 最初に必ず呼ばれる メソッド
- 77. たくさんのデータを扱うコレクション • プログラムでは、1つだけのデータを扱うことはほ とんどない。 Twitterのタイムラインしかり、Facebookのタイムラインし かし、LINEの会話データしかり、etc… • 以下のように定義する ObservableCollection<入れるクラスの名前>
- 78. たくさんのデータを扱うコレクション • MainPageにpeopleという名前で ObservableCollection<Person>を作ってAddPeopleメ ソッドで追加をするコード例
- 80. イベントとイベントハンドラ • アプリケーションは 「コントロールで○○されたときにする××をする」の積み 重ね ○○ = イベント ×× = イベントハンドラ • 例 ボタンを「クリック」されたら「メッセージを表示」する
- 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. 実例 TODOリスト
- 87. まとめ
- 88. これくらい出来ればとりあえずOK • 新規作成 • 実行 • クラスの作成 • データバインド • クリックイベントの処理 • コレクションの扱い
- 89. 参考 • Windows デベロッパー センター http://msdn.microsoft.com/ja- jp/windows/br229518.aspx