Visual studio 2013 Overview

  • 3,830 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,830
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
22
Comments
0
Likes
10

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Visual Studio 2013 C# + XAML 入門 Visual Studioの基本的な使い方と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 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)を作るためのソース コードをまとめたもの
  • 11. ソリューション(*.sln) プロジェクト1 (ストアアプリ) Hoge.cs Hoge.xaml Foo.cs プロジェクト2 (クラスライブラリ) Moge.cs Bar.cs プロジェクト3 (クラスライブラリ) Bar.cs Foooooo.cs
  • 12. ソリューション(*.sln) プロジェクト1 (ストアアプリ) Hoge.cs Hoge.xaml Foo.cs 最初はシンプルにプロジェクト1つ
  • 13. ソリューション(*.sln) プロジェクト1 (ストアアプリ) Hoge.cs Hoge.xaml Foo.cs 最初はシンプルにプロジェクト1つ コンパイル パッケージング (自動でしてくれるので 覚えなくても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)  色々有りすぎて辛い あると便利なクラス 邪魔なクラス
  • 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 ストア アプリのプレーンなプロジェクトテンプ レート 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. よく使うコントロール • GridView  横スクロールでコンテンツを表示するやつ
  • 40. よく使うコントロール(レイアウト系) • Border  枠の中にコントロールを配置する  MarginやPaddingで余白をつけて中にコンテンツを配置する Paddingを15に指定して中に Imageを配置した例
  • 41. よく使うコントロール(レイアウト系) • StackPanel  縦並び・横並びでコントロールを配置していく 左 Orientation: Vertical 右 Orientation: Horizontal
  • 42. よく使うコントロール(レイアウト系) • Grid(一番よく使います)  マス目を区切って、その中にコントロールを配置する
  • 43. Binding
  • 44. Bindingとは • コントロールのプロパティと、クラスのプロパティ の値の同期をとる仕組み  ページのDataContextプロパティに設定したクラスのプロパ ティとコントロールのプロパティの同期をとる仕組み
  • 45. Bindingとは ページ TextBlock Textプロパティ DataContextプロパティ Personクラス Name:たなか同期たなか ソースターゲット
  • 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に変える MainPage.xaml.cs 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プロパティに文字列を指定 {Binding Name} {Binding Picture} データをどういう形で見せるかひな形を定義 デザイン時のDataContextを設定することで GUI上からバインドもできます。
  • 67. データの流し込み • GridViewに名前をつけてItemsSourceにデータを設定 navigationHelper_LoadStateメソッドがページ表示時の処理を書くところ 100件ぶんのDogデータを生成して設定 Dogデータを格納するクラス
  • 68. 画像を設定して実行 Assetsフォルダにdog.pngを 置く GridViewにテンプレートで指定した形でデータが 表示される 実行
  • 69. C# ストアアプリ開発で覚えておいてほしいこと
  • 70. C#の情報は • C# によるプログラミング入門 http://ufcpp.net/study/csharp/
  • 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つだけのデータを扱うことはほ とんどない。  Twitterのタイムラインしかり、Facebookのタイムラインし かし、LINEの会話データしかり、etc… • 以下のように定義する  ObservableCollection<入れるクラスの名前>
  • 78. たくさんのデータを扱うコレクション • MainPageにpeopleという名前で ObservableCollection<Person>を作ってAddPeopleメ ソッドで追加をするコード例
  • 79. コレクションとGridViewコントロール • コレクションをGridViewのItemsSourceプロパティに バインドすると、コレクションの内容を元に GridViewが表示されます。  表示内容はItemTemplateで定義した見た目になります
  • 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. 実例 TODOリスト
  • 86. デモ • 時間があれば、軽いRSS表示アプリを作ってみよう と思います。
  • 87. まとめ
  • 88. これくらい出来ればとりあえずOK • 新規作成 • 実行 • クラスの作成 • データバインド • クリックイベントの処理 • コレクションの扱い
  • 89. 参考 • Windows デベロッパー センター http://msdn.microsoft.com/ja- jp/windows/br229518.aspx