寧Zhangさんのブログ

はじめ

XAMLは、WPFの主要な発明であり、XMAL"プログラミングは、"WPF / Silverlightの開発の重要な部分です。 XAMLはXMLであるため、手動でオーサリングすることができるにもかかわらず、それはほとんどのツールのために設計されているので、良好なオーサリングツールは、C＃やHTMLなど、他の言語に比べてXAMLの方が重要です。 XAMLへのブレンドは、Visual StudioがC＃には何かということです。 ジェシーリバティのようなブレンドのための多くの良いチュートリアルやドキュメントがあります開発者のためのExpression Blendには、 。 この記事は、Visual Studioまたはメモ帳で主にオーサリングXAMLであり、その彼らが興味があると使用して開始する方法を知っている開発者のためにブレンドの簡単な概要とチュートリアルの提供を目指す、より多くの"15分でブレンドはこちら"のようなものですブレンド。

プロジェクトマネジメント

ブレンドの重複は、Visual Studioの機能の多くとは、それとの素晴らしい統合されています。 それは（またはお好みの言語）、コーディング、およびいずれかを使用してC＃のためにXAMLオーサリングとVisual Studioのためにブレンドを使用して、BlendとVisual Studioの両方でオープンWPF / Silverlightのプロジェクトを持っている（あるいは推奨、私が言うべきである）非常に一般的です。またはプロジェクト管理のための両方。

Blendで管理するプロジェクト]メニューの[プロジェクトのパネルと結果パネルを経由して、Visual Studioのそれと非常に似ています。

• メニュー ：ファイル、編集、 ​​プロジェクトおよび[ヘルプ]メニューは、Visual Studioによく似ています。 これらのメニューを介して、項目/参照などを追加し、WPF / Silverlightプロジェクトを開く/作成することができます、とだけでも、Visual Studioのように、ソリューションをビルドして実行。
  
• プロジェクトパネル ：それは、Visual Studioのソリューションエクスプローラによく似ています。 あなたは右側のプロジェクトパネル内の任意の.xaml / .csファイルをクリックし、"Visual Studioで編集"を選択し、プロジェクトと選択したファイルが編集用にVisual Studioで開いているとされます。
  
• 結果パネル ：[出力]タブと[エラー]タブ、[出力]ウィンドウとVisual Studioの[エラー一覧]ウィンドウに似ています。

UIオーサリング

UIオーサリングは3つのパネルを経由して主に行われます。

[オブジェクトとタイムライン]パネル

オブジェクトパネルでは、論理的なツリー構造が非常に明確です。 それは、拡大/折りたたみ/ツリー内の要素を選択することにより、論理ツリーをナビゲートする、またはツリーに沿って要素をドラッグアンドドロップして、ツリーを再構築するのは簡単です。 選択された要素は、オブジェクトパネルで、デザインビューとドキュメントのパネルのXAMLビューの両方で強調表示され、プロパティパネルは、選択した要素のプロパティとイベントが表示されます。 黄色の枠（上のスクリーンショットでのLayoutRoot）を持つ内部ノードは、現在のデフォルトのコンテナです。

ドキュメントパネル

文書パネルが開いている各XAMLファイルに対して1つのタブで、タブ付きウィンドウです。 それは、デザインビューと、各ファイルのXAMLビューがあります。

• あなたが開いている文書または文書を閉じる（上のスクリーンショットで複数のタブ、1つのファイルのみにPage.xamlが開いている。以来）の間で切り替えるために、ドキュメントウィンドウの上部にあるタブを使用することができます。
• あなたは、デザインビューの中でXAMLビュー、または選択した文書の分割ビューを切り替えることができます。 また、ツールで既定のドキュメントのビューを設定することができます - >オプション - >ドキュメント：
  
• 選択した要素の論理ツリーのパスを表示するデザインビュー（また、アートボードと呼ばれる）の上部にあるブレッドクラムコントロールがあります。 これは、オブジェクトパネルの他に論理ツリーをナビゲートする、そして我々はすぐに見るようにオーサリングモードを切り替えるために別の方法です。
• 次のようにしてデザインビューをズームできます
  • ツールボックスからズームアイコンを選択し、クリックまたはaltがアートボードをクリックしてください。
  • 右のアートボード下のズームのコンボボックスを使用します。
  • [表示]メニュー項目またはそれらのショートカットキーを使用します。
• デザインビューでは、ブレンドのウィンドウの左の境界線に沿ってツールボックスまたはアセットライブラリから要素をドラッグアンドドロップできるWYSIWYGデザイナ、次のとおりです。
  
• XAMLビューには、直接XAMLのオーサリングが可能になります。 それはまだIntelliSenseを持っていませんが、あなたがタイプしながらエラーを修正するには、以下の[結果]パネルで、デザインビューとエラー]タブを使用することができます。

