ホーム > Expression Design >

Expression DesignからExpression BlendへXAMLをコピーするには

Expression IQ 翻訳記事
Elliot[著], わにちゃん@ExpressionTech.jp[訳・編集]
2011年5月9日 from Expression IQ

はじめに

Expression Design と Expression Blend はとてもよく連携するので、もしDesign のほうがより快適であればそのようにできますし、そのあと準備ができたら、プロジェクトのXAMLコードをコピーして、BlendのWPF/Silverlight プロジェクトに貼り付けることができます。実際には簡単なコピーと貼り付け操作で動作しますが、それを行う前にいくつかの考慮すべき点があります。もちろん、XAMLにエクスポートできますが、コピーと貼り付けの方がより手っ取り早く行えます。

クリップボード (XAML) オプション

DesignでXAMLをコピーする前に実行する必要とする最初のタスクは、クリップボード (XAML) オプションが正しくコピーされるように設定されているかどうか、および、Blendのプロパティで正しく表示されるかどうか確認することです。

クリップボード (XAML) オプションを表示するには、[編集]メニューをクリックし、[オプション]をポイントして[クリップボード (XAML)]をクリックします。

クリップボード (XAML) オプション
XAMLオプション

まず、クリップボード形式を選択します。形式を選択するときにペーストするBlendのプロジェクトの種類を明確にする必要があります。

  • XAML Silverlight 4/WPF キャンバス
    Expression BlendでSilverlight 4 プロジェクトまたはWindows Presentation Foundation (WPF) プロジェクトをアニメーションまたは操作するオブジェクトを貼り付けたい場合、このオプションを選択します。
  • XAML WPF リソース ディクショナリ
    Expression BlendのWPFオブジェクトにリソースディクショナリとして扱う、リソースのコレクションとしてオブジェクトを貼り付けたい場合にこのオプションを選択します。リソース ディクショナリはあなたのアプリケーションの異なるデザイン要素を含むカスタムファイルまたはスタイルのコレクションです。Expression Blendで何かのWPFオブジェクトにリソースディクショナリを追加でき、そのプロジェクトの何かのオブジェクトのブラシプロパティにリソースディクショナリに適用できます。
  • XAML Silverlight 3 キャンバス
    Expression BlendでSilverlight 3 プロジェクトまたはWindows Presentation Foundation (WPF) プロジェクトをアニメーションまたは操作するオブジェクトを貼り付けたい場合、このオプションを選択します。
  • グループ化
    このオプションは[XAML WPF リソース ディクショナリ]形式を選択したときにのみ表示されます。3つのオプション(ドキュメントレイヤーオブジェクト)から選択できます。それぞれのオプションはBlendにコピーされたオブジェクトを貼り付けた際にどのようにリソースディクショナリにそのオブジェクトがグループ化されるかを指定します。

調整可能な他のオプションを示します。

  • 常にオブジェクト名を付ける
    名前未設定のオブジェクトにデフォルトの名前を付けるにはこのオプションを選択します。その名前はXAMLコードに表示されます。
  • XMLレイアウト コンテナーにグループ化されたオブジェクトを配置
    分離されたキャンバスレイアウトパネルにExpression Designドキュメントでのそれぞれのグループ化されたオブジェクトを囲むには、このオプションを選択します。

[テキスト]オプションは、どのようにオブジェクトがハンドルするかを決定します。これらのオプションは[XAML WPF リソースディクショナリ]形式を選択した場合には表示されません。

  • 編集可能なテキストブロック
    テキストの外観が変わっても個々 の編集可能な文字としてテキストを維持するには、このオプションを選択します。
    注:メッセージのとおり、XAMLに変換された書式設定の一部が失なわれる可能性があります。さらに、いくつかのフォントがサポートされていません。サポート&サポートされていない属性の完全なリストを見るには、ヘルプトピックのXAMLテキストサポートを参照してください。
  • パス
    いずれの文字もアウトラインに変換するにはこのオプションを選択します。そのテキストを編集することができなくなります。
    テキストオプション

[ライブエフェクト]オプションでは、どのようにDesignがオブジェクトに適用するエフェクトをかけるか決定します。

  • すべてをラスタライズ
    ライブエフェクトをラスタライズするにはこのオプションを選択します。もしこのチェックボックスをクリアにすると、いくつかのオブジェクトが実線またはフィルとしてエクスポートされるかもしれません。
  • XAML エフェクトに変換
    XAMLコードによって現在サポートされているライブエフェクトだけをエクスポートします。以下の図では、ドロップシャドーエフェクトとブラー(ガウス)エフェクトのみがXAMLに変換されます。
    ライブ エフェクト オプション

DesignでXAMLをコピーする

これで、XAMLオプションをセットしたら、オブジェクトをコピーする準備ができました。いったんオブジェクトを選択すると、視覚エディタ、またはテキストエディタにコードを貼りたいかどうかによってそれをどうコピーするかの2つの選択があります。

  • 視覚的なXAMLエディタにオブジェクトを貼り付ける場合は、[編集]メニューの[コピー]または[XAMLのコピー]をクリックします。
  • テキストとしてテキストエディタにXAMLコードを貼り付ける場合は、XAMLコードのASCIIバージョンにコピーするために[編集]メニューの[XAMLのコピー]を選択します。
    DesignからXAMLのコピー

BlendでXAMLを貼り付ける

これでそのオブジェクトを貼り付ける準備ができました。もしExpression Blendで開いたWPFオブジェクトが表示されている場合、その後、そのオブジェクトの先によって、次のいずれかを行うことができます。

Blendで新しいプロジェクトを選択
  • Designで[クリップボード (XAML)]設定にてSilverlight/WPFキャンバス形式にコピーするように設定されていて、Blendのアートボードにオブジェクトを貼り付けたい場合は、[編集]メニューの[貼り付け]をクリックします。
  • Designで[クリップボード (XAML)]設定でSilverlight/WPFキャンバス形式にコピーするように設定されていて、XAMLエディタにXAMLコードを貼り付けるには、貼り付けたい場所にカーソルを移動してそのコードを貼り付けます。
    注:XAML エラーを回避するには、既存の XAML の適切な場所にコピーしたコードを貼り付けるように確認する必要があります。
  • Designで[クリップボード (XAML)]設定で[XAML WPFリソースディクショナリ]形式でコピーするように設定されていれば、2つの選択肢があります。
    • コピーコマンドを使ってオブジェクトをコピーした場合、[リソース]パネルにノードを選択し、[編集]メニューの[貼り付け]をクリックします。
    • [XAMLのコピー]コマンドを使ってオブジェクトをコピーした場合、BlendのXAMLエディタを開き、[編集]メニューの[貼り付け]をクリックします。
      XAMLをBlendに貼り付け

以上です。Blendのアートワークがプロジェクトに追加したあと、ハードディスクドライブにプロジェクトフォルダーに.pngファイルとして保存されます。

BlendにXAMLオブジェクトとしてスライスを貼り付けることもできます。しかしそれは次回のネタにします。お読みいただきありがとうございます。

記事元: Expression IQ > Copying XAML from Expression Design to Expression Blend

Expression Design 最新記事

コメント

▲このページのトップへ