アーカイブ

2009年3月のアーカイブ

Silverlight Toolkitの設計時の特徴：2009年3月リリースの最新情報

2009年3月19日 2コメント

はじめに

2009年3月リリースのSilverlightのツールキットは、新機能と改善点がたくさんあります。 中でも、設計時の機能の更新：

  • Visual Studioと箱から出してブレンドとの緊密な統合を提供する新しいMSIベースのインストーラは、このようにはるかに容易にToolkitを使用して、Silverlightの開発を行う。
  • Visual Studio 2008とBlend 2でのSilverlight 2の開発、およびVisual Studio 2008とブレンド3 Silverlight 3の開発の両方をサポートします。
  • 6つの新しいコントロール（たとえば、デザイン時の機能を追加するアコーディオン 、 DomainUpDownで 、 LayoutTransformer 、 TimePicker 、 TimeUpDown 、 TransitioningContentControl ）;
  • レバレッジブレンド3の新しい設計時の拡張性フレームワーク（とすぐにVisual Studio 2010で）、特にBlend 3のはるかに優れた設計経験を提供するために、デフォルトのintializers、AlternateContentPropertyAttribute、カスタムエディタのように、既存のコントロールのデザイン時の機能を向上させます。

このポストは私の前のポストのためのアップデートです。 Silverlightツールキットのデザイン時機能 。

Visual Studio 2008とBlend 2でのSilverlight 2の開発

セットアップ

http://silverlight.net/GetStarted/

  • その後、手順4に従っSilverlight Toolkitの CodePlexのページを、リンク"最新リリースをダウンロード"をクリックします。

http://www.codeplex.com/Silverlight

  • "Silverlight 2のツールキット2009年3月インストーラ"のリンクをクリックすると、msiファイルを実行します（また、コンピュータにmsiファイルを保存し、後でそれを実行することができます）

http://silverlight.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=20430

インストーラが完了したら、Silverlight 2のツールキットがコンピュータにインストールされて表示されます。

C:Program FilesMicrosoft SDKsSilverlightv2.0ToolkitMarch 2009LibrariesDesign

ご注意：

  • 名前空間（CLRおよびxmlns接頭辞の両方）およびこのリリースでは、System.Windows.Controlsに、以前のリリースでMicrosoft.Windows.Controlsからアセンブリ名の変更があります。 参照してください。 ショーンバークのポストSilverlight Toolkitの2009年3月リリースの変更のためのよい説明とSilverlight Toolkitと開発のためのその意味を。
  • Controls.Layout、アコーディオン、LayoutTransfer、とTransitioningContentControlsが含まれていました。以前のリリースでは既存の4つのツールキットのアセンブリ（コントロール、Controls.Input、Control.DataVisualization、とControls.Theming）に加えて、このリリースで追加された新しいアセンブリが​​あります。
  • （expression.design設計、およびvisualstudio.design。）は、各実行時のアセンブリの3つのデザイン時のアセンブリが​​あり、すべてのデザイン時のアセンブリには、デザインのサブフォルダに格納されています。我々はまだ、デザイン時のアセンブリに同じ規則に従います。

Docsのような、すべてのツールに関連する情報への容易なアクセスを提供する新しいMicrosoft Silverlight 2のツールキット2009年3月のスタートメニュー項目のグループもあり、ローカルコンピュータ上のサンプル、ソースコード、およびSilverlight ToolkitのフォーラムやCodePlexのページ、ウェブ上で：

Microsoft Silverlight 2 Toolkit March 2009 Start Menu item

ウォークスルー

Silverlight Toolkitのためのデザイン時の機能を実証するためにBlendでチャートコントロールを作成する方法についてのチュートリアルを使用してみましょう：

  • Blendで新しいSilverlight 2アプリケーションプロジェクトを作成します。

New Project Dialog

  • （ここでは、すべてのツールキットのアセンブリを追加するだけSystem.Windows.Controls.DataVisualization.Toolkit.dllは、このチュートリアルに必要とされる）：キットのアセンブリへの参照を追加します

Add Reference to Toolkit Assemblies

  • [アセットライブラリ]を開き、[カスタムコントロール]タブをクリックして、ダブルChartコントロールをクリックします。

Toolkit Controls in Asset Library

  • デザインサーフェイスにChartコントロールを追加し、[プロパティ]パネルで、データの可視化カテゴリの下にそのTitleプロパティを設定します。

Infotip, custom category, and custom editor

  • [共通プロパティ]の下のDataContextプロパティの横にある[新規作成]ボタンをクリックし、[オブジェクトの選択]ダイアログからPointCollectionを選択し、[OK]をクリックします。

Create DataContext

  • XAMLエディタで、表示するには、Chartコントロールのいくつかのデータを提供するために、下のスクリーンショットでハイライトされているようなように、生成されたXAML "<PointCollection />"を置き換えます。