[プロパティ]パネル

プロパティとイベント、パネルの右上隅にある二つのボタンで示される：[プロパティ]パネルには、2つのビューがあります。

• プロパティビューで：
  
  • 選択した要素のプロパティは、レイアウト、共通プロパティと同様に、カテゴリに分類されます。
  • プロパティは、通常、上のスクリーンショットのContentプロパティのツールチップのような、有用なツールチップを持っている。
  • 上のスクリーンショットでプロパティをHorizo​​ntalAlignmentをの値をXAMLで"センター"のような値で4つのボタンのいずれかをクリックすると、代わりに入力することで設定できるようにプロパティには、通常、ユーザーが値を選択できるように拡張された/インライン/ダイアログエディタ（s）を持っている直接表示;
  • もしプロパティ値を（それはもはやデフォルトの値をとらないように）を与えると、その右側にある小さな広場には、上のスクリーンショットの整列のプロパティと同様に、白になります。
  • そのカテゴリの多くのプロパティを表示するために、ほとんどのカテゴリーで（ツールチップの"拡張プロパティを表示"している）にある下向きの矢印をクリックすることができます。
  • あなたは、プロパティパネルの上部にある検索ボックスにその名前の一部を入力してすぐにプロパティを見つけることができます。
    
• イベントビューで：
  
  • このイベントのイベントハンドラの名前を入力すると、ブレンドは分離コードファイル内のイベントハンドラのプロトタイプ実装と、Visual Studioでプロジェクトを開きます。

  

アニメーションオーサリング

アニメーションを作成するには、[オブジェクトとタイムライン]パネルでプラス記号をクリックし、"作成ストーリーボードのリソース"ダイアログでは、新しいストーリーボードの名前を尋ねるポップアップ表示されます：

ブレンドは、タイムライン記録モードに入ります。 ボタンのサイズを倍増させるアニメーションを作成してみましょう。 アニメーションを作成するための重要なステップ：

1. 第一KeyTimeにするには、黄色のタイムラインをドラッグし、"レコードキーフレームの"緑色のプラスボタンをクリックして、キーフレームを作成します。
2. 上記のようにUIオーサリングセクションで説明したKeyTimeでのUI要素のプロパティを編集します。
3. 各キーフレームのための手順1と2を繰り返します。

我々は、スクリーン下に見ることができますように。

• [オブジェクトとタイムライン]パネルで：
  • 編集中のタイムラインの名前：Storyboard1;
  • キーフレーム編集中：KeyTimeは、黄色のタイムラインで示される、1秒です。
  • オブジェクトパネル（ボタン、RenderTransform、スケール、ScaleXプロパティ、スクリーン下のscaleYプロパティ）とKeyTimeでのオブジェクトのタイムラインパネルのshowプロパティの変更のタイムラインに沿って白のドット内のノードの左側にある二重矢印のアイコン;
  • 我々は、タイムラインパネルの上部にある再生コントロールを使用するか、アニメーションを実行するには、黄色のタイムラインをドラッグすることができます。
• 文書パネルのアートボードに：
  • 赤い枠、赤い録音ボタン、および赤のラベルがすべての"タイムラインの記録がオンになって"ブレンドは、タイムライン記録モードになって示している。
  • あなたは、録音モードを停止し、UIオーサリングモードに切り替えるに赤い録音ボタンをクリックすることができます。
