Your SlideShare is downloading. ×
0
Visual Studio 2013
C# + XAML 入門
Visual Studioの基本的な使い方とC#とXAML基礎
大田 一希
注意事項
• 記載の内容は個人の見解であり、所属する企業を代
表するものではありません。
もくじ
• Visual Studio overview
• アプリの作成と実行
• プロジェクトの作り方
• プログラムの実行方法
• おススメのひな形プロジェクトの作り方
• アプリの作り方
• C#
• 実例:フィードリーダー
• まとめ
Visual Studio overview
• Windows上の最強のプログラミング環境
作れるアプリケーション(代表的なもの)
• デスクトップアプリケーション
 C++, C#, VB, F#
Webアプリケーション
• クライアント側 HTML5+CSS3/JavaScript
• サーバー側 ASP.NET
ASP.NET
HTML5/CSS3
JavaScript
HTTP
Windows ストア アプリ
• Windows 8以降用の全画面表示アプリ(1画面に2つ, 3
つ表示も可能)
• ストアで配布可能
• 開発言語
 C#/XAML
 VB/XAML
 JS/HTML5+CSS3
 C++/XAML...
作れるもの全体像 + 今回の範囲
Visual Studio
デスクトップアプリ Webアプリ Windows ストア アプリ
ネイティブ
C/C++
WinForm
C#/VB
WPF
C#+XAML
VB+XAML
WebForm
C#
V...
アプリの作成と実行
アプリケーションの単位
• ソリューション
 Visual Studioでプログラムを作るときの大きな単位
 プロジェクトを複数持ってる
• プロジェクト
 1つのアプリケーション(exe, dll, appx)を作るためのソース
コード...
ソリューション(*.sln)
プロジェクト1
(ストアアプリ)
Hoge.cs
Hoge.xaml
Foo.cs
プロジェクト2
(クラスライブラリ)
Moge.cs
Bar.cs
プロジェクト3
(クラスライブラリ)
Bar.cs
Foooo...
ソリューション(*.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)でシミュレータが
立ち上がってアプリケーションが動きます
ローカルコンピューターとシミュレーターの比較
• ローカルコンピューター
 実際の動作を確かめることができる
• シミュレーター
 動作は本物と変わらないとおもう
 解像度を変えて動作させることができる
 位置情報を疑似的に与えることが...
