Blend for Visual Studio を使用して UI を作成するCreating a UI by using Blend for Visual Studio

Blend for Visual Studio を使用すると、XAML ベースの Windows および Web アプリケーションを設計できます。Blend for Visual Studio helps you design XAML-based Windows and Web applications. Visual Studio と同じ基本的な XAML デザイン環境を提供しているほか、アニメーションやビヘイビアーなどの高度なタスクを視覚的にデザインする機能が追加されています。It provides the same basic XAML design experience as Visual Studio and adds visual designers for advanced tasks such as animations and behaviors. (ツールの比較については、「Visual Studio および Blend for Visual Studio での XAML の設計」を参照してください)。(For a comparison between the tools, see Designing XAML in Visual Studio and Blend for Visual Studio.)

Blend for Visual Studio は Visual Studio に含まれているので、ダウンロードする必要はありません。Because Blend for Visual Studio is included as a part of Visual Studio, you don't need to download it. ただし、Visual Studio インストーラーで選択し、システムにインストールする必要があります。However, you need to select it in the Visual Studio installer for it to install on your system.

Blend for Visual Studio を初めてご使用になる場合は、このワークスペース特有の機能に慣れるために少し時間を取ってください。If you're new to Blend for Visual Studio, take a moment to become familiar with the unique features of the workspace. このトピックでは、短いツアーにお連れします。This topic takes you on a quick tour.

注意

アートボード、[ドキュメント アウトライン] ウィンドウ、[デバイス] ウィンドウなどの共有デザイン機能のツアーについては、「XAML デザイナーを使用した UI の作成」を参照してください。To tour the shared design features such as the artboard, Document Outline window, and Device window, see Creating a UI by using XAML Designer.

このトピックの内容:In this topic:

[ツール] パネルのツアーTour of the Tools panel

Blend for Visual Studio の [ツール] パネルは、アプリケーションのオブジェクトの作成と変更に使用します。You can use the Tools panel in Blend for Visual Studio to create and modify objects in your application. パネルにあるツールを選択してアートボード上でマウスを動かすと、オブジェクトを描画できます。You create the objects by selecting a tool and drawing on the artboard with your mouse.

[ツール] パネルTools panel

選択ツール オブジェクトとパスを選択します。Selection tools Select objects and paths.

個別選択ツールを使用すると、入れ子状のオブジェクトやパス セグメントを選択できます。Use the Direct Selection tool to select nested objects and path segments.
吹き出し ACallout A グラデーション ツールとブラシ ツールGradient and brush tools
表示ツール 手のひらツールでの移動、ズームなど、アートボードの表示の調整を行います。View tools Adjust the view of the artboard, such as for panning and zooming. 吹き出し BCallout B パス ツールPath tools
ブラシ ツール ブラシの変換や、オブジェクトのペイントを行ったり、あるオブジェクトの属性を選択して別のオブジェクトに適用するなど、オブジェクトの表示属性を操作します。Brush tools Work with the visual attributes of an object, such as transforming a brush, painting an object, or selecting the attributes of one object to apply them to another object. 吹き出し CCallout C シェイプ ツールShape tools
オブジェクト ツール パス、図形、レイアウト パネル、テキスト、コントロールなど、よく使用するオブジェクトをアートボード上で描画します。Object tools Draw the most common objects on the artboard, such as paths, shapes, layout panels, text, and controls. 吹き出し DCallout D レイアウト パネルLayout panels
アセット ツール [アセット] パネルにアクセスし、ライブラリから最近使用したアセットを表示します。Asset tools Access the Assets panel and to show the most recently used asset from the library. 吹き出し ECallout E テキスト コントロールText controls
吹き出し FCallout F コモン コントロールCommon controls

短いビデオを見る: インストール済みフィーチャーの構成 ツール バーWatch a short video: Configure Installed Features The Toolbar.

[アセット] パネルのツアーTour of the Assets panel

[アセット] パネルには、すべてのコントロールが用意されています (Visual Studio の [ツールボックス] に似ています)。You can find all controls in the Assets panel, similar to the Toolbox in Visual Studio. また、コントロールのほかに、スタイル、メディア、ビヘイビアー、効果など、アートボードに追加できるすべてのものが [アセット] パネルに用意されています。In addition to controls, you'll find everything you can add to your artboard in the Assets panel, including styles, media, behaviors, and effects.

[アセット] パネルAssets panel

