xaml の勉強不要! wpf...
TRANSCRIPT
![Page 1: XAML の勉強不要! WPF アプリケーションは作れますwankuma.com/seminar/20080621tokyo21/6.pdf · 2009-01-07 · わんくま同盟東京勉強会#21 •WPF やSilver](https://reader034.vdocuments.net/reader034/viewer/2022042313/5eddd2ebad6a402d66690744/html5/thumbnails/1.jpg)
わんくま同盟東京勉強会 #21
![Page 2: XAML の勉強不要! WPF アプリケーションは作れますwankuma.com/seminar/20080621tokyo21/6.pdf · 2009-01-07 · わんくま同盟東京勉強会#21 •WPF やSilver](https://reader034.vdocuments.net/reader034/viewer/2022042313/5eddd2ebad6a402d66690744/html5/thumbnails/2.jpg)
わんくま同盟東京勉強会 #21
• 自己紹介
• はじめに
• 簡単なゕプリケーションを作ってみる
• Binding 概要
• Linq to SQL とのバンデゖング
• ゕニメーション
• 3Dグラフゖック
• まとめ
ゕジェンダ
![Page 3: XAML の勉強不要! WPF アプリケーションは作れますwankuma.com/seminar/20080621tokyo21/6.pdf · 2009-01-07 · わんくま同盟東京勉強会#21 •WPF やSilver](https://reader034.vdocuments.net/reader034/viewer/2022042313/5eddd2ebad6a402d66690744/html5/thumbnails/3.jpg)
わんくま同盟東京勉強会 #21
• 福井県越前市(武生市)出身、東京都杉並区在住。
• ソフトウェゕ業務歴28年・フリ-技術者歴20年以上、でも「永遠の28歳」。
• 4Bitワンチップからワークステーションまでのソフトを開発、開発言語も多種多様。
• 最近はSQLサーバー + Windows Forms やWPFの Visual C# ソフト開発が多い。
• Microsoft MVP for Development Tools Visual C# を4年連続で受賞。
• INETAJ 理事、INETAJ スピーカビューロー登録。
• わんくま同盟他でスピーカ経験多数。
自己紹介
![Page 4: XAML の勉強不要! WPF アプリケーションは作れますwankuma.com/seminar/20080621tokyo21/6.pdf · 2009-01-07 · わんくま同盟東京勉強会#21 •WPF やSilver](https://reader034.vdocuments.net/reader034/viewer/2022042313/5eddd2ebad6a402d66690744/html5/thumbnails/4.jpg)
わんくま同盟東京勉強会 #21
• WPF や Silver Light の解説やデモを見て興味を持った方も多いと思います。
• しかし、XAML を見て、大変そうだなってしり込みしている人も多いと聞きます。
• そこで、Expression Blend と Visual Studio のコラボレーションで XAML を書かないで WPFゕプリケーションの開発が行えることを見てほしいと思います。
はじめに
![Page 5: XAML の勉強不要! WPF アプリケーションは作れますwankuma.com/seminar/20080621tokyo21/6.pdf · 2009-01-07 · わんくま同盟東京勉強会#21 •WPF やSilver](https://reader034.vdocuments.net/reader034/viewer/2022042313/5eddd2ebad6a402d66690744/html5/thumbnails/5.jpg)
わんくま同盟東京勉強会 #21
簡単なゕプリケーションを作ってみる• まず Expression Blend を起動して新しいプロジェクトを作成します。
Visual C# とVisual Basicが選択可能です。
![Page 6: XAML の勉強不要! WPF アプリケーションは作れますwankuma.com/seminar/20080621tokyo21/6.pdf · 2009-01-07 · わんくま同盟東京勉強会#21 •WPF やSilver](https://reader034.vdocuments.net/reader034/viewer/2022042313/5eddd2ebad6a402d66690744/html5/thumbnails/6.jpg)
わんくま同盟東京勉強会 #21
簡単なゕプリケーションを作ってみる• こんな画面が表示されます。
![Page 7: XAML の勉強不要! WPF アプリケーションは作れますwankuma.com/seminar/20080621tokyo21/6.pdf · 2009-01-07 · わんくま同盟東京勉強会#21 •WPF やSilver](https://reader034.vdocuments.net/reader034/viewer/2022042313/5eddd2ebad6a402d66690744/html5/thumbnails/7.jpg)
わんくま同盟東京勉強会 #21
簡単なゕプリケーションを作ってみる
• こんなコントロールがあります
![Page 8: XAML の勉強不要! WPF アプリケーションは作れますwankuma.com/seminar/20080621tokyo21/6.pdf · 2009-01-07 · わんくま同盟東京勉強会#21 •WPF やSilver](https://reader034.vdocuments.net/reader034/viewer/2022042313/5eddd2ebad6a402d66690744/html5/thumbnails/8.jpg)
わんくま同盟東京勉強会 #21
簡単なゕプリケーションを作ってみる
• 資産ラブラリにもコントロールはあります
![Page 9: XAML の勉強不要! WPF アプリケーションは作れますwankuma.com/seminar/20080621tokyo21/6.pdf · 2009-01-07 · わんくま同盟東京勉強会#21 •WPF やSilver](https://reader034.vdocuments.net/reader034/viewer/2022042313/5eddd2ebad6a402d66690744/html5/thumbnails/9.jpg)
わんくま同盟東京勉強会 #21
簡単なゕプリケーションを作ってみる• コントロールを配置します。
![Page 10: XAML の勉強不要! WPF アプリケーションは作れますwankuma.com/seminar/20080621tokyo21/6.pdf · 2009-01-07 · わんくま同盟東京勉強会#21 •WPF やSilver](https://reader034.vdocuments.net/reader034/viewer/2022042313/5eddd2ebad6a402d66690744/html5/thumbnails/10.jpg)
わんくま同盟東京勉強会 #21
簡単なゕプリケーションを作ってみる
• プロパテゖを修正します。 修正した(された)プロパティは白丸が付きます。
修正内容は右クリックメニューでリセット可能です(もちろん
UNDOも可能)。
![Page 11: XAML の勉強不要! WPF アプリケーションは作れますwankuma.com/seminar/20080621tokyo21/6.pdf · 2009-01-07 · わんくま同盟東京勉強会#21 •WPF やSilver](https://reader034.vdocuments.net/reader034/viewer/2022042313/5eddd2ebad6a402d66690744/html5/thumbnails/11.jpg)
わんくま同盟東京勉強会 #21
簡単なゕプリケーションを作ってみる
• ベントを作成します。ここでプロパティとイベントを切り替えます。
空白状態からダブルクリックで自動的に作成されます。
![Page 12: XAML の勉強不要! WPF アプリケーションは作れますwankuma.com/seminar/20080621tokyo21/6.pdf · 2009-01-07 · わんくま同盟東京勉強会#21 •WPF やSilver](https://reader034.vdocuments.net/reader034/viewer/2022042313/5eddd2ebad6a402d66690744/html5/thumbnails/12.jpg)
わんくま同盟東京勉強会 #21
簡単なゕプリケーションを作ってみる
• Visual Studio が起動します。 自動的にVisual Studio
が起動されて作成されたイベントが表示されま
す。
![Page 13: XAML の勉強不要! WPF アプリケーションは作れますwankuma.com/seminar/20080621tokyo21/6.pdf · 2009-01-07 · わんくま同盟東京勉強会#21 •WPF やSilver](https://reader034.vdocuments.net/reader034/viewer/2022042313/5eddd2ebad6a402d66690744/html5/thumbnails/13.jpg)
わんくま同盟東京勉強会 #21
• こんな風に Expression Blend でコントロールを配置していってプロパテゖを変更して画面を作成します。
• ベント処理は Visual Studio でプログラムを作成していきます。
• 簡単な画面はこのようにして作成できます。
• Expression Blend と Visual Studio の切り替え時には必ず保存してください、切り替えたときに変更があったことを自動的に認識して再読み込みのダゕログが出て再読み込みします。
簡単なゕプリケーションを作ってみる
![Page 14: XAML の勉強不要! WPF アプリケーションは作れますwankuma.com/seminar/20080621tokyo21/6.pdf · 2009-01-07 · わんくま同盟東京勉強会#21 •WPF やSilver](https://reader034.vdocuments.net/reader034/viewer/2022042313/5eddd2ebad6a402d66690744/html5/thumbnails/14.jpg)
わんくま同盟東京勉強会 #21
DEMO
![Page 15: XAML の勉強不要! WPF アプリケーションは作れますwankuma.com/seminar/20080621tokyo21/6.pdf · 2009-01-07 · わんくま同盟東京勉強会#21 •WPF やSilver](https://reader034.vdocuments.net/reader034/viewer/2022042313/5eddd2ebad6a402d66690744/html5/thumbnails/15.jpg)
わんくま同盟東京勉強会 #21
• Windows Presentation Foundation (WPF) データ バンデゖングは、ゕプリケーションがデータを提供し、UIと結びつけることで、柔軟な UI 表現、 ビジネス ロジックと UI の明確な分離を実現します。
• データ フローの方向やソースの更新の要因を選択でき、表示のためのデータ変換や格納時のデータの検証を行えます。
Bindingの概要
![Page 16: XAML の勉強不要! WPF アプリケーションは作れますwankuma.com/seminar/20080621tokyo21/6.pdf · 2009-01-07 · わんくま同盟東京勉強会#21 •WPF やSilver](https://reader034.vdocuments.net/reader034/viewer/2022042313/5eddd2ebad6a402d66690744/html5/thumbnails/16.jpg)
わんくま同盟東京勉強会 #21
Bindingの概要
• Binding オブジェクトでコントロールのプロパテゖとデータソースのプロパテゖを結びつけます。
Text
プロパティPersonName
プロパティ
TextBlockMyDataSource
(Personクラス)
Binding オブジェクト
![Page 17: XAML の勉強不要! WPF アプリケーションは作れますwankuma.com/seminar/20080621tokyo21/6.pdf · 2009-01-07 · わんくま同盟東京勉強会#21 •WPF やSilver](https://reader034.vdocuments.net/reader034/viewer/2022042313/5eddd2ebad6a402d66690744/html5/thumbnails/17.jpg)
わんくま同盟東京勉強会 #21
Bindingの概要
• データの方向を決めることができます。
Dependency
PropertyProperty
ターゲット ソース
OneTime
OneWay
TwoWay
OneWayToSource
Binding オブジェクトBindingModeプロパティ
BindingModeでDefaultはテキスト ボックスやチェック ボックスなど編集可能な場合はTwoWay、それ以外のほとんどのプロパティはOneWay。
![Page 18: XAML の勉強不要! WPF アプリケーションは作れますwankuma.com/seminar/20080621tokyo21/6.pdf · 2009-01-07 · わんくま同盟東京勉強会#21 •WPF やSilver](https://reader034.vdocuments.net/reader034/viewer/2022042313/5eddd2ebad6a402d66690744/html5/thumbnails/18.jpg)
わんくま同盟東京勉強会 #21
Bindingの概要
• ターゲットのコントロールのプロパテゖの更新タミングを設定できます。
Dependency
PropertyProperty
ターゲット ソース
OneTime
OneWay
TwoWay
Binding オブジェクトBindingModeプロパティ
OneTimeはアプリケーションの起動時またはデータコンテキストの変更時OneWay・ TwoWayはプロパティ変更時
![Page 19: XAML の勉強不要! WPF アプリケーションは作れますwankuma.com/seminar/20080621tokyo21/6.pdf · 2009-01-07 · わんくま同盟東京勉強会#21 •WPF やSilver](https://reader034.vdocuments.net/reader034/viewer/2022042313/5eddd2ebad6a402d66690744/html5/thumbnails/19.jpg)
わんくま同盟東京勉強会 #21
Bindingの概要
• ソースのプロパテゖの更新タミングを設定できます。
Dependency
PropertyProperty
ターゲット ソース
TwoWay
OneWayToSource
Binding オブジェクトBindingModeプロパティ
Binding.UpdateSourceTriggerプロパティPropertyChangedの場合ターゲットプロパティ変更時、LostFocusの場合ターゲットがフォーカスを失った時、Explicitの場合アプリケーションが UpdateSourceを呼び出した時。
![Page 20: XAML の勉強不要! WPF アプリケーションは作れますwankuma.com/seminar/20080621tokyo21/6.pdf · 2009-01-07 · わんくま同盟東京勉強会#21 •WPF やSilver](https://reader034.vdocuments.net/reader034/viewer/2022042313/5eddd2ebad6a402d66690744/html5/thumbnails/20.jpg)
わんくま同盟東京勉強会 #21
Bindingの概要• DataContext や ItemsSource で扱うデータをまとめて設定できます。
TextBlock.Text
プロパティTextBlock.Text
プロパティTextBlock.Text
プロパティTextBlock.Text
プロパティTextBlock.Text
プロパティTextBlock.Text
プロパティ
ID
プロパティふりがなプロパティ氏名
プロパティ誕生日プロパティ都道府県ID
プロパティ郵便番号プロパティ
Binding オブジェクト
顧客クラスインスタンス
Binding オブジェクト
Binding オブジェクト
Binding オブジェクト
Binding オブジェクト
Binding オブジェクト
顧客ListView. ItemsSource
(親要素)
代入
![Page 21: XAML の勉強不要! WPF アプリケーションは作れますwankuma.com/seminar/20080621tokyo21/6.pdf · 2009-01-07 · わんくま同盟東京勉強会#21 •WPF やSilver](https://reader034.vdocuments.net/reader034/viewer/2022042313/5eddd2ebad6a402d66690744/html5/thumbnails/21.jpg)
わんくま同盟東京勉強会 #21
Bindingの概要
• Expression Blend のデータソース– XML データ ソース
• XML 形式のデータを提供できるローカルまたはリモートのXML フゔル
– 共通言語ランタム (CLR) オブジェクト データ ソース• ObservableCollection クラスが提供
• IEnumerable ンターフェスとINotifyCollectionChanged ンターフェスとINotifyPropertyChanged ンターフェスを実装したクラス
• Linq to SQL データ
![Page 22: XAML の勉強不要! WPF アプリケーションは作れますwankuma.com/seminar/20080621tokyo21/6.pdf · 2009-01-07 · わんくま同盟東京勉強会#21 •WPF やSilver](https://reader034.vdocuments.net/reader034/viewer/2022042313/5eddd2ebad6a402d66690744/html5/thumbnails/22.jpg)
わんくま同盟東京勉強会 #21
Bindingの概要
• WPF のデータソース– Expression Blend のデータソースの2つ
– ADO.NET データ• ADO.NET DataView は、IBindingList を実装し、バンデゖング エンジンがリッスンする変更通知を提供
– DependencyObject• WPF のコントロールは全て DependencyObject
• 任意の DependencyObject の依存関係プロパテゖにバンド、コントロールのプロパテゖ間のバンデゖングに主に使用
• Blend ではプロパテゖウゖンドウからデータバンドで設定可能
![Page 23: XAML の勉強不要! WPF アプリケーションは作れますwankuma.com/seminar/20080621tokyo21/6.pdf · 2009-01-07 · わんくま同盟東京勉強会#21 •WPF やSilver](https://reader034.vdocuments.net/reader034/viewer/2022042313/5eddd2ebad6a402d66690744/html5/thumbnails/23.jpg)
わんくま同盟東京勉強会 #21
Linq to SQL とのバンデゖング
• Visual Studio で WPF ゕプリケーションを作成。
WPFアプリケーション
.NET
Framework 3.5
![Page 24: XAML の勉強不要! WPF アプリケーションは作れますwankuma.com/seminar/20080621tokyo21/6.pdf · 2009-01-07 · わんくま同盟東京勉強会#21 •WPF やSilver](https://reader034.vdocuments.net/reader034/viewer/2022042313/5eddd2ebad6a402d66690744/html5/thumbnails/24.jpg)
わんくま同盟東京勉強会 #21
Linq to SQL とのバンデゖング
• プロジェクトに LINQ to SQL クラス追加。
LINQ to SQL
クラス
![Page 25: XAML の勉強不要! WPF アプリケーションは作れますwankuma.com/seminar/20080621tokyo21/6.pdf · 2009-01-07 · わんくま同盟東京勉強会#21 •WPF やSilver](https://reader034.vdocuments.net/reader034/viewer/2022042313/5eddd2ebad6a402d66690744/html5/thumbnails/25.jpg)
わんくま同盟東京勉強会 #21
Linq to SQL とのバンデゖング
• データ接続からテーブルをドラッグ。
テーブルをここにドラッグ
![Page 26: XAML の勉強不要! WPF アプリケーションは作れますwankuma.com/seminar/20080621tokyo21/6.pdf · 2009-01-07 · わんくま同盟東京勉強会#21 •WPF やSilver](https://reader034.vdocuments.net/reader034/viewer/2022042313/5eddd2ebad6a402d66690744/html5/thumbnails/26.jpg)
わんくま同盟東京勉強会 #21
Linq to SQL とのバンデゖング
• データコンテキストが自動生成。 リビルドして反映させます
![Page 27: XAML の勉強不要! WPF アプリケーションは作れますwankuma.com/seminar/20080621tokyo21/6.pdf · 2009-01-07 · わんくま同盟東京勉強会#21 •WPF やSilver](https://reader034.vdocuments.net/reader034/viewer/2022042313/5eddd2ebad6a402d66690744/html5/thumbnails/27.jpg)
わんくま同盟東京勉強会 #21
Linq to SQL とのバンデゖング
• Expression Blend で同じプロジェクトを読み込みます。
• ListBox を追加して listbox1 と名前を付けておきます。
• Blend に 作成した LINQ to SQLクラスを追加するには、 データ+CLR オブジェクト をクリックします。
データ+CLRオブジェクト
![Page 28: XAML の勉強不要! WPF アプリケーションは作れますwankuma.com/seminar/20080621tokyo21/6.pdf · 2009-01-07 · わんくま同盟東京勉強会#21 •WPF やSilver](https://reader034.vdocuments.net/reader034/viewer/2022042313/5eddd2ebad6a402d66690744/html5/thumbnails/28.jpg)
わんくま同盟東京勉強会 #21
Linq to SQL とのバンデゖング
• ListBox に表示したいテーブルを選択して、CLR オブジェクトデータソースを作ります。
LinqToSQLアセンブリのLinqToSQL名前空間の
Orders クラス
![Page 29: XAML の勉強不要! WPF アプリケーションは作れますwankuma.com/seminar/20080621tokyo21/6.pdf · 2009-01-07 · わんくま同盟東京勉強会#21 •WPF やSilver](https://reader034.vdocuments.net/reader034/viewer/2022042313/5eddd2ebad6a402d66690744/html5/thumbnails/29.jpg)
わんくま同盟東京勉強会 #21
Linq to SQL とのバンデゖング
• ここでは複数の項目をまとめてバンドする為データソースのクラスを選択し DataTemplateの定義を押します。
CustomerDSデータソースCustomers クラス
バインドの方向ソースの更新タイミング規定値・値コンバータを指定できます
![Page 30: XAML の勉強不要! WPF アプリケーションは作れますwankuma.com/seminar/20080621tokyo21/6.pdf · 2009-01-07 · わんくま同盟東京勉強会#21 •WPF やSilver](https://reader034.vdocuments.net/reader034/viewer/2022042313/5eddd2ebad6a402d66690744/html5/thumbnails/30.jpg)
わんくま同盟東京勉強会 #21
Linq to SQL とのバンデゖング
• 表示したい項目を選ぶと自動的にデータテンプレートを作成します。
CompanyName
ContactName
を表示させます。
![Page 31: XAML の勉強不要! WPF アプリケーションは作れますwankuma.com/seminar/20080621tokyo21/6.pdf · 2009-01-07 · わんくま同盟東京勉強会#21 •WPF やSilver](https://reader034.vdocuments.net/reader034/viewer/2022042313/5eddd2ebad6a402d66690744/html5/thumbnails/31.jpg)
わんくま同盟東京勉強会 #21
WPF アプリケーション
public partial class Window1 : Window
{
private DataClasses1DataContext
dataContext = new DataClasses1DataContext();
public Window1()
{
InitializeComponent();
this.listbox1.ItemsSource = dataContext.Customers;
}
} ItemSourceにCustomers を設定します
ローカルにDataContext を用意します
![Page 32: XAML の勉強不要! WPF アプリケーションは作れますwankuma.com/seminar/20080621tokyo21/6.pdf · 2009-01-07 · わんくま同盟東京勉強会#21 •WPF やSilver](https://reader034.vdocuments.net/reader034/viewer/2022042313/5eddd2ebad6a402d66690744/html5/thumbnails/32.jpg)
わんくま同盟東京勉強会 #21
• クラスのプロパテゖと UI のプロパテゖをBinding オブジェクトで結びつければ、データバンデゖングできます。
• クラスのンスタンスを UI の DataContext やItemSource に設定して、クラスのプロパテゖ名と UI のプロパテゖ名 を結びつければ、データバンデゖングできます。
• ListBox や ListView などは、DataTemplate でデータの表示を設定できます。
Binding
![Page 33: XAML の勉強不要! WPF アプリケーションは作れますwankuma.com/seminar/20080621tokyo21/6.pdf · 2009-01-07 · わんくま同盟東京勉強会#21 •WPF やSilver](https://reader034.vdocuments.net/reader034/viewer/2022042313/5eddd2ebad6a402d66690744/html5/thumbnails/33.jpg)
わんくま同盟東京勉強会 #21
DEMO
![Page 34: XAML の勉強不要! WPF アプリケーションは作れますwankuma.com/seminar/20080621tokyo21/6.pdf · 2009-01-07 · わんくま同盟東京勉強会#21 •WPF やSilver](https://reader034.vdocuments.net/reader034/viewer/2022042313/5eddd2ebad6a402d66690744/html5/thumbnails/34.jpg)
わんくま同盟東京勉強会 #21
• UI のプロパテゖを時間に合わせて変更していけば、UI は簡単なゕニメーションをしているように見えます。
• Expression Blend では、タムラン上にキーフレームを作成しプロパテゖを変更することで、キーフレーム間の時間に指定されたプロパテゖ値を補間して、なめらかなゕニメーションにしてくれます。
• ゕニメーションの開始や終了はトリガのベントで指定します。
ゕニメーション
![Page 35: XAML の勉強不要! WPF アプリケーションは作れますwankuma.com/seminar/20080621tokyo21/6.pdf · 2009-01-07 · わんくま同盟東京勉強会#21 •WPF やSilver](https://reader034.vdocuments.net/reader034/viewer/2022042313/5eddd2ebad6a402d66690744/html5/thumbnails/35.jpg)
わんくま同盟東京勉強会 #21
ゕニメーション
• マウスをかざすと大きくなるボタンを作ってみましょう。– 新しいプロジェクトを作成しボタンを配置します。
ボタンを配置します。
10x10の大きさにします。
![Page 36: XAML の勉強不要! WPF アプリケーションは作れますwankuma.com/seminar/20080621tokyo21/6.pdf · 2009-01-07 · わんくま同盟東京勉強会#21 •WPF やSilver](https://reader034.vdocuments.net/reader034/viewer/2022042313/5eddd2ebad6a402d66690744/html5/thumbnails/36.jpg)
わんくま同盟東京勉強会 #21
ゕニメーション
• マウスがボタンの描画領域に入ったときに発生するベントは MouseEnter です、トリガにボタンの MouseEnter ベントを作成します。
ボタンを選択します。
MouseEnter イベントを選択します。
+イベントをクリックしてイベントを追加します。
![Page 37: XAML の勉強不要! WPF アプリケーションは作れますwankuma.com/seminar/20080621tokyo21/6.pdf · 2009-01-07 · わんくま同盟東京勉強会#21 •WPF やSilver](https://reader034.vdocuments.net/reader034/viewer/2022042313/5eddd2ebad6a402d66690744/html5/thumbnails/37.jpg)
わんくま同盟東京勉強会 #21
ゕニメーション
• MouseEnter ベント発生時に実行するタムランを割り当てます。
+をクリックしてタイムラインを割り当てます。
タイムラインが存在しないので新規で自動作成されます。
![Page 38: XAML の勉強不要! WPF アプリケーションは作れますwankuma.com/seminar/20080621tokyo21/6.pdf · 2009-01-07 · わんくま同盟東京勉強会#21 •WPF やSilver](https://reader034.vdocuments.net/reader034/viewer/2022042313/5eddd2ebad6a402d66690744/html5/thumbnails/38.jpg)
わんくま同盟東京勉強会 #21
ゕニメーション
• タムランが表示され記録オンの状態になります。
注)このハードコピーは作業中の画面です。
![Page 39: XAML の勉強不要! WPF アプリケーションは作れますwankuma.com/seminar/20080621tokyo21/6.pdf · 2009-01-07 · わんくま同盟東京勉強会#21 •WPF やSilver](https://reader034.vdocuments.net/reader034/viewer/2022042313/5eddd2ebad6a402d66690744/html5/thumbnails/39.jpg)
わんくま同盟東京勉強会 #21
ゕニメーション
• MouseEnter ベント発生で1秒後にボタンサズを指定します。
ボタンを選択します。
タイムライン再生ヘッドを1秒の位置にします。
![Page 40: XAML の勉強不要! WPF アプリケーションは作れますwankuma.com/seminar/20080621tokyo21/6.pdf · 2009-01-07 · わんくま同盟東京勉強会#21 •WPF やSilver](https://reader034.vdocuments.net/reader034/viewer/2022042313/5eddd2ebad6a402d66690744/html5/thumbnails/40.jpg)
わんくま同盟東京勉強会 #21
ゕニメーション
• MouseEnter ベント発生で1秒後にボタンサズを既定の10から128にします。
Width Height を 128 にします。
キーフレーム(白丸)が作成されます。
![Page 41: XAML の勉強不要! WPF アプリケーションは作れますwankuma.com/seminar/20080621tokyo21/6.pdf · 2009-01-07 · わんくま同盟東京勉強会#21 •WPF やSilver](https://reader034.vdocuments.net/reader034/viewer/2022042313/5eddd2ebad6a402d66690744/html5/thumbnails/41.jpg)
わんくま同盟東京勉強会 #21
ゕニメーション
• MouseLeave ベント発生でタムランを停止しボタンの大きさを規定値(10x10)にします。
タイムライン停止を選択します。
ボタンを選択します。
MouseLeave イベントを選択します。
タイムラインを選択します。
+イベントをクリックしてイベントを追加します。
![Page 42: XAML の勉強不要! WPF アプリケーションは作れますwankuma.com/seminar/20080621tokyo21/6.pdf · 2009-01-07 · わんくま同盟東京勉強会#21 •WPF やSilver](https://reader034.vdocuments.net/reader034/viewer/2022042313/5eddd2ebad6a402d66690744/html5/thumbnails/42.jpg)
わんくま同盟東京勉強会 #21
ゕニメーション
• マウスをかざしたりはなしたりするとボタンの大きさが変わります。
マウスをかざすと。
徐々に大きくなり1秒後にこの大きさに。
マウスをはなすと元通り。
![Page 43: XAML の勉強不要! WPF アプリケーションは作れますwankuma.com/seminar/20080621tokyo21/6.pdf · 2009-01-07 · わんくま同盟東京勉強会#21 •WPF やSilver](https://reader034.vdocuments.net/reader034/viewer/2022042313/5eddd2ebad6a402d66690744/html5/thumbnails/43.jpg)
わんくま同盟東京勉強会 #21
3Dグラフゖック
• 3DグラフゖックはXAML形式や Wave front 3D形式が読み込めます。
プロジェクトを選択します。
既存のアイテムを追加を選択します。
![Page 44: XAML の勉強不要! WPF アプリケーションは作れますwankuma.com/seminar/20080621tokyo21/6.pdf · 2009-01-07 · わんくま同盟東京勉強会#21 •WPF やSilver](https://reader034.vdocuments.net/reader034/viewer/2022042313/5eddd2ebad6a402d66690744/html5/thumbnails/44.jpg)
わんくま同盟東京勉強会 #21
3Dグラフゖック
Wavefront 3D(obj) やWavefront素材(mtl)
![Page 45: XAML の勉強不要! WPF アプリケーションは作れますwankuma.com/seminar/20080621tokyo21/6.pdf · 2009-01-07 · わんくま同盟東京勉強会#21 •WPF やSilver](https://reader034.vdocuments.net/reader034/viewer/2022042313/5eddd2ebad6a402d66690744/html5/thumbnails/45.jpg)
わんくま同盟東京勉強会 #21
3Dグラフゖック
• プロジェクトの obj フゔルをダブルクリックすると、ViewPort3D・カメラ・環境光・指向性ラトが自動的に作成されます。
読み込まれた3Dグラフィックが表示されます。
ViewPort3Dオブジェクトが追加されます。
![Page 46: XAML の勉強不要! WPF アプリケーションは作れますwankuma.com/seminar/20080621tokyo21/6.pdf · 2009-01-07 · わんくま同盟東京勉強会#21 •WPF やSilver](https://reader034.vdocuments.net/reader034/viewer/2022042313/5eddd2ebad6a402d66690744/html5/thumbnails/46.jpg)
わんくま同盟東京勉強会 #21
DEMO
![Page 47: XAML の勉強不要! WPF アプリケーションは作れますwankuma.com/seminar/20080621tokyo21/6.pdf · 2009-01-07 · わんくま同盟東京勉強会#21 •WPF やSilver](https://reader034.vdocuments.net/reader034/viewer/2022042313/5eddd2ebad6a402d66690744/html5/thumbnails/47.jpg)
わんくま同盟東京勉強会 #21
• Expression Blend と Visual Studio のコラボレーションで XAML を書かないで WPF ゕプリケーションの開発が行えます。
• バンデゖングを使えばデータと UI を分離でき、表示のためのデータ変換や格納時のデータの検証を行えます。
• ゕニメーションを作成すれば Expression Blend で多種多様な視覚効果を追加できます。
• 3Dオブジェクトも XAML 形式や Wave front 3D 形式から読み込めゕニメーションもできます。
まとめ
![Page 48: XAML の勉強不要! WPF アプリケーションは作れますwankuma.com/seminar/20080621tokyo21/6.pdf · 2009-01-07 · わんくま同盟東京勉強会#21 •WPF やSilver](https://reader034.vdocuments.net/reader034/viewer/2022042313/5eddd2ebad6a402d66690744/html5/thumbnails/48.jpg)
わんくま同盟東京勉強会 #21
Resources
.Netユーザーエクスペリエンス研究所http://mnow.jp/
INETA JAPAN
http://www.ineta.jp/
Microsoft Community Ring ホームhttp://www.microsoft.com/japan/powerpro/community/
わんくま同盟http://www.wankuma.com/
Microsoft Expression
http://www.microsoft.com/japan/products/expression/default.mspx
Microsoft Visual Studio
http://www.microsoft.com/japan/msdn/vstudio/
Microsoft MSDN
http://msdn2.microsoft.com/ja-jp/library/bb546194.aspx
http://msdn2.microsoft.com/ja-jp/library/ms754130.aspx
http://msdn2.microsoft.com/ja-jp/library/ms753307.aspx
http://msdn2.microsoft.com/ja-jp/library/ms771633.aspx
http://msdn2.microsoft.com/ja-jp/library/ms747122.aspx