Visual studio 2013 Overview
Upcoming SlideShare
Loading in...5
×
 

Visual studio 2013 Overview

on

  • 3,634 views

 

Statistics

Views

Total Views
3,634
Views on SlideShare
3,623
Embed Views
11

Actions

Likes
10
Downloads
20
Comments
0

1 Embed 11

http://s.deeeki.com 11

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Visual studio 2013 Overview Visual studio 2013 Overview Presentation Transcript

  • 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, DirectX
  • 作れるもの全体像 + 今回の範囲 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…
  • アプリの作成と実行
  • アプリケーションの単位 • ソリューション  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.cs private 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# ストアアプリ開発で覚えておいてほしいこと
  • C#の情報は • C# によるプログラミング入門 http://ufcpp.net/study/csharp/
  • データと処理の塊のクラス • プロジェクトの右クリックメニューで新規項目追加
  • 名前をつける • わかりやすい名詞をつけましょう
  • クラスの構造 // データの入れ物のクラスを定義(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