わんくま同盟 東京勉強会 #21

自己紹介 はじめに 簡単なアプリケーションを作ってみる Binding 概要 Linq to SQL とのバインディング アニメーション ３Dグラフィック まとめ アジェンダ

わんくま同盟 東京勉強会 #21 福井県越前市（武生市）出身、東京都杉並区在住。 ソフトウェア業務歴28年・フリ－技術者歴20年 以上、でも「永遠の28歳」。 ４Bitワンチップからワークステーションまでの ソフトを開発、開発言語も多種多様。 最近はSQLサーバー ＋ Windows Forms や WPFの Visual C# ソフト開発が多い。 Microsoft MVP for Development Tools Visual C# を4年連続で受賞。 INETAJ 理事、INETAJ スピーカビューロー登録。 わんくま同盟他でスピーカ経験多数。 自己紹介

わんくま同盟 東京勉強会 #21 WPF や Silver Light の解説やデモを見て興味を 持った方も多いと思います。 しかし、XAML を見て、大変そうだなってしり込 みしている人も多いと聞きます。 そこで、Expression Blend と Visual Studio の コラボレーションで XAML を書かないで WPF アプリケーションの開発が行えることを見てほし いと思います。 はじめに

わんくま同盟 東京勉強会 #21 簡単なアプリケーションを作ってみる まず Expression Blend を起動して新しいプロ ジェクトを作成します。 Visual C# と Visual Basic が 選択可能です。

わんくま同盟 東京勉強会 #21 簡単なアプリケーションを作ってみる こんな画面が表示されます。

わんくま同盟 東京勉強会 #21 簡単なアプリケーションを作ってみる こんなコントロールがあります

わんくま同盟 東京勉強会 #21 簡単なアプリケーションを作ってみる 資産ライブラリにもコントロールはあります

わんくま同盟 東京勉強会 #21 簡単なアプリケーションを作ってみる コントロールを配置します。

わんくま同盟 東京勉強会 #21 簡単なアプリケーションを作ってみる プロパティを修正します。 修正した（さ れた）プロパ ティは白丸が 付きます。 修正内容は右 クリックメ ニューでリ セット可能で す（もちろん UNDO も可 能）。

わんくま同盟 東京勉強会 #21 簡単なアプリケーションを作ってみる イベントを作成します。 ここでプロパ ティとイベン トを切り替え ます。 空白状態から ダブルクリッ クで自動的に 作成されます。

わんくま同盟 東京勉強会 #21 簡単なアプリケーションを作ってみる Visual Studio が起動します。 自動的に Visual Studio が起動されて 作成されたイ ベントが表示 されます。

わんくま同盟 東京勉強会 #21 こんな風に Expression Blend でコントロールを 配置していってプロパティを変更して画面を作成 します。 イベント処理は Visual Studio でプログラムを作 成していきます。 簡単な画面はこのようにして作成できます。 Expression Blend と Visual Studio の切り替え 時には必ず保存してください、切り替えたときに 変更があったことを自動的に認識して再読み込み のダイアログが出て再読み込みします。 簡単なアプリケーションを作ってみる

わんくま同盟 東京勉強会 #21 DEMO

Windows Presentation Foundation (WPF) データ バインディングは、アプリケーションが データを提供し、UIと結びつけることで、柔軟 な UI 表現、 ビジネス ロジックと UI の明確な 分離を実現します。 データ フローの方向やソースの更新の要因を選 択でき、表示のためのデータ変換や格納時のデー タの検証を行えます。 Bindingの概要

わんくま同盟 東京勉強会 #21 Bindingの概要 Binding オブジェクトでコントロールのプロパ ティとデータソースのプロパティを結びつけます。 Text プロパティ Text プロパティ PersonName プロパティ PersonName プロパティ TextBlock Ｍｙ DataSource （ Person クラス） Binding オブジェクト

わんくま同盟 東京勉強会 #21 Bindingの概要 データの方向を決めることができます。 Dependency Property Property ターゲットソース OneTime OneWay TwoWay OneWayToSource Binding オブジェクト BindingMode プロパティ BindingMode で Default はテキスト ボックスやチェック ボックスなど編集可 能な場合は TwoWay 、それ以外のほとんどのプロパティは OneWay 。

わんくま同盟 東京勉強会 #21 Bindingの概要 ターゲットのコントロールのプロパティの更新タ イミングを設定できます。 Dependency Property Property ターゲットソース OneTime OneWay TwoWay Binding オブジェクト BindingMode プロパティ OneTime はアプリケーションの起動時またはデータ コンテキストの変更時 OneWay ・ TwoWay はプロパティ変更時

