Blend for Visual Studio を使用して UI を作成する

Blend for Visual Studio は、XAML ベースの Windows デスクトップ アプリ、Web アプリ、Windows Phone アプリ、Windows Store アプリの設計を支援します。 Visual Studio と同じ基本的な XAML デザイン環境を提供しているほか、アニメーションやビヘイビアーなどの高度なタスクを視覚的にデザインする機能が追加されています。

Blend for Visual Studio は Visual Studio に含まれているので、ダウンロードする必要はありません。 ただし、Visual Studio インストーラーで選択し、システムにインストールする必要があります。

Blend for Visual Studio を初めてご使用になる場合は、このワークスペース特有の機能に慣れるために少し時間を取ってください。 このトピックでは、短いツアーにお連れします。

注意

アートボード、[ドキュメント アウトライン] ウィンドウ、[デバイス] ウィンドウなどの共有デザイン機能のツアーについては、「XAML デザイナーを使用した UI の作成」を参照してください。

このトピックの内容:

[ツール] パネルのツアー

Blend for Visual Studio の [ツール] パネルは、アプリケーションのオブジェクトの作成と変更に使用します。 パネルにあるツールを選択してアートボード上でマウスを動かすと、オブジェクトを描画できます。

[ツール] パネル

選択ツール オブジェクトとパスを選択します。

個別選択ツールを使用すると、入れ子状のオブジェクトやパス セグメントを選択できます。
吹き出し A グラデーション ツールとブラシ ツール
表示ツール 手のひらツールでの移動、ズームなど、アートボードの表示の調整を行います。 吹き出し B パス ツール
ブラシ ツール ブラシの変換や、オブジェクトのペイントを行ったり、あるオブジェクトの属性を選択して別のオブジェクトに適用するなど、オブジェクトの表示属性を操作します。 吹き出し C シェイプ ツール
オブジェクト ツール パス、図形、レイアウト パネル、テキスト、コントロールなど、よく使用するオブジェクトをアートボード上で描画します。 吹き出し D レイアウト パネル
アセット ツール [アセット] パネルにアクセスし、ライブラリから最近使用したアセットを表示します。 吹き出し E テキスト コントロール
吹き出し F コモン コントロール

短いビデオを見る: インストール済みフィーチャーの構成 ツール バー

[アセット] パネルのツアー

[アセット] パネルには、すべてのコントロールが用意されています (Visual Studio の [ツールボックス] に似ています)。 また、コントロールのほかに、スタイル、メディア、ビヘイビアー、効果など、アートボードに追加できるすべてのものが [アセット] パネルに用意されています。

[アセット] パネル

[検索] ボックス [検索] ボックスに入力することにより、アセットの一覧を絞り込みます。
グリッド モードとリスト モード アセットの表示モードを、グリッド モードまたはリスト モードに切り替えます。
アセットのカテゴリ カテゴリまたはサブカテゴリをクリックすると、そのカテゴリに属するアセットが表示されます。
スタイル リソース ディクショナリに含まれるすべてのスタイルを表示します。
説明 選択したカテゴリまたはサブカテゴリの説明が表示されます。

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

このパネルを使用すると、アートボード上のオブジェクトを整理して、必要な場合はアニメーション化できます。

アニメーション モードの [オブジェクトとタイムライン] パネル

