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
最初はシンプルにプロジェクト1つ
ソリューション (*.sln)
プロジェクト 1( ストアアプリ )
Hoge.cs
Hoge.xaml
Foo.cs
最初はシンプルにプロジェクト1つ
コンパイルパッケージング
( 自動でしてくれるので覚えなくても 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