おススメのひな形作成方法
おススメのひな形作成方法が何故必要か
• 新しいアプリケーション(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#
処理
• 画面操作への応答
• クリック
...
• ツールボックスから画面にドラッグアンドドロップ
• マウスで位置を微調整
画面作成
画面作成
• プロパティウィンドウ(右下に出てるはず)で細かい
設定
• よく使うもの
 Contentプロパティ
 表示する内容を設定
 Marginプロパティ
 左・上・右・下の余白
 HorizontalAlignmentプロパ...
よく使うコントロール
• 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;
//...
MainPage.xaml.csの書き換え
• DefaultViewModelプロパティの型をPersonに変える
MainPage.xaml.cs
private Person defaultViewModel = new Person {...
デザイナ用の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
のPrim...
クラスの値を書き換えてみる
• AppBarButtonをダブルクリックしてクリック時の処
理を生成
ダブルクリック
private void AppBarButton_Click(object sender, RoutedEventArgs ...
クラスの値を書き換えてみる
• クリック時の処理にDefaultViewModelのプロパティ
を書き換える処理を追加
private void AppBarButton_Click(object sender, RoutedEventArgs...
動作確認
起動直後 AppBarのボタンを押す 画面の文字が書き換わる
ポイント:画面のデータを直接書き換えてないのに画面のデータが更新されている。
画面作成
• ContentTemplate(ItemTemplate)プロパティ
 難易度が高いけどよく使うので覚えないと辛い
• Windows ストア アプリでよくみる下のような見た
目を作るときに必須
犬の写真
アンセム
犬の写真
ア...
テンプレート機能とは
• データの見た目を定義する機能
犬の写真
{Binding Name}
{Binding Picture}
データをどういう形で見せるかひな形を定義
データを流し込む
Dogクラス
Name: アンセム
Picture:...
テンプレートの作り方
• GridViewなどで右クリック
 追加テンプレートの編集→生成されたアイテムの編集→空
アイテムの編集
 作成後に、もう一度編集するには「現在の編集」を選ぶ
テンプレートの名前を付ける
• 名前大事なので、わかりやすい名前をつけましょう
テンプレート編集画面
• 非常に味気ない画面が出ます
ここをクリックで
ページのデザイン
に戻る
テンプレートの編集
• 普通のページと同じように編集
データのバインド
• ImageコントロールはSourceプロパティに画像を指定
• TextBlockプロパティはTextプロパティに文字列を指定
{Binding Name}
{Binding Picture}
データをどういう形で見せるか...
データの流し込み
• GridViewに名前をつけてItemsSourceにデータを設定
navigationHelper_LoadStateメソッドがページ表示時の処理を書くところ
100件ぶんのDogデータを生成して設定
Dogデータを格納...
画像を設定して実行
Assetsフォルダにdog.pngを
置く
GridViewにテンプレートで指定した形でデータが
表示される
実行
C#
ストアアプリ開発で覚えておいてほしいこと
C#の情報は
• C# によるプログラミング入門
http://ufcpp.net/study/csharp/
データと処理の塊のクラス
• プロジェクトの右クリックメニューで新規項目追加
名前をつける
• わかりやすい名詞をつけましょう
クラスの構造
// データの入れ物のクラスを定義(INotifyPropertyChangedを実装するのはお約束)
public class Person : INotifyPropertyChanged
{
private string n...
クラスの構造
// データの入れ物のクラスを定義(INotifyPropertyChangedを実装するのはお約束)
public class Person : INotifyPropertyChanged
{
public Person()
...
MainPageもクラス
• MainPage.xaml.csを見てみよう
MainPageもクラス
• MainPage.xaml.csを見てみよう
たくさんのデータを扱うコレクション
• プログラムでは、1つだけのデータを扱うことはほ
とんどない。
 Twitterのタイムラインしかり、Facebookのタイムラインし
かし、LINEの会話データしかり、etc…
• 以下のように定義する...
たくさんのデータを扱うコレクション
• MainPageにpeopleという名前で
ObservableCollection<Person>を作ってAddPeopleメ
ソッドで追加をするコード例
コレクションとGridViewコントロール
• コレクションをGridViewのItemsSourceプロパティに
バインドすると、コレクションの内容を元に
GridViewが表示されます。
 表示内容はItemTemplateで定義した見た...
イベントとイベントハンドラ
• アプリケーションは
 「コントロールで○○されたときにする××をする」の積み
重ね
 ○○ = イベント
 ×× = イベントハンドラ
• 例
 ボタンを「クリック」されたら「メッセージを表示」する
コントロールのイベント
コントロールを
選ぶ
プロパティの雷マークをク
リック
コントロールの
イベント一覧
ダブルクリックで
イベントハンドラ作成
コントロールのイベント
イベントハンドラ
覚えておこう(async, await)
• awaitは、時間のかかる処理の完了を待つ
 メッセージボックスでユーザーがボタンを押すまで待つ
 ネットワークの先のデータをとってくるときに、取れるま
で待つ
 Windows Runtim...
最後に覚えておくといいポイント
• MainPage.xaml.cs
 navigationHelper_LoadStateメソッド
 ページ表示時の処理
 navigationHelper_SaveStateメソッド
 ページから離れ...
実例
TODOリスト
デモ
• 時間があれば、軽いRSS表示アプリを作ってみよう
と思います。
まとめ
これくらい出来ればとりあえずOK
• 新規作成
• 実行
• クラスの作成
• データバインド
• クリックイベントの処理
• コレクションの扱い
参考
• Windows デベロッパー センター
http://msdn.microsoft.com/ja-
jp/windows/br229518.aspx
Upcoming SlideShare
Loading in...5
×

Visual studio 2013 Overview

4,279

Published on

Published in: Technology
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,279
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
37
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

Transcript of "Visual studio 2013 Overview"

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

    Clipping is a handy way to collect important slides you want to go back to later.

×