Visual Studio で XAML をデザインするDesign XAML in Visual Studio

Visual Studio と Blend for Visual Studio の両方には、さまざまなアプリの種類に合わせて XAML を使用して魅力的なユーザー インターフェイスとリッチ メディア体験を構築するための視覚的なツールが用意されています。Visual Studio and Blend for Visual Studio both provide visual tools for building engaging user interfaces and rich media experiences with XAML for a variety of app types. 視覚的な XAML エディターなど、両方に共通する機能もありますが、Blend for Visual Studio にはアニメーションやビヘイビアーなどのより高度なタスク向けに追加のデザイン ツールが用意されています。Both tools share a common set of features including a visual XAML editor, but Blend for Visual Studio provides additional design tools for more advanced tasks such as animation and behaviors.

アプリの設計プロセスは、選択したツールとターゲット プラットフォームによって変わります。The process of designing an app depends on the tool you choose and your target platform. この記事では、Visual Studio と Blend for Visual Studio の XAML デザイン ツールを比較します。This article compares the XAML design tools in Visual Studio and Blend for Visual Studio. ツール使い方の詳細なチュートリアルについては、次のトピックを参照してください。For more detailed walkthroughs of using the tools, see the following topics:

適切なツールを選択するChoose the Right Tool

デザイン ツールの選択は、スキル セットに大きく依存します。Your choice of design tools is largely dependent on your skill set. コード中心の場合は、Visual Studio で XAML コードを記述すれば高度なデザイン タスクを実行できます。If you are more code-oriented, you can write XAML code in Visual Studio to accomplish even advanced design tasks. デザイン中心の場合は、Blend for Visual Studio を使用すると、コードを記述せずに高度なタスクを実行できます。If you are more design-oriented, Blend for Visual Studio lets you perform advanced tasks without writing code.

Visual Studio と Blend for Visual Studio は自在に切り替えることができるだけでなく、両方で同時に同じプロジェクトを開くこともできます。You can switch back and forth between Visual Studio and Blend for Visual Studio, and you can even have the same project open in both at the same time. ある IDE で XAML ファイルに加えた変更は、その他の IDE に切り替える際に、自動再読み込みを使用して適用できます。Changes made to XAML files in one IDE can be applied via automatic reload when you switch to the other IDE. 再読み込み動作は、いずれかの IDE で [ツール] にある [オプション] ダイアログ ボックスのオプションを使用して制御できます。You can control the reload behavior via options in the Tools, Options dialog box in either IDE.

共有機能Shared Capabilities