[検索] ボックス [検索] ボックスに入力することにより、アセットの一覧を絞り込みます。Search box Type in the Search box to filter the list of assets.
グリッド モードとリスト モード アセットの表示モードを、グリッド モードまたはリスト モードに切り替えます。Grid mode and List mode Switch between the Grid mode view and the List mode view of assets.
アセットのカテゴリ カテゴリまたはサブカテゴリをクリックすると、そのカテゴリに属するアセットが表示されます。Assets categories Click a category or subcategory to view the list of assets in that category.
スタイル リソース ディクショナリに含まれるすべてのスタイルを表示します。Styles Show all the styles that are contained in the resource dictionary.
説明 選択したカテゴリまたはサブカテゴリの説明が表示されます。Description View a description of the selected assets category or subcategory.

[オブジェクトとタイムライン] パネルのツアーTour of the Objects and Timeline panel

このパネルを使用すると、アートボード上のオブジェクトを整理して、必要な場合はアニメーション化できます。Use this panel to organize the objects on your artboard and, if you want, to animate them.

アニメーション モードの [オブジェクトとタイムライン] パネルObject and Timeline panel in animation mode

オブジェクト ビュー ドキュメントをツリー表示します。Objects view View a visual tree of a document. さまざまなレベルの詳細にドリル ダウンできます。You can drill down to varying levels of detail. さらに、アートボード上のオブジェクトを整理するレイヤーを追加することもできます。You can also add layers to further organize objects on the artboard. そのように、グループとしてロックし、非表示にすることができます。That way you can lock and hide them as a group.
記録モード インジケーター タイムラインでプロパティの変更を記録中かどうかを表示します。Record mode indicator See whether you're recording property changes in a timeline.
ストーリーボードの一覧 作成済みのストーリーボードが一覧表示されます。Storyboard picker View a list of storyboards that you've created.
ストーリー ボードを閉じる 現在のストーリー ボードを閉じます。Close storyboard Close the current storyboard.
ストーリー ボードのオプション ストーリー ボードの作成、複製、動作の取り消し、削除、名前の変更を行ったり、ストーリー ボードを閉じます。Storyboard options Create, duplicate, reverse, delete, rename, or close a storyboard.
再生コントロール タイムライン上を移動します。Playback controls Navigate through the timeline. 再生ヘッドは、ドラッグしてタイムライン上を移動する (スクラブする) こともできます。You can also drag the playhead to navigate through (or scrub) the timeline.
スコープを戻す オブジェクト ビューのスコープを前のルート オブジェクトまたは前のスコープに戻します。Return scope to Scope the objects view back to the previous root object or previous scope. スタイルまたはテンプレートを変更する場合にのみ、これを実行できます。You can do this only when you're modifying a style or template.
キーフレームの記録 現時点で選択されているオブジェクトのプロパティのスナップショットを記録します。Record a keyframe Record a snapshot of the properties of the selected object at the current point in time.
スナップ オプション タイムラインのスナップ、スナップの精度を設定し、タイムラインのスナップをオフにします。Snapping options Set timeline snapping, snap resolution, and turn off timeline snapping.
表示/非表示ロック/ロック解除 オブジェクト ビューの表示と非表示、ロックとロック解除を切り替えます。Show/hide, Lock/unlock Show or hide the visibility and locking options for the objects view.
タイムライン上の再生ヘッドの位置 現在の時刻をミリ秒単位で表示します。Playhead position on the timeline Show the current time in milliseconds. このフィールドに時間値を直接入力し、特定の時点に移動することもできます。You can also enter a time value directly in this field to jump to a particular point in time. 精度は [スナップ オプション] に設定したスナップ精度によって決まります。The precision depends on the snap resolution set in the Snapping Options.
再生ヘッド アニメーションがどの時点にあるかを示します。Playhead Determine what point in time the animation is at. タイムラインで再生ヘッドをドラッグして、アニメーションをプレビューできます。You can drag the playhead across the timeline to preview animation.
タイムラインに設定されたキーフレーム 特定の時点でのプロパティの値を変更します。Keyframes set on timelines Change a property value at a specific point in time.
オブジェクトの順序の変更 オブジェクトの表示順序を設定します。Change order of objects Set the display order of objects. 構造ビューのオブジェクトを Z 軸を基準 (手前から奥)、またはマークアップ順 (XAML での表示順) に整列させるには、このボタンをクリックします。Click this button to arrange objects in the structure view by Z order (front-to-back) or by markup order (the order in which they appear in XAML view).
タイムラインのズーム タイムラインのズーム解像度を設定します。Timeline zoom Set the zoom resolution of the timeline. ズーム インでは、アニメーションを詳細に編集できます。ズーム アウトすると、長い再生時間にわたる動作の概要が表示されます。Zooming in lets you edit an animation with more detail, and zooming out shows more of an overview of what is happening over longer periods of time. ズーム インしても、目的の位置にキーフレームを設定できない場合は、スナップ精度が十分高く設定されていることを確認してください。If you zoom in but can't set a keyframe at the position in time that you want, verify that the snap resolution is set high enough.
吹き出し 16Callout 16 タイムライン構成領域 タイムラインを表示するとともに、キーフレームをドラッグするかショートカット メニューを使用してキーフレームを移動します。Timeline composition area View the timeline, and move keyframes around by dragging them or using their shortcut menus.

