Ningの張のブログ

導入

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

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

BlendはVisual Studioの機能の多くを複製し、それを素晴らしい統合しています。 これは非常に（または一般的なもをお勧めします、私が言う必要があります）データ圧縮/ Silverlightプロジェクトの両方をブレンドし、Visual Studioで開いているため、XAMLのオーサリングおよびVisual StudioのC（または、コーディング＃のブレンドを使用しているものを好む言語）、のいずれかを使用プロジェクト管理、またはその両方のために。

プロジェクトは、Blendで管理に非常にVisual Studioで同様のメニューを介して、プロジェクトパネルと結果パネルです：

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

UIをオーサリング

UIの作成は主に3つのパネルを介して行われます：

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

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

ドキュメントパネル

文書のパネルタブウィンドウで、開いている各xamlファイルの1つのタブです。 これは、デザインビューと、各ファイルのXAML表示しています。

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

プロパティパネル

[プロパティ]パネルには、2つのビューを：プロパティとイベント、2つのボタンでパネルの右上隅に表示しています。

• プロパティビューで：
  
  • 選択された要素のプロパティはカテゴリに、レイアウトのようにグループ化され、共通プロパティ;
  • プロパティは、通常、上記のスクリーンショットのようなコンテンツプロパティのツールチップが参考になったチップを持って。
  • プロパティは、通常は）ユーザの値を選択、上記のスクリーンショットHorizontalAlignmentプロパティの値のようにするために、4つのボタンをクリックして設定することができますが、代わりに"センター"のXAMLのように値を入力するのインライン/拡張/ダイアログエディタ（sがありますビューに直接;
  • あなたは、プロパティ（デフォルトの値をとりますそれはもはやそう）、上のスクリーンショットの配置プロパティのような権利を白になるに小さな広場値を与える場合はtrue。
  • することができますをクリックして下向きの矢印（これが"地図を表示するほとんどの項目で"ツールチップ）そのカテゴリの複数のプロパティを表示するプロパティを高度;
  • あなたはすぐに検索ボックスのプロパティの上部パネルで、名前の一部を入力してプロパティを見つけることができます：
    
• イベントビューで：
  
  • イベントを入力できますイベントハンドラの名前をブレンドVisual Studioでプロジェクトを開き、ファイルの背後にあるコードでイベントハンドラのプロトタイプ実装：

  

アニメーションの作成

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

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

1. は、最初のkeytime黄色のラインをドラッグして、キーフレームを作成し、クリックして"レコードキーフレーム"緑のプラスボタン;
2. keytimeのように、UIをオーサリング部上記のUI要素のプロパティを編集する。
3. 繰り返し手順1と2の各キーフレームの。

我々は次のスクリーンショットでわかるように：

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

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

• KeyTimeは、"00:00:01"
• ターゲットオブジェクトは、ボタンは、ターゲットパスが約RenderTransform.ScaleTransform.ScaleXです
• 値が"2"
• KeySplineは"0.5,0.1,0.5,0.9"

下のスクリーンショットのように私たちがすることもできます微調整と同じ方法でストーリーボードのプロパティを、：

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

これは、XAMLコードブレンド単純なアニメーション、上記の生成：

 AutoReverse ="True" RepeatBehavior ="Forever" x:Name ="Storyboard1" > < DoubleAnimationUsingKeyFrames BeginTime ="00:00:00" Storyboard . TargetName ="button" Storyboard . TargetProperty ="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" > < SplineDoubleKeyFrame KeySpline ="0.495999991893768,0.104000002145767,0.5,0.898999989032745" KeyTime ="00:00:01" Value ="2" /> </ DoubleAnimationUsingKeyFrames > < DoubleAnimationUsingKeyFrames BeginTime ="00:00:00" Storyboard . TargetName ="button" Storyboard . TargetProperty ="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" > < SplineDoubleKeyFrame KeyTime ="00:00:01" Value ="2" /> </ DoubleAnimationUsingKeyFrames > </ Storyboard > < ストーリーは = オートリバース "真の"RepeatBehavior ="永遠に"x： 名 ="Storyboard1"> <DoubleAnimationUsingKeyFrames BeginTime ="00:00:00" ストーリーボード 。 ターゲット名 ="ボタン" ストーリーボード。TargetProperty ="（UIElement.RenderTransform）（ TransformGroup.Children）[0]（ScaleTransform.ScaleX）"> <SplineDoubleKeyFrame の KeySpline ="0.495999991893768,0.104000002145767,0.5,0.898999989032745"KeyTime ="00:00:01" の値 ="2"は/> </ DoubleAnimationUsingKeyFrames DoubleAnimationUsingKeyFramesを > < BeginTime ="00:00:00" ストーリーボード 。 ターゲット名 ="ボタン" ストーリーボード。TargetProperty ="（UIElement.RenderTransform）（TransformGroup.Children）[0]（ScaleTransform.ScaleY）"> <SplineDoubleKeyFrame KeyTime ="00：午後12時01分" 値 ="2"/ ストーリーボード > /> </ DoubleAnimationUsingKeyFrames> < 