最も基本的なタスクに関しては、いくらかのわずかな相違はあるものの、Visual Studio と Blend for Visual Studio の IDE で同一のウィンドウおよび機能のセットを使用します。For most basic tasks, the IDE for Visual Studio and Blend for Visual Studio share the same set of windows and capabilities, with some subtle differences. 主な特徴:Some highlights include:

  • 一貫性のあるユーザー インターフェイス: アプリケーションを使い慣れた Visual Studio ユーザー インターフェイス環境で設計できるため、IDE 間の切り替えが快適になり、生産性も向上します。A consistent user interface: You can design your applications within the familiar context of the Visual Studio user interface, which makes switching between IDEs a more pleasant and productive experience. Blend for Visual Studio では、コンテンツとユーザー インターフェイスの間のコントラストを上げることにより設計中のコンテンツに注意を集中するのに役立つ Visual Studio ダーク テーマを使用します。Blend for Visual Studio uses the Visual Studio Dark theme that helps you focus on the content you are designing by improving the contrast between your content and the user interface. XAML デザイナーを使用した UI の作成」をご覧ください。See Creating a UI by using XAML Designer.

    Blend for Visual Studio の IDE

  • XAML IntelliSense: どちらの IDE も、ステートメント入力候補、コードへのコメント追加や書式設定などの一般的なエディター操作のサポート、およびリソース、バインディング、コードへのナビゲーションなど、IntelliSense に期待する一般的な機能すべてをサポートします。XAML IntelliSense: Both IDEs support all of the common capabilities you would expect from IntelliSense including statement completion, support for common editor operations like commenting and formatting code, and navigation to resources, binding, and code.

  • 基本的なデバッグ機能: Blend では、実行中のアプリをデバッグするブレークポイントをコードに設定するなどの、新たなデバッグが可能です。Basic debugging capabilities: You can now debug in Blend, including setting breakpoints in your code to debug your running app. Visual Studio とデバッグ機能の一貫性を保つため、Blend for Visual Studio には Visual Studio の大半のデバッグ ウィンドウとツールバーが含まれています。To maintain a consistent debugging experience with Visual Studio, Blend for Visual Studio includes most of Visual Studio's debugging windows and toolbars. 診断やコード分析などの高度なデバッグ機能は、Visual Studio でのみ使用できます。Advanced debugging capabilities such as diagnostics and code analysis are only available in Visual Studio. Debugging in Visual Studio」を参照してください。See Debugging in Visual Studio.

  • ファイルの再読み込み操作: XAML ファイルは、Blend for Visual Studio または Visual Studio のどちらでも編集でき、切り替え時に編集したファイルを自動的に再読み込みさせることができます。File reload experience: You can edit your XAML files in either Blend for Visual Studio or Visual Studio, and have your edited files reload automatically as you switch between them. ワークフローの中断を最小限に抑えるため、[ファイルの再読み込み] ダイアログでファイルの再読み込みの基本設定を設定できます。To minimize workflow interruptions, you can now set your file reload preferences in the file reload dialog.

    ファイルの再読み込み操作

  • レイアウトの同期と設定: カスタム レイアウトを使用して、ツール ウィンドウのレイアウト変更を保存および適用できます。Synchronized Layouts and Settings: Custom layouts enable you to save and apply tool window layout customizations. 同じ Microsoft アカウントでサインインすると、Visual Studio は Visual Studio と Blend for Visual Studio 双方の変更や基本設定をコンピューター間で同期します。Visual Studio will synchronize these customizations and preferences for both Visual Studio and Blend for Visual Studio across machines when you sign in with the same Microsoft account. Visual Studio IDE のカスタマイズ」を参照してください。See Personalize the Visual Studio IDE.

  • 共通のソリューション エクスプ ローラー: ソリューション エクスプ ローラーによって、プロジェクトやファイルが整理して表示されるだけでなく、プロジェクトやファイルに関連付けられているコマンドに素早くアクセスできます。A common Solution Explorer: The Solution Explorer provides you with an organized view of your projects and their files, as well as ready access to the commands associated with them. ソリューション エクスプ ローラーを使用すると、大規模なエンタープライズ プロジェクトでの作業が容易になります。With Solution Explorer, it is easier to work with big enterprise projects. ソリューションおよびプロジェクト」をご覧ください。See Solutions and Projects.

  • チーム エクスプ ローラー: チーム エクスプ ローラーを使用すると、プロジェクトを GIT または TFS リポジトリを使用して管理でき、チームのコラボレーションが容易になります。Team Explorer: With Team Explorer you can manage your projects with GIT or TFS repositories to facilitate team collaboration. チーム エクスプローラーでの作業を参照してください。See Work in Team Explorer.

  • NuGet: Visual Studio と Blend for Visual Studio の両方で NuGet パッケージを管理できます。NuGet: You can manage NuGet packages in both Visual Studio and Blend for Visual Studio. NuGet は、パッケージのインストールと、ソリューションからの削除を簡略化する .NET Framework 用のパッケージ マネージャーです。NuGet is a package manager for the .NET Framework that simplifies the installation and removal of packages from a solution.

Blend for Visual Studio での高度な機能Advanced Capabilities in Blend for Visual Studio

生産性を高めるため、次のようなタスクには Blend for Visual Studio の使用をご検討ください。To increase your productivity, consider using Blend for Visual Studio for the following tasks. Blend for Visual Studio が Visual Studio デザイナーまたはコード単独より短い時間でより多くの機能を提供する領域は以下のとおりです。These are the areas where Blend for Visual Studio offers more speed and functionality than the Visual Studio designer or code alone.

終了To Visual StudioVisual Studio Blend for Visual StudioBlend for Visual Studio 詳細情報More information
アニメーションを作成するCreate animations アニメーション用のデザイン ツールはないため、プログラムで作成する必要があります。There is no design tool for animations; you have to create them programmatically. これを行うには、WPF におけるアニメーションおよびタイミング システムを理解し、広範なコーディングの専門知識を持っている必要があります。This requires an understanding of the animation and timing system in WPF and extensive coding expertise. アニメーションを視覚的に作成し、Blend for Visual Studio でプレビューできます。You create animations visually and can preview them in Blend for Visual Studio. これは、コーディングでアニメーションを構築するよりもすばやく正確です。This is faster and more accurate than building your animations in code. ユーザーとの対話を処理するトリガーを追加できるほか、コードに切り替えてイベント ハンドラーとその他の機能を追加することができます。You can add triggers to handle user interaction, and you can switch to code to add event handlers and other functionality. オブジェクトのアニメーション化Animate objects
簡単に操作できるよう、図形やテキストをパスに変換するTurn shapes and text into paths for easier manipulation サポートされていません。Not supported. 図形 (四角形、楕円など) をパスに変換することで、図形に対して軽微な変更や劇的な変更を行えます。そうすることで、より良い編集コントロールができます。You can make subtle or dramatic changes to shapes (such as rectangles and ellipses) by converting them to paths, which provide better editing control. 形状を変更したり、パスを結合するとともに、複数の図形から複合パスを作成することができます。You can reshape or combine paths, and create compound paths from multiple shapes.

