ScottGu's blog translated by Chica @ Wankuma

Silverlight チュートリアル パート 8: WPFを使用してDiggデスクトップアプリケーションを作成

  

これは8つのチュートリアルのパート8で、簡単なDiggクライアントアプリケーションをSilverlight2のベータ1リリースを使用して構築する方法をご紹介します。 このチュートリアルは、順番にご覧頂きながら、Silverlightのプログラム概念のコアな部分をいくらかご説明させていただくことを目的としています。

WPFを使用してDiggデスクトップアプリケーションを作成

この最後のチュートリアルの目標は、これまでの7つのチュートリアルとは少し異なります。このチュートリアルではSilverlightでコードを起動しません。代わりに、WPFと.NET 3.5を使用します。ブラウザでSilverlightの中で起動させるために書いた既存のDiggアプリケーションのコードを持ってきて、それを再利用し、Windowsデスクトップアプリケーションととしても起動させます。

Silverlightは.NET Frameworkにある全てのバージョンと互換性のあるサブセットと共に出荷されます。今回の目的の1つは、開発者の方々に共通のプログラミングモデルとツールセットを習得して頂くこと、そして、RIA Webアプリケーション、リッチWindowsデスクトップアプリケーション、Officeソリューションに渡り、スキル、コード、コンテンツを再利用して頂くことです。

以下はWindowsデスクトップアプリケーションバージョンを構築するために既存のDigg Silverlight アプリケーションのコード(ブラウザで起動します)を再利用するために取った手順になります。

ステップ 1: 新規のWPFデスクトップアプリケーションを作成

まず、WPFデスクトップアプリケーションをVS 2008を使用して新規作成し、"DiggDesktopSample"と名前を付けます。:

これによりVSで2つのファイル(App.xaml、Window.xaml)を伴ったプロジェクトが作成されます。 :

このプロジェクトの構造は、このシリーズのチュートリアル1で作成したSilverlightのものと非常に似ています。(これにはApp.xaml、Page.xamlがありました。)

ステップ 2) 既存のDiggアプリケーションコードをWPFアプリケーションにコピー

既存のDiggApplicationのSilverlightコードを新しいDiggDesktopSample Windowsプロジェクトへコピー&ペーストします。 :

現在ベータ1ではこのコピー&ペースト作業は手動になります。今後プロジェクト間でのコードの移動をより自動化していくつもりです。

ステップ 3) いくつかの問題点を修正

コンパイルするために既存のDiggサンプルコードに2つの変更を加えました。 :

1) Silverlightベータ1 XAMLスキーマxmlns:URLはWPFデスクトップバージョンとは異なります。新しいプロジェクトにコピーしたXAMLファイルをフルのWPFスキーマへポイントさせるために少し変更する必要がありました。これは出荷前に是非改善したい点です。

2) <WaterMarkTextBox>コントロールを <TextBox>に変更し、 <HyperlinkButton> コントロールを<TextBlock>に変更しなければなりませんでした。これら2つのコントロールは、Silverlightベータ1で新しいもので、フルのWPFにはまだありません。(将来的には追加しますが。)しかし、これらのコントロールや、ネットワーク、LINQ to XML、データバインディングコードに関連するコードを変更する必要はありません

これらの小さい変更を加えればプロジェクトは上手くコンパイルされます。

ステップ 4) デスクトップウィンドウでDiggアプリケーションをホスト

そして、デスクトッププロジェクト(アプリケーション開始された時にデフォルトでロードされるウィンドウ)でWindows1.xaml を開きます。

ウィンドウのタイトルを"Digg デスクトップバージョン"に更新し、ウィンドウの デフォルトのWidth およびHeightを拡張します。

その後、Page.xamlユーザコントロールを以前のDigg Silverlightプロジェクトからウィンドウのルートコントロールとして追加します。これにより、ウィンドウがロードされた時に、それが表示されロードされます。Pageクラスコードや名前の変更は必要ありません。これは、UserControlから派生されたもので、どのWPFウィンドウまたはコントロールの中でも上手くホストされるからです。

最後に加えた変更は、Digg REST APIサーバが、ブラウザでないものとサーバがそこへアクセスしようとしているのを検知すると、アクセス拒否の応答を時々行う(恐らくこのサービスをヒットさせる自動スクリプトを避けるためだと思われます。)という問題についてです。これは、プロキシURL(コードの変更はありません。URLの変更のみです。)を通じて行うようにすることで修正しました。

ステップ 5) アプリケーションを起動

そうすると、この新しいDiggデスクトップアプリケーションを起動させることができました。すべての機能はSilverlightバージョンと同じ様に機能し、アプリケーションの動作も同じでした。 :

そして記事が一覧から選択された時、その詳細ユーザコントロールが表示されます。 :

ブラウザとデスクトップバージョンでは表面上のスタイルに違いが少しあります。これは主にWPFがデフォルトでユーザが現在選択しているOSのテーマに基づいたデフォルトのスタイル(フォント、色、スクロールバーなど)を継承しており、Silverlightの場合は全てのOSに対して使用するデフォルトのテーマを持っているからです。もしデスクトップバージョンとブラウザバージョンを全く同じにしたい場合、スタイルとコントロールテンプレートをもっと明確にすることでできると思います。そうしなければ、デスクトップバージョンは微妙にユーザのOSテーマに基づいて適用されます。

まとめ

今後、SilverlightやWPFプロジェクトに渡ってコードを共有するために、より詳細な事柄と最善の実現方法に対する推奨ガイダンスをお伝えしていきたいと思っています。恐らく、Silverlightアプリケーションを構築した時に習得されたスキルや知識が、フルのWPFプロジェクトへ上手く移行できることをお分かり頂けると思います。また、非常に高い互換性のハードルを越えるために努力しており、実現するとソリューションを超えていいコードが再利用でき、コントロール、コンテンツ、コードが簡単に共有、最適化できるようになります。

Hope this helps,

Scott

ScottGu's blog translated by Chica @ Wankuma 

※本翻訳に関しまして、Scottさんにはご了承頂いております。