Edit DataContext

  • ：共通プロパティ]カテゴリの下のプロパティは、Seriesコレクションエディター]ダイアログボックスで "別のアイテムを追加"ボタンをクリックし、[OK]をクリックし[オブジェクトの選択]ダイアログで、ColumnSeriesがを選択し、 "シリーズ（コレクション）"の横にある...ボタンをクリックしてください

Create Series

  • バックシリーズのコレクションエディタ]ダイアログに、右側の[プロパティ]ペインで、新しく作成されたColumnSeriesがためのプロパティを設定します。
    • 両方の共通プロパティ]カテゴリで、YにXとIndependentValuePathにDependeptValuePathを設定します。
      Series Collection Editor
    • ItemsSourceプロパティの右にある矩形をクリックし、データバインディングを...]を選択し、コンテキストメニューをポップアップから：
      Databinding for ItemsSource
    • [データバインドの作成]ダイアログの[フィールド]リストボックス内の唯一の項目で、PointCollection（配列）の項目を選択し、[完了]ボタンをクリックします。
      Create Data Binding Dialog
    • バックシリーズのコレクションエディタ]ダイアログに、再度、ItemsSourceプロパティを気づく今では現在変更されたデータバインディングの値を持つことを示す、黄色の矩形で囲まれています。 Seriesコレクションエディター]ダイアログボックスを閉じます[OK]をクリックします。
      Series Collection Editor
  • 我々は、メインウィンドウをブレンドして戻ってきて、ほら、私たちはデザインビューでうまくレンダリングされたChartコントロールを持っている：

Yes!

私たちは、ビルドおよび実行プロジェクトをBlendから、またはXAMLとコードの編集を続行するにはVisual Studioでプロジェクトを開くには、F5キーを打つことができます。 Visual Studioのツールボックスは、Toolkitのコントロールを使用して自動入力であることをスクリーンショット以下に注意してください。

Visual Studio

Visual Studio 2008とブレンド3 Silverlight 3の開発

セットアップ

開始する前に、上の重要な開発者ノートを読んでくださいhttp://silverlight.net/getstarted/silverlight3/default.aspx＃ツール慎重に（あまりにも下のスクリーンショットで）。

インストーラが終了したら、あなたは、Silverlight 3のベータ版SDKとツールキットがコンピュータにインストールされて表示されます。

  • SDK：

Silverlight 3 SDK: C:Program FilesMicrosoft SDKsSilverlightv3.0LibrariesClientDesign

  • ツールキット：

Silverlight 3 Toolkit: C:Program FilesMicrosoft SDKsSilverlightv3.0ToolkitMarch 2009Libraries

すべてのツールキットの情報に簡単にアクセスできると、Microsoft Silverlight 3のツールキット2009年3月のスタートメニュー項目のグループ：

image

ウォークスルー

今Chartコントロールを作成するチュートリアルが、Blend 3のこの時間同じことをみましょう：

  • [スタート]メニューからMicrosoft Expression Blend 3のプレビューを開始し、新しいSilverlight 3アプリケーション+ウェブサイトプロジェクトを作成します。

Blend 3 New Project Dialog

  • [アセットライブラリ]をクリックし、[コントロール]タブがDockPanelのようなツールであることが使用されている、パンダ、TreeViewコントロールなどBlend 3の非同期アセットライブラリを移入するなど、Silverlight 3ランタイムとSDKのコントロールが事前に移入さに気づくので、いくつかすることがあります[コントロール]タブが完全に読み込まれる前に秒遅らせます。

Asset Library, Controls Tab

  • それはToolkitのコントロールを使用してあらかじめ設定されて気付く、[カスタムコントロール]タブをクリックします。

Asset Library, Custom Controls tab

  • Chartコントロールをダブルクリックし、クリックして、デザインサーフェイスにドラッグすると、ほら、チャートコントロールは、いくつかのサンプルデータで初期化、作成され、きれいにレンダリングされます。 我々は同じ結果を作成するためにBlend 2のロット手動手順を経る必要がありました。

Chart Default Initializer

上記スクリーンショットに注意してください。

  • 右側のプロジェクトパネルで、System.Windows.Controls.DavaVisualization.Toolkit.dllへの参照が自動的に追加されます。
  • XAMLエディタでは、xmlns：chartingToolkit定義が自動的に追加されます。
  • また、Chartコントロールのカスタムアイコン（オブジェクトとタイムライン]ペインと[プロパティ]ペインの両方で）、Chartコントロールの初期XAMLを生成するデフォルトの初期化子と同じように、いくつかのBlend 3の新機能に注目してください。