• [プロパティ]パネルで：
  • ターゲットプロパティの値：ScaleTransform.ScaleXなどが2に設定されています。

ブレンドはXXXAnimationUsingKeyFramesを使用し、各オブジェクト/プロパティ/キーフレームのトリオのための1つのキーフレームを生成します。 我々は、オブジェクトパネルで、それを最初に選択することで、それ自体のキーフレームのプロパティを微調整して、下のスクリーンショットのように、プロパティパネルでプロパティを設定できます。

• KeyTimeは、"午後12時00分01秒"です。
• ターゲットオブジェクトがボタンである、ターゲットパスは、ほぼRenderTransform.ScaleTransform.ScaleXです
• 値は"2"です。
• KeySplineのは"0.5,0.1,0.5,0.9"です。

我々はまた、微調整と同じ方法で、ストーリーボードのプロパティは、スクリーン下に好きできます。

• Storyboard1が選択されている
• オートリバースとて、RepeatBehaviorプロパティが変更されています

これは、上記の単純なアニメーション用に生成されたXAMLコードのブレンドです。

明らかにそれは手動でXAMLを記述するのではなく、Blendで著者のアニメーションにはるかに簡単です。

テンプレートの作成

WPF / Silverlightの美しさとパワーは、再テンプレートコントロールする機能です。 "エディットコントロールパーツ（テンプレート） - >テンプレートの編集"からメニュー項目を選択コンテ​​キストメニュー、[オブジェクトとタイムライン]パネルから、またはアートボードのブレッドクラムからどちらかを：それは、Blendでそれを行うため、比較的容易です。

"コピーの編集..."メニュー項目には、コントロールの既定のテンプレートを取得する簡単な方法です。 スクリーンショット以下では、我々は見ることができます。

• [オブジェクトとタイムライン]パネルで、デフォルトのテンプレートのコンポーネント
• [組み合わせ]パネルの表示状態のグループは、視覚的な状態、および遷移
• [プロパティ]パネルの[テンプレートのコンポーネントのプロパティ。 Backgroundプロパティの右側にオレンジ色の四角は、それがバインドされているテンプレートであることを示します。

さらにでドリル：障害者の視覚の状態を選択し、そして我々はアートボードで視覚無効2番目の0の0％から55％へとアニメーションDisabledVisualElementのOpacityプロパティをその視覚的な状態遷移のストーリーボードによって生成されていることがわかります。

オブジェクトとタイムラインパネルの上部付近に、それがブレンドの状態の記録モードになっていることを示す、ではなく、ストーリーボードの無効状態を示すことに注意してください。

今それがフォーカスされているときのがスキューボタンにフォーカス視覚的な状態遷移を変更することにより、デフォルトのテンプレートにいくつか変更を加えてみましょう：

• [組み合わせ]パネルのフォーカスビジュアル状態を選択し、その右側にある矢印のプラスアイコンをクリックし、次の3つのオプション（それらのオプションがこの状態にしてから、と視覚的な状態のグループ内の特定の2つの状態間の視覚的な状態遷移のためにある）のいずれかを選択します。
• ブレンドは、視覚的な状態の記録モードになっています。集中的に選択された視覚的な状態です。
• としてオーサリングアニメーションのセクションで説明した最上位のグリッドに新しい変換スキューを追加します。 アートボードでボタンは歪んでいることに注意してください。 WYSIWYGのアートボードは、アニメーションのオーサリングが簡単で直感的です。
• 我々はもうそれを必要としないので、オブジェクトパネルでFocusVisualElementテンプレートのコンポーネントを削除します。 も自動的にFocusVisualElementを示す視覚的な状態遷移を削除したブレンドを示す上部のツールチップに注目してください。

上記のカスタムテンプレートのXAMLに生成されたブレンドは102行、6179文字です！ 手でそのオーサリングの難しさを想像してみて！

我々はテンプレートができたら、私たちはスタイルのターゲットの型（またはそのサブタイプ）のUI要素に適用することができます。

スタイルの作成

スタイルを使用すると、通常は直接オブジェクトのプロパティを設定するよりも優れている、スタイルを再利用できるため、維持、およびコンテンツ（UI要素）とは別のプレゼンテーションを支援するのは簡単です。 それははるかに簡単であることを除いて、スタイルのオーサリングは、上記で説明したテンプレートのオーサリングと似ています。 スタイルのオーサリングモードに入ります>スタイルの編集]メニュー - [オブジェクトを使用する必要があります。 スタイルのオーサリングは見つけにくいせるそれのためのコンテキストメニューは、ありません。

空の作成...]メニュー項目を選択し、作成するスタイルリソースのダイアログがポップアップ表示される、新しいスタイルのリソースの名前と場所を指定することができます。