わんくま同盟 東京勉強会 #21 Bindingの概要 ソースのプロパティの更新タイミングを設定でき ます。 Dependency Property Property ターゲットソース TwoWay OneWayToSource Binding オブジェクト BindingMode プロパティ Binding.UpdateSourceTrigger プロパティ PropertyChanged の場合ターゲットプロパティ変更時、 LostFocus の場合ターゲットがフォーカスを失った時、 Explicit の場合アプリケーションが UpdateSource を呼び出した時。

わんくま同盟 東京勉強会 #21 Bindingの概要 DataContext や ItemsSource で扱うデータを まとめて設定できます。 TextBlock.Text プロパティ TextBlock.Text プロパティ TextBlock.Text プロパティ TextBlock.Text プロパティ TextBlock.Text プロパティ TextBlock.Text プロパティ TextBlock.Text プロパティ TextBlock.Text プロパティ TextBlock.Text プロパティ TextBlock.Text プロパティ TextBlock.Text プロパティ TextBlock.Text プロパティ ID プロパティ ふりがな プロパティ 氏名 プロパティ 誕生日 プロパティ 都道府県 ID プロパティ 郵便番号 プロパティ ID プロパティ ふりがな プロパティ 氏名 プロパティ 誕生日 プロパティ 都道府県 ID プロパティ 郵便番号 プロパティ Binding オブジェクト 顧客クラス インスタンス Binding オブジェクト 顧客 ListView. ItemsSource （親要素） 代入

わんくま同盟 東京勉強会 #21 Bindingの概要 Expression Blend のデータソース –XML データ ソース XML 形式のデータを提供できるローカルまたはリモートの XML ファイル –共通言語ランタイム (CLR) オブジェクト データ ソー ス ObservableCollection クラスが提供 IEnumerable インターフェイスと INotifyCollectionChanged インターフェイスと INotifyPropertyChanged インターフェイスを実装したクラ ス Linq to SQL データ

わんくま同盟 東京勉強会 #21 Bindingの概要 WPF のデータソース –Expression Blend のデータソースの２つ –ADO.NET データ ADO.NET DataView は、IBindingList を実装し、バイン ディング エンジンがリッスンする変更通知を提供 –DependencyObject WPF のコントロールは全て DependencyObject 任意の DependencyObject の依存関係プロパティにバイン ド、コントロールのプロパティ間のバインディングに主に使 用 Blend ではプロパティウィンドウからデータバインドで設定 可能

わんくま同盟 東京勉強会 #21 Linq to SQL とのバインディング Visual Studio で WPF アプリケーションを作成。 WPF アプリ ケーション.NET Framework 3.5

わんくま同盟 東京勉強会 #21 Linq to SQL とのバインディング プロジェクトに LINQ to SQL クラス追加。 LINQ to SQL クラス

わんくま同盟 東京勉強会 #21 Linq to SQL とのバインディング データ接続からテーブルをドラッグ。 テーブルをこ こにドラッグ

わんくま同盟 東京勉強会 #21 Linq to SQL とのバインディング データコンテキストが自動生成。 リビルドして 反映させます

わんくま同盟 東京勉強会 #21 Linq to SQL とのバインディング Expression Blend で同じプロジェクトを読み込 みます。 ListBox を追加して listbox1 と 名前を付けておきます。 Blend に 作成した LINQ to SQL クラスを追加するには、 データ ＋CLR オブジェクト をクリック します。 データ ＋ CLR オブジェクト

わんくま同盟 東京勉強会 #21 Linq to SQL とのバインディング ListBox に表示したい テーブルを選択して、 CLR オブジェクト データソースを作ります。 LinqToSQL アセンブリの LinqToSQL 名前空間の Orders クラス

わんくま同盟 東京勉強会 #21 Linq to SQL とのバインディング ここでは複数の項目を まとめてバインドする為 データソースのクラスを 選択し DataTemplate の定義を押します。 CustomerDS データソー ス Customers クラス バインドの方向ソースの更新タイミング規定値・値コンバータを指定できます

わんくま同盟 東京勉強会 #21 Linq to SQL とのバインディング 表示したい項目を選ぶと自動的にデータテンプ レートを作成します。 CompanyNameContactNameを表示させます。

わんくま同盟 東京勉強会 #21 WPF アプリケーション public partial class Window1 : Window { private DataClasses1DataContext dataContext = new DataClasses1DataContext(); public Window1() { InitializeComponent(); this.listbox1.ItemsSource = dataContext.Customers; } ItemSource に Customers を 設定します ローカルに DataContext を 用意します