オブジェクト ビュー ドキュメントをツリー表示します。 さまざまなレベルの詳細にドリル ダウンできます。 さらに、アートボード上のオブジェクトを整理するレイヤーを追加することもできます。 そのように、グループとしてロックし、非表示にすることができます。
記録モード インジケーター タイムラインでプロパティの変更を記録中かどうかを表示します。
ストーリーボードの一覧 作成済みのストーリーボードが一覧表示されます。
ストーリー ボードを閉じる 現在のストーリー ボードを閉じます。
ストーリー ボードのオプション ストーリー ボードの作成、複製、動作の取り消し、削除、名前の変更を行ったり、ストーリー ボードを閉じます。
再生コントロール タイムライン上を移動します。 再生ヘッドは、ドラッグしてタイムライン上を移動する (スクラブする) こともできます。
スコープを戻す オブジェクト ビューのスコープを前のルート オブジェクトまたは前のスコープに戻します。 スタイルまたはテンプレートを変更する場合にのみ、これを実行できます。
キーフレームの記録 現時点で選択されているオブジェクトのプロパティのスナップショットを記録します。
スナップ オプション タイムラインのスナップ、スナップの精度を設定し、タイムラインのスナップをオフにします。
表示/非表示ロック/ロック解除 オブジェクト ビューの表示と非表示、ロックとロック解除を切り替えます。
タイムライン上の再生ヘッドの位置 現在の時刻をミリ秒単位で表示します。 このフィールドに時間値を直接入力し、特定の時点に移動することもできます。 精度は [スナップ オプション] に設定したスナップ精度によって決まります。
再生ヘッド アニメーションがどの時点にあるかを示します。 タイムラインで再生ヘッドをドラッグして、アニメーションをプレビューできます。
タイムラインに設定されたキーフレーム 特定の時点でのプロパティの値を変更します。
オブジェクトの順序の変更 オブジェクトの表示順序を設定します。 構造ビューのオブジェクトを Z 軸を基準 (手前から奥)、またはマークアップ順 (XAML での表示順) に整列させるには、このボタンをクリックします。
タイムラインのズーム タイムラインのズーム解像度を設定します。 ズーム インでは、アニメーションを詳細に編集できます。ズーム アウトすると、長い再生時間にわたる動作の概要が表示されます。 ズーム インしても、目的の位置にキーフレームを設定できない場合は、スナップ精度が十分高く設定されていることを確認してください。
吹き出し 16 タイムライン構成領域 タイムラインを表示するとともに、キーフレームをドラッグするかショートカット メニューを使用してキーフレームを移動します。

[プロパティ] パネルのツアー

オブジェクトのプロパティを表示して変更するには、このパネルを使用します。 また、アートボード上で直接設定することもできます。 この場合、プロパティの変更が [プロパティ] パネルに反映されます。

[プロパティ] パネル

[カテゴリ] プロパティのカテゴリを展開し、折りたたみます。 カテゴリの詳細を表示するには [展開] をクリックし、非表示にするには [折りたたみ] 折りたたみ をクリックします。

[名前] と [種類] 選択したオブジェクトのアイコン、名前、種類が表示されます。
[並べ替え] プロパティを名前、ソース、またはカテゴリごとにアルファベット順に並べ替えます。
ブラシのプロパティ Fill、Stroke、Foreground など、ブラシの視覚的なプロパティを設定します。
カラー エディター 単色ブラシおよびグラデーション ブラシで使用します。
カラー ピッカー 色を選択します。
カラー チップ 初期の色、現在の色、および最後の色が表示されます。
スポイト ツール 画面上の任意の要素の色を使用します。 色スポイトは、単色ブラシが選択されているときに使用できます。 [グラデーションのスポイト] は、[グラデーション ブラシ] が選択されているときに使用できます。
プロパティとイベント 選択された要素に対してプロパティを設定したり、イベントを選択します。
[検索] ボックス プロパティを検索します。 [検索] ボックスに入力することで、表示されるプロパティをフィルター処理します。
ブラシ エディターのタブ ブラシ エディターを選択する場合に使用します。 ブラシなし単色ブラシグラデーション ブラシタイル ブラシ、またはブラシ リソースから選択できます。
色リソース 異なるプロパティにまったく同じ色を適用します。 [色リソース] タブには、[ローカル リソース][システム リソース] が表示されます。
RGB 色空間 [R][G]、または [B] (赤、緑、青) の各数値エディターの値を調整して色を変更します。
アルファ チャネル [A] の横にある数値エディターを使用してアルファ値を変更します。
色をリソースに変換 選択した色を色リソースに変換します。 色リソースは、[色リソース] タブをクリックした場合に使用できます。
16 進数値 表示されている色を表す 16 進数値が表示されます。
吹き出し 16 グラデーション スライダー グラデーション ブラシが選択されている場合にのみ表示されます。
詳細設定プロパティの表示 使用頻度が低いプロパティのカテゴリを表示します。

短いビデオを見る: インストール済みフィーチャーの構成 [プロパティ] パネル

関連項目

コントロールの挿入およびそのビヘイビアーの変更
オブジェクトのアニメーション化
図形とパスの描画
Visual Studio および Blend for Visual Studio での XAML の設計