その後ブレンドは、スタイルオーサリングモードに入ります。

• [オブジェクトとタイムライン]パネルでは、強調表示されたスタイル要素の代わりに、UIの論理ツリーが表示されます。
• アートボードの上にブレッドクラムはまた、我々は、パレットのアイコンの付いたオーサリングのLayoutRootのスタイルであることを示す。
• ブラシエディタを経由して背景を設定することにより、スタイルに何かを追加してみましょう、アートボードは、即座に変更が反映さに気付く。
• 文書パネルのXAMLビューには、スタイルのオーサリング用に生成される単純なXAMLを示しています。

かつて我々のスタイルリソースを持って、それを適用するのは簡単です：単にオブジェクトと使用するオブジェクトを選択 - >編集のスタイル - >リソースのメニュー項目を適用する。

リソースの管理

ストーリーボード、上記の執筆スタイルとテンプレートはすべてのリソースです。 我々は、リソースを管理するためのリソースパネルを使用することができます。

• 我々は、編集されているapp.xaml（グローバルリソース）と現在のXAMLファイルPage.xamlの両方ですべてのリソース（ローカルリソース）を見ることができます。
  • アニメーションのオーサリングセクションで作成Storyboard1が表示されない理由がわからない。 バグやユーザーエラーをブレンド？
• 我々は、そのコンテキストメニューからリソースを編集したり、リソースのボタンを編集することができます。
  
  
• 我々はまた、app.xamlとPage.xamlの間の移動のような場所（および可視性）、、または[ユーザーコントロール]とボタンを変更するには、ツリーに沿ってリソースをドラッグアンドドロップできます。

結論

要約すると、ブレンドはUIオーサリングが簡単で直感的。

• ツールボックス（および資産ライブラリ）とアートボードは、WYSIWYG UIオーサリングが可能になります。
• オブジェクトパネルでは、論理ツリー内のすべてのUI要素を整理するのに役立ちます。
• プロパティパネルには、エディタによるプロパティの設定が簡素化されます。

直感的なUIオーサリングの上に構築し、ブレンドは、タイムラインの記録モードを導入することにより、アニメーションの作成を簡略化します。

• ブレンドは常にXXXAnimationUsingKeyFramesを使用して、ストーリーボードは、常にキーフレームのコレクションとなることから、
• ブレンドは、その直感的なUIオーサリングインターフェースを介してkeytimesの時のユーザーセットのUI要素のプロパティをさせることで間接的にキーフレームを生成します。
• ブレンドは、常に変換のためにそのキーフレームの生成を均一にするために、以下のような4つのすべてのトランスフォームを生成します。

そのUIとアニメーションのオーサリングの上、ブレンドは、テンプレートのオーサリングモードと状態の記録モードを導入することにより、テンプレートの作成を簡略化します。 テンプレートは、テンプレートパーツと視覚的な状態で構成されています。 テンプレートパーツは、UI要素の単なる論理的なツリーで、視覚的な状態遷移は絵コンテです。

スタイルのオーサリングはさらに簡単です：スタイルは、プロパティのセッターのコレクションです。 ブレンドは、通常のUIオーサリングとスタイルのオーサリングを区別するスタイルのオーサリングモードが導入されています。

ので、ブレンドは、偉大なXAMLのオーサリングツールです。 それは設計者のためだけではなく、また、開発者に大きな生産性の向上を与えることができます。 うまくいけば、この記事はあなたのブレンドの良い概要を説明し、積極的に、ブレンドを探求することに始める ）。 ありがとう！