明らかにそれは多くの著者アニメーションにブレンドではなく、手動でXAMLを書くのが簡単です。

テンプレートの作成

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

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

• デフォルトでは、オブジェクトとタイムラインパネル内のコンポーネントのテンプレート
• 視覚的な状態のグループ、視覚的な状態との相互作用パネルの遷移
• プロパティパネル]の[テンプレートのプロパティをコンポーネント。 オレンジ色の背景プロパティの右側に広場がバインドされてテンプレートを示します。

ドリルはさらにで：障害者の視覚の状態を選択して、我々が無効になってアートボードのビジュアルは0％から55％に0秒でDisabledVisualElementのOpacityプロパティをアニメーション化する視覚的な状態遷移ストーリーによって生成さ見ることができます：

そのオブジェクトとタイムラインパネルの上部には、代わりにストーリーボード、ブレンドは、状態記録モードでであることを示す障害の状態を示していますのでご注意ください。

今のデフォルトのテンプレートのビジュアル状態遷移にフォーカスを変更してボタンをそれが注目されスキューにいくつかの変更を加えるてみましょう：

• ）の相互作用パネル、矢印をクリックプラスアイコンを、右、これらのオプションは、視覚的な状態遷移し、この状態からの3つのオプション（のいずれかを選択し、特定の2つの状態の間に視覚的な状態のグループで焦点の視覚の状態を選択します。
• Blendは視覚的な状態モードで記録している：焦点は、選択された視覚的な状態です。
• 新しいスキュートップグリッドの作成アニメーションのセクションで説明したように変換します。 注意アートボードのボタンは、現在集計されます。 WYSIWYGのアートボードは、アニメーションのオーサリング簡単かつ直感的です。
• 我々はそれを必要としないので、パネルをオブジェクト内のコンポーネントをテンプレートFocusVisualElementを削除以上。 通知は、チップ上を示すブレンドでも自動的にFocusVisualElementを示して視覚的な状態遷移を削除します。

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

かつて我々はテンプレートを持って、私たちのスタイルのターゲットタイプ（またはそのサブタイプのUI要素）に適用することができます：

スタイルの作成

スタイルは、通常は直接オブジェクトにプロパティを設定するよりも優れている、スタイルが再利用されることができるので、維持するためにeasy are、Using andコンテンツからseparate presentation（UIはの要素）に役立つ。 スタイルのオーサリングと同様に、上記の議論を除いて、オーサリングも簡単ですテンプレートです。 あなたがスタイルをオーサリングモード入力するオブジェクトを - >スタイルの編集]メニューの[使用する必要があります。 そこのスタイルを以下の発見のオーサリングになります、コンテキストメニューが、です。

作成を選択します空の...メニュー項目、およびスタイルの作成リソースのダイアログがポップアップし、あなたは、nameと新しいスタイルのリソースのlocationを指定することができます：

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

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

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

リソース管理

絵コンテ、スタイル、上記の作成テンプレートのすべてのリソースです。 我々は、リソースを管理するリソースパネルを使用することができます：

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

結論

要約すると、ブレンドは、UIのオーサリング簡単かつ直感的に：

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

建物は直感的なUIのオーサリングの上に、ブレンドアニメーションをタイムラインモードを記録導入することで、オーサリング簡素化：

• ストーリーは、常にフレームのコレクションですので、ブレンドは、常にXXXAnimationUsingKeyFramesを使用します。
• Blendは間接的にユーザがkeytimesで直感的なUIを介してインターフェイスを作成UI要素のプロパティを設定することによってフレームを生成します。
• ブレンドは、常にすべての4つの以下のように、そのキーの生成の制服を作成する変換を生成変換：

    > <に> Button.RenderTransform
       > <に> TransformGroup
           /> <ScaleTransformを />
           /> <SkewTransform />
           /> <RotateTransform />
           /> <TranslateTransform />
       > <は/>を TransformGroup
   > </ Button.RenderTransform> 

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

スタイルのオーサリングも簡単です：スタイルは、プロパティのセッターだけを集めたものです。 Blendはスタイルの正規のUIオーサリングとスタイルのオーサリングを区別するモードをオーサリングを発表しました。

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