[プロパティ] パネルのツアーTour of the Properties panel

オブジェクトのプロパティを表示して変更するには、このパネルを使用します。Use this panel to view and modify the properties of an object. また、アートボード上で直接設定することもできます。You can also set them directly on the artboard. この場合、プロパティの変更が [プロパティ] パネルに反映されます。If you do, the property changes will be reflected in the Properties panel.

[プロパティ] パネルProperties panel

[カテゴリ] プロパティのカテゴリを展開し、折りたたみます。Categories Expand and collapse categories of properties. カテゴリの詳細を表示するには [展開] をクリックし、非表示にするには [折りたたみ] 折りたたみ をクリックします。Click Expand and Collapse Collapse to show or hide category details.

[名前] と [種類] 選択したオブジェクトのアイコン、名前、種類が表示されます。Name and Type View the icon, name and type of the selected object.
[並べ替え] プロパティを名前、ソース、またはカテゴリごとにアルファベット順に並べ替えます。Arrange by Arrange properties alphabetically by name, source, or category.
ブラシのプロパティ Fill、Stroke、Foreground など、ブラシの視覚的なプロパティを設定します。Brush properties Set the visual properties for brushes such as Fill brush, Stroke brush, and Foreground brush.
カラー エディター 単色ブラシおよびグラデーション ブラシで使用します。Color editor Use for solid color and gradient brushes.
カラー ピッカー 色を選択します。Color picker Select a color.
カラー チップ 初期の色、現在の色、および最後の色が表示されます。Color chips View the initial color, current color, and last color
スポイト ツール 画面上の任意の要素の色を使用します。Eyedroppers Use the color of any element on your screen. 色スポイトは、単色ブラシが選択されているときに使用できます。The Color eyedropper is available when the Solid color brush is selected. [グラデーションのスポイト] は、[グラデーション ブラシ] が選択されているときに使用できます。The Gradient eyedropper is available when the Gradient brush is selected.
プロパティとイベント 選択された要素に対してプロパティを設定したり、イベントを選択します。Properties and Events Set properties or choose events for a selected element.
[検索] ボックス プロパティを検索します。Search box Search for properties. [検索] ボックスに入力することで、表示されるプロパティをフィルター処理します。Filter the properties that are displayed by typing in the Search box.
ブラシ エディターのタブ ブラシ エディターを選択する場合に使用します。Brush editor tabs Use to select a brush editor. ブラシなし単色ブラシグラデーション ブラシタイル ブラシ、またはブラシ リソースから選択できます。You can choose No brush, Solid Color brush, Gradient brush, Tile brush, or Brush resource.
色リソース 異なるプロパティにまったく同じ色を適用します。Color resources Apply the exact same color to different properties. [色リソース] タブには、[ローカル リソース][システム リソース] が表示されます。The Color Resources tab includes Local Resources and System Resources.
RGB 色空間 [R][G]、または [B] (赤、緑、青) の各数値エディターの値を調整して色を変更します。RGB color space Modify the color by adjusting the values for the R, G, or B (red, green, blue) number editors.
アルファ チャネル [A] の横にある数値エディターを使用してアルファ値を変更します。Alpha channel Modify the Alpha value by using the number editor next to A.
色をリソースに変換 選択した色を色リソースに変換します。Convert color to resource Convert the selected color to a color resource. 色リソースは、[色リソース] タブをクリックした場合に使用できます。Color resources are available when you click the Color resources tab.
16 進数値 表示されている色を表す 16 進数値が表示されます。Hex value View the hexadecimal value of the color displayed.
吹き出し 16Callout 16 グラデーション スライダー グラデーション ブラシが選択されている場合にのみ表示されます。Gradient slider Appears only if a gradient brush is selected.
詳細設定プロパティの表示 使用頻度が低いプロパティのカテゴリを表示します。Show advanced properties View categories of properties that are less commonly used.

短いビデオを見る: インストール済みフィーチャーの構成 [プロパティ] パネルWatch a short video: Configure Installed Features Properties panel.

関連項目See Also

コントロールの挿入およびそのビヘイビアーの変更 Insert controls and modify their behavior
オブジェクトのアニメーション化 Animate objects
図形とパスの描画 Draw shapes and paths
Visual Studio および Blend for Visual Studio での XAML の設計Designing XAML in Visual Studio and Blend for Visual Studio