「[[マイクロソフト系技術情報 Wiki>http://techinfoofmicrosofttech.osscons.jp/]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。 -[[戻る>デスクトップ・アプリ]] * 目次 [#oe6f0e65] #contents *概要 [#s757a7be] -WPFは、.NET Framework 3.0で新しく提供され、Windows Vistaで全面的に採用された、~ リッチでインタラクティブなUIアプリケーションを開発・実行するためのUIサブシステム~ >(クラス ライブラリ・UIコントロールのセットを含むランタイム・フレームワーク)。~ -Windows VistaのUIサブシステムにはWPFが全面的に採用されており、~ 今後のWindowsのUIアプリケーション開発の標準技術として利用できる。 **[[XAML]] [#i6169fe1] WPF/Silverlightは、[[XAML]] based UIとも呼ばれ、~ [[XAML]]というマークアップ言語によってデザインされる。 ***[[XAMLの書き方(1)]] [#s346a921] ***[[XAMLの書き方(2)]] [#j5b4cdba] **[[WPF]] [#ge1fbbde] Windowsプラットフォーム。 ***[[WPFの機能]] [#pe834014] ***[[WPFのアーキテクチャ]] [#x832c192] ***[[WPFのコントロール]] [#o5c7e45e] **[[Silverlight]] [#xef889a0] クロスプラットフォーム(アプレットのような) **追加 [#hed31d76] 以下は、[[XAML]] based UIとして、~ WPF/Silverlightの登場以降に追加されたもの。 ***Metro or Modern [#a0c50661] -Modern UI - Wikipedia~ https://ja.wikipedia.org/wiki/Modern_UI ***[[UWP]] [#t09676f5] [[WPF>#ge1fbbde]]と同様に、Windowsプラットフォーム。 ***[[Xamarin]] [#me9b9978] クロスプラットフォーム(スマホ・ネイティブ) ***[[Uno Platform]] [#o9a541d4] クロスプラットフォーム([[UWP>#t09676f5]], [[Xamarin>#me9b9978]], [[WebAssembly]]) *特徴 [#w6f7a746] WPF / Silverlightは、高速なグラフィックスではなく、 -メディア リッチ:音声・動画の組み合わせ -インタラクティビティー:画像や音声などによって示される内容に応答する操作性 を実現するUIサブシステムであるため、 -Direct3D -DirectShow -Media Foundation などを使用して開発する3Dゲームや高品質なビデオ再生アプリの開発には向かないが、~ 業務アプリケーション開発に必要な標準コントロールを備えており、~ 従来の業務アプリケーションにリッチでインタラクティブな効果を追加可能。 **開発環境 [#w8b19d45] -WPF / Silverlight は、Visual Studio 2008以降や、Expression Blendを使用して開発が可能。 -Expression Blendはデザイナ向けツールであり、VSに無い以下の機能を有している。 --GUIを使用した図形オブジェクトの作成・編集 --GUIを使用したグラデーションの作成・編集 --GUIを使用したアニメーションの作成・編集 --,etc. **実行環境 [#t29e32be] WPFは、.NET Framework 3.0以上でサポートされており、Windows XPでも動作可能である。ただし、Windows XPは、Windows Vistaとディスプレイ ドライバ モデルが異なるため、条件によっては、GPUによるハードウェア レンダリングが使用できず、ソフトウェア レンダリングになることでCPUへの負荷が増えたり、見え方が若干変わったりする場合もある。 WPF/SilverlightのOS要件 |項番|OS|>|>|WPF(.NET Framework)|Silverlight 3|Silverlight 4|h |||3.0|3.5|4.0|||h |1|Windows 7|-|○|○|○|○| |2|Windows Server 2008 R2|-|○|○|○|○| |3|Windows Vista|○|○|○|○|○| |4|Windows Server 2008|○|○|○|○|○| |5|Windows XP|○|○|○|○|○| |6|Windows Server 2003|○|○|○|○|○| |7|Windows 2000 (SP4)|-|-|-|○|-| |8|Mac OS X 10.4.11 以上(Intelベース)|- |-|-|○|○| ハードウェア要件、追加のソフトウェア要件を含めた詳細は以下を参照 -.NET Framework システム要件~ http://msdn.microsoft.com/ja-jp/library/8z6watww.aspx -Silverlight page~ http://www.microsoft.com/japan/silverlight/requirements.aspx -[[WPF]] -[[Silverlight]] *開発方法 [#g62a273d] WPF / Silverlightアプリケーションの開発には以下のような特徴がある。 -WPF / Silverlightでは、P層のUI部分を(HTMLのようなXMLベースのマークアップ言語である)XAMLをVS・Expression Blendなどのツールを使用して記述し、イベントなどのプログラム部分はC#、VBを使用して開発する(Sliverlight 1.0はJavaScriptのみ対応)。UI部分とプログラム部分を分離して記述・実装できる。 -ASP.NETアプリケーション(Webフォーム)のHTML + ASPタグのように、マークアップ言語であるXAMLから、UI要素が生成され、分離クラス(コードビハインド)にイベント処理などの業務処理を実装するという、従来からのイベント・ドリブン、UIコンポーネントベースのプログラミング・モデルを継承するUIテクノロジ。 また、XAMLは、XMLをベースとしており各要素からツリー構造のCLRオブジェクトをインスタンス化できる。このため、XAMLは、「ツリー構造のCLRオブジェクトをインスタンス化するためのマークアップ言語」と説明することも可能である 。XAMLによるCLRオブジェクト生成の例は、以下を参考にできる。 -連載:WPF入門:第1回 いよいよWPFの時代。WPFの習得を始めよう (1/3) - @IT~ http://www.atmarkit.co.jp/ait/articles/1005/14/news105.html -連載:WPF入門:第2回 WPFとXAMLの関係とは? XAMLの基礎を学ぶ - @IT~ --http://www.atmarkit.co.jp/fdotnet/chushin/introwpf_02/introwpf_02_01.html --http://www.atmarkit.co.jp/fdotnet/chushin/introwpf_02/introwpf_02_02.html --http://www.atmarkit.co.jp/fdotnet/chushin/introwpf_02/introwpf_02_03.html **UI部分とプログラム部分を分離して記述・実装 [#eb070dc4] UI部分にXAML、プログラム部分にCLR言語と、UI・プログラム部分を分離して記述・実装できるので、Webアプリケーションと同様に画面デザイン(画面モックアップ開発)とプログラム開発の分業が可能である。例えば、UI開発ツールに特化したExpression Blendで、VSソリューション(プロジェクト)ファイルをそのまま開き、XAMLを直接作成・編集することもできる。 WPFにおける分離コードを実現するためには、従来のWindowsフォームや、ASP.NETアプリケーション(Webフォーム)と同様に、分離クラス(コードビハインド)と、.NET Framework 2.0からサポートされたパーシャル クラスが使用される。XAMLファイルから分離クラス(コードビハインド)ファイルを関連付けるためには、XAML上で「x:Class」、「x:Subclass」、「x:ClassModifier」などのディレクティブを定義する。なお、「x:Code」ディレクティブを定義すればXAML上にインラインでコードを実装することもできる。また、分離クラス(コードビハインド)ファイルから、XAMLファイルで生成したCLRオブジェクトにアクセスするには、「x:Name」ディレクティブ、または、Name属性を付与する必要がある。これらのディレクティブについては、「[[ディレクティブ>#cd4daa01]]」を参照のこと。 -WPF における分離コードと XAML~ https://msdn.microsoft.com/ja-jp/library/aa970568.aspx ***WPFにおけるビルド アクション [#jba5609b] 中間生成物であるパーシャル クラスは、ビルド アクション = Pageに設定されている(WindowやPageの)XAMLから生成され、分離クラス(コードビハインド)と統合されてビルドされる。 -WPF アプリケーション (WPF) のビルド~ http://msdn.microsoft.com/ja-jp/library/aa970678.aspx **プログラム部分は、VB・C#を使用して実装 [#b338c3aa] ***XAMLの記述方法 [#da73b2ff] テキスト ベースの記述、デザイナを使用した記述が可能。 -Expression Blendを使用して --テキスト ベースの記述(IntelliSenseを活用) --デザイナを使用した記述 >が可能。 -従来の[[Windows Forms]]と同様にVSを使用して、 --テキスト ベースの記述(IntelliSenseを活用) --デザイナを使用した記述 >が可能 。 >通常は、VSを利用すればIDE機能としては事足りるが、Expression Blendでしかできない「[[デザイナ向け機能>XAMLの書き方#y6378ada]]」を使用する場合は、Expression Blendを使用する。 ***プログラムの実装方法 [#tfbe604f] WPF / Silverlightアプリケーション開発は、C#、VBなどの、標準的なプログラム言語を使用できるため開発要員を確保しやすい。また、VSデザイナを使用すれば、Windowsフォーム、ASP.NETアプリケーション(Webフォーム)と同様な開発が可能であることが分かる。また、WPF / Silverlightの双方で、ランタイムは異なるもののUIサブシステムのフレームワークの基本的な構造については同じものを共用できる。このUIサブシステムのフレームワークを習得すれば、双方の開発が可能となる(ただし、双方の違いは理解しておく必要がある。「[[Silverlight>Silverlight#i4491fc9]]」を参照)。ただし、高度な処理を実装する場合や、トラブルシュートを行う場合は、UIサブシステムのフレームワーク、XAMLの読み方・書き方をある程度は知っておく必要がある。しかし、これらの仕様は大きく、複雑で把握するのに時間がかかる。この点に関して、WPF / Silverlightアプリケーションの開発は、敷居が高いと言える。 *国際化対応 [#a71cee5a] **WPFの場合 [#r33c4fc5] -WPF のグローバリゼーションおよびローカリゼーションの概要~ http://msdn.microsoft.com/ja-jp/library/ms788718.aspx **Silverlightの場合 [#gb21ccad] -Silverlight のロケール リソースを読み込むためのヒントと秘訣~ http://msdn.microsoft.com/ja-jp/magazine/gg650657.aspx -Alex Golesh's Blog About Silverlight Development (英語) ~ http://blogs.microsoft.co.il/blogs/alex_golesh/archive/2009/07/14/silverlight-quick-tip-resx-image-resources.aspx *参考 [#x3d99036] **CodeZine [#t9a75977] -Developers Summit 2010 > グレープシティ株式会社~ > 【18-D-6】WPF 4とSilverlight 4,これから業務アプリを開発するならどっち?~ http://codezine.jp/devsumi/2010/report/10/ **@IT > Insider.NET [#wfef3b0c] ***WPF/E [#x32376fa] -“WPF/E” vs Adobe Flash,ガチンコ対決!~ http://www.atmarkit.co.jp/fdotnet/insiderseye/20061214wpfe01/wpfe-flash_table.html -“WPF/E”開発を体験してみよう!~ http://www.atmarkit.co.jp/fdotnet/insiderseye/20061221wpfe02/wpfe02_01.html ***WPF/Silverlight UIフレームワーク入門 [#y9ebf958] http://www.atmarkit.co.jp/fdotnet/vblab/uiframework_index/index.html -第1回 WPFとSilverlightをまとめて習得しよう --1. XAML構文の基礎~ http://www.atmarkit.co.jp/fdotnet/vblab/uiframework_01/uiframework_01_01.html --2. Panelによるレイアウト(StackPanel/Canvas)~ http://www.atmarkit.co.jp/fdotnet/vblab/uiframework_01/uiframework_01_02.html --3. Panelによるレイアウト(Grid/そのほかのPanel)~ http://www.atmarkit.co.jp/fdotnet/vblab/uiframework_01/uiframework_01_03.html --4. コントロールの種類~ http://www.atmarkit.co.jp/fdotnet/vblab/uiframework_01/uiframework_01_04.html -第2回 データの表示と入力に必要な知識 --1. データ バインディングの基本~ http://www.atmarkit.co.jp/fdotnet/vblab/uiframework_02/uiframework_02_01.html --2. より実践的なデータ バインディング~ http://www.atmarkit.co.jp/fdotnet/vblab/uiframework_02/uiframework_02_02.html --3. 双方向データ バインディング~ http://www.atmarkit.co.jp/fdotnet/vblab/uiframework_02/uiframework_02_03.html --4. コンバータによるデータ変換/コレクション オブジェクトへのバインド~ http://www.atmarkit.co.jp/fdotnet/vblab/uiframework_02/uiframework_02_04.html --5. 表示をカスタマイズできるデータ テンプレート~ http://www.atmarkit.co.jp/fdotnet/vblab/uiframework_02/uiframework_02_05.html -第3回 “見た目”を決めるリソースとスタイル --1. リソースの概要/静的リソース参照~ http://www.atmarkit.co.jp/fdotnet/vblab/uiframework_03/uiframework_03_01.html --2. 動的リソース参照/リソース ディクショナリ ファイル~ http://www.atmarkit.co.jp/fdotnet/vblab/uiframework_03/uiframework_03_02.html --3. スタイルの基礎/スタイルの共有と継承~ http://www.atmarkit.co.jp/fdotnet/vblab/uiframework_03/uiframework_03_03.html -第4回 “見た目”を決めるコントロール テンプレート --1. コントロール テンプレートの概要~ http://www.atmarkit.co.jp/fdotnet/vblab/uiframework_04/uiframework_04_01.html --2. コントロール テンプレートによる外観の定義方法~ http://www.atmarkit.co.jp/fdotnet/vblab/uiframework_04/uiframework_04_02.html --3. コントロール テンプレート内で動的に外観を定義する方法~ http://www.atmarkit.co.jp/fdotnet/vblab/uiframework_04/uiframework_04_03.html -特集:WPF4とSilverlight4 > これから業務アプリを開発するならどっち?~ http://www.atmarkit.co.jp/fdotnet/chushin/wpf4silverlight4_01/wpf4silverlight4_01_01.html ---- Tags: [[:.NET開発]], [[:UIサブシステム]], [[:WPF/Silverlight, XAML]], [[:国際化対応]]