さらに、テキスト ブロックをパスに変換して、ベクター イメージとして操作することもできます。You can also convert text blocks into paths to manipulate them as vector images.
図形とパスの描画Draw shapes and paths
UI の設計に対話機能を追加するAdd interactivity to your UI designs C#、Visual Basic、または C++ コードが必要です。Requires C#, Visual Basic, or C++ code. 静的な設計に対話機能を追加するため、コントロールにビヘイビアーをドラッグ アンド ドロップします。Drag and drop behaviors onto controls to add interactivity to your static designs. ビヘイビアーは、ドラッグ アンド ドロップ、ズーム、表示状態の変更などの機能をカプセル化する、すぐに使用できるコード スニペットです。Behaviors are ready-to-use code snippets that encapsulate functionality such as drag/drop, zoom, and visual state changes. 選択できる一連のビヘイビアーは増大しつつありますが、独自に作成することができます。There's a growing set of behaviors you can choose from, and you can create your own.

次に、Blend for Visual Studio でビヘイビアーのプロパティを変更するか、コードでイベント ハンドラーを追加することにより、各ビヘイビアーをカスタマイズできます。You can then customize each behavior by changing its properties in Blend for Visual Studio or by adding event handlers in code.
コントロールの挿入およびそのビヘイビアーの変更Insert controls and modify their behavior
Adobe アートワークを使用するUse Adobe artwork サポートされていません。Not supported. Adobe FXG、PhotoShop、または Illustrator のアートワークをインポートし、Blend for Visual Studio に UI を実装します。Import Adobe FXG, PhotoShop, or Illustrator artwork and implement the UI in Blend for Visual Studio. イメージ、ビデオ、およびオーディオ クリップの挿入Insert images, videos, and audio clips
コントロール、テンプレート、スタイルを編集するEdit controls, templates, and styles コーディングおよび WPF のスタイルとテンプレートの知識が必要です。Requires coding and knowledge of WPF styles and templates. イメージをコントロールに変換します。Turn any image into a control.

コントロール、スタイル、テンプレートを数回マウスでクリックするだけで変更するには、テンプレート編集ツールを使用します。Use the template editing tools to make changes to controls, styles, and templates with just a few mouse clicks.

たとえば、Blend for Visual Studio のスタイル リソースを使用して一般的な WPF コントロール (ボタン、リスト ボックス、スクロール バー、メニューなど) を実装し、Blend for Visual Studio で色、スタイル、または基になるテンプレートを直接変更できます。For example, you can use Blend for Visual Studio style resources to implement common WPF controls (such as buttons, list boxes, scroll bars, menus, etc.), and change their color, style, or underlying template directly in Blend for Visual Studio. 次に、必要な場合はコードに切り替えてタッチを仕上げます。You can then switch to code for finishing touches if you want.
オブジェクト スタイルの変更Modify the style of objects
UI をデータに接続するConnect your UI to data SQL Server データベース、WCF や Web サービス、オブジェクト、または SharePoint リストなどのリソースからデータ ソースを作成し、データ ソースを UI コントロールにバインドします。You can create a data source from resources such as SQL Server databases, WCF or web services, objects, or SharePoint lists, and bind the data source to your UI controls.

デザイン時のデータは、対話型のデザイン エクスペリエンスのため手動で作成する必要があります。Design-time data must be created by hand for an interactive design experience.
プロトタイプの作成とテスト用のサンプル データは簡単に作成できます。Create sample data easily for prototyping and testing. 準備ができたら、ライブ データに切り替えます。Switch to live data when you're ready.

Blend for Visual Studio のデータ生成機能は並外れており (その場で迅速かつ簡単に、名前、番号、URL、写真の追加が可能)、多くの時間を節約できます。Blend for Visual Studio's data generation capabilities are outstanding (you can add names, numbers, URLs, photos easily on the fly), and can save you a lot of time.

ライブ データの場合は、UI コントロールを XML ファイルまたは任意の CLR データ ソースにバインドできます。For live data, you can bind your UI controls to an XML file or to any CLR data source.
データの表示Display data

高度な XAML デザインの詳細については、「Blend for Visual Studio を使用して UI を作成する」を参照してください。For more information about advanced XAML design, see Creating a UI by using Blend for Visual Studio.