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