わんくま同盟 東京勉強会 #21 クラスのプロパティと UI のプロパティを Binding オブジェクトで結びつければ、データバ インディングできます。 クラスのインスタンスを UI の DataContext や ItemSource に設定して、クラスのプロパティ名 と UI のプロパティ名 を結びつければ、データ バインディングできます。 ListBox や ListView などは、DataTemplate で データの表示を設定できます。 Binding

わんくま同盟 東京勉強会 #21 DEMO

UI のプロパティを時間に合わせて変更していけ ば、UI は簡単なアニメーションをしているよう に見えます。 Expression Blend では、タイムライン上にキー フレームを作成しプロパティを変更することで、 キーフレーム間の時間に指定されたプロパティ値 を補間して、なめらかなアニメーションにしてく れます。 アニメーションの開始や終了はトリガのイベント で指定します。 アニメーション

わんくま同盟 東京勉強会 #21 アニメーション マウスをかざすと大きくなるボタンを作ってみま しょう。 –新しいプロジェクトを作成しボタンを配置します。 ボタンを配置しま す。 10x10 の大きさにしま す。

わんくま同盟 東京勉強会 #21 アニメーション マウスがボタンの描画領域に入ったときに発生す るイベントは MouseEnter です、トリガにボタ ンの MouseEnter イベントを作成します。 ボタンを選択しま す。 を選択します。 MouseEnter イベン トを選択します。 ＋イベントをクリック してイベントを追加し ます。

わんくま同盟 東京勉強会 #21 アニメーション MouseEnter イベント発生時に実行するタイムラ インを割り当てます。 ＋をクリックしてタイ ムラインを割り当てま す。 タイムラインが存在しないの で新規で自動作成されます。

わんくま同盟 東京勉強会 #21 アニメーション タイムラインが表示され記録オンの状態になりま す。 注）このハードコ ピーは作業中の画面 です。

わんくま同盟 東京勉強会 #21 アニメーション MouseEnter イベント発生で1秒後にボタンサイ ズを指定します。 ボタンを選択します。 タイムライン再生ヘッドを 1 秒の位置にし ます。

わんくま同盟 東京勉強会 #21 アニメーション MouseEnter イベント発生で1秒後にボタンサイ ズを既定の10から128にします。 Width Height を 128 にします。 キーフレーム（白丸）が作成され ます。

わんくま同盟 東京勉強会 #21 アニメーション MouseLeave イベント発生でタイムラインを停 止しボタンの大きさを規定値(10x10)にします。 タイムライン停止を選択します。 ボタンを選択します。 を選択します。 MouseLeave イベン トを選択します。 タイムラインを選択し ます。 ＋イベントをクリック してイベントを追加し ます。

わんくま同盟 東京勉強会 #21 アニメーション マウスをかざしたりはなしたりするとボタンの大 きさが変わります。 マウスをかざすと。 徐々に大きくなり 1 秒後にこの大き さに。 マウスをはなすと元通り。

わんくま同盟 東京勉強会 #21 ３Dグラフィック ３DグラフィックはXAML形式や Wave front 3D 形式が読み込めます。 プロジェクトを選択し ます。 既存のアイテムを追加 を選択します。

わんくま同盟 東京勉強会 #21 ３Dグラフィック Wavefront ３ D （ obj ） や Wavefront 素材 (mtl)

わんくま同盟 東京勉強会 #21 ３Dグラフィック プロジェクトの obj ファイルをダブルクリック すると、ViewPort３D・カメラ・環境光・指向性 ライトが自動的に作成されます。 読み込まれた３ D グラ フィックが表示されま す。 ViewPort3D オブジェ クトが追加されます。

わんくま同盟 東京勉強会 #21 DEMO

Expression Blend と Visual Studio のコラボ レーションで XAML を書かないで WPF アプリ ケーションの開発が行えます。 バインディングを使えばデータと UI を分離でき、 表示のためのデータ変換や格納時のデータの検証 を行えます。 アニメーションを作成すれば Expression Blend で多種多様な視覚効果を追加できます。 ３Dオブジェクトも XAML 形式や Wave front 3D 形式から読み込めアニメーションもできます。 まとめ

わんくま同盟 東京勉強会 #21 Resources.Net ユーザーエクスペリエンス研究所 ユーザーエクスペリエンス研究所 INETA JAPAN INETA JAPAN Microsoft Community Ring ホーム Microsoft Community Ring ホーム わんくま同盟 わんくま同盟 Microsoft Expression Microsoft Visual Studio Microsoft Expression Microsoft Visual Studio Microsoft MSDN Microsoft MSDN