Chartコントロールは、そう簡単には作成されているため、Blend 3のチュートリアルでは、もう少しの操作を行いますみましょう。

  • 右側の[プロパティ]タブをクリックし、左側の[オブジェクトとタイムライン]ペインにChartコントロールを展開します。

Chart: AlternateContentPropertyAttribute 上記スクリーンショットに注意してください。

  • [プロパティ]パネルで、右に小さな白いドットがチャートコントロールの既定の初期化子によって初期化されたプロパティを強調表示します。
  • [オブジェクトとタイムライン]パネルで、ColumnSeriesがオブジェクトの下にLegendItemsとグラフオブジェクトの下に、Axesのプロパティ、およびIndependentAxisとDependentRangeAxisプロパティがあります。 それらは代替コンテンツプロパティと呼ばれます。 オブジェクト階層でそれらを表示すると、設計時にこれらのプロパティに簡単にアクセスできます。 たとえば、我々は、AxesプロパティにLinearAxisをドラッグアンドドロップすることができます。

AlternateContentProperty

AlternateContentProperty

したがって、同じブレンド3とBlend 2のグラフコントロールを作成するチュートリアル比較して、我々は、Blend 3のはるかに優れたデザイナーを見たり、Blend 3の私たちのデザイン時のアセンブリは、既定の初期化子と同じように、新しいデザインタイム拡張機能の多くを活用しています大幅Toolkitのコントロールのデザインの経験を向上させるために代替コンテンツプロパティ。

現在Visual Studioでプロジェクトを開きます。

Visual Studio Design Experience

ていることに注意してください。

  • 左側のツールボックスには、SDKとツールキットのコントロールが事前に移入されます。
  • 下部の出力ウィンドウには、右に関する設計アセンブリの読み込みに失敗しましたエラーメッセージを表示します。 安全にそれを無視してください。

Visual Studio 2008でのデザイン経験（Silverlight 2と3の両方）

Visual Studioのツールキットの設計経験がかなりSilverlight 2とSilverlight 3のどちらの場合も同じですので、我々は2つ​​のチュートリアル上記のいずれかから次のことを続けることができます。 便宜上、私たちはすぐに上記のSilverlight 3のチュートリアルから続行されます。

今XAMLエディタのツールボックスから、Accordionコントロールをドラッグアンドドロップします。

Visual Studio Design Experience

我々はそれを見ることができます：

  • XAMLエディタで、
    • 自動的に追加されます。
    • <layoutToolkit:Accordion> </ layoutToolkit：アコーディオン>自動的に追加されます。
  • ソリューションエクスプローラで
    • System.Windows.Controls.Layout.Toolkitアセンブリ、およびそれが依存つのアセンブリ、ツールキットおよびSDKのSystem.Windows.ControlsでSystem.windows.Controls.Toolkitへの参照がプロジェクトに自動的に追加されます

今すぐツールボックスからXAMLエディタにいくつかのコントロールをドラッグアンドドロップします。

Visual Studio Design Experience

その上のスクリーンショットに注意してください：

  • XAMLエディタで、
    • 我々は、ドラッグ·アンド·アコーディオンにカレンダー、AutoCompleteBoxとNumericUpDownを落としていることがわかります
    • 適切なxmlnsの定義とXAMLコードが自動的に追加されます
  • プレビューウィンドウで
    • 我々はXAMLエディタで編集すると、XAMLのコードが適切にレンダリングされます
  • コー​​ドエディタで
    • インテリセンスやヒントで気付く
    • 我々は、文を終える前に、私たちは、XAMLまたはコードエディタで入力すると安全にエラーウィンドウにエラーを無視
  • ソリューションエクスプローラで。
    • 必要なアセンブリへの参照が自動的に追加されます

F5キーを押して、それは罰金を構築し、実行します。

Visual Studio Design Experience

クレジット

私はそれのほとんどを実装して以来、私は確かに、あなたは設計の経験の改善に興奮している期待 :-) ジェフ·コックスは、インストーラを実装し、 ジャスティン·エンジェルは 、設計時の経験とインストーラの両方の仕様を書いた。 私の他の同僚の多くは特に、あまりにデザインの経験に貢献したRJボエーク 、 ジャファル·フサインと、 デヴィッド·アンソン 。 特にBlendとサイダーチームの人々に感謝し、 ウンニRavindranathan 、ゲイリーLinscott、ピーター·ブロワ、ブライアン·ピピン、エリック·フィスク。 それらがなければ、設計経験の改善のいずれも可能ではないでしょう。 とにショーンバーク 、設計時の機能、および主要なハード技術的な問題の解決に深く関与彼の支援と強調。

私は2009年3月には設計時に実装アップデートにポストフォローアップリリースを書き込みます。 お楽しみに！

Tags: , , , , , , カテゴリー： デザインタイム 、 Silverlightの タグ： 、 、 、 、 、 、