XAML を画像ファイルに変換するツール

XAML を画像ファイルに変換するツール (正確には、プロジェクト テンプレート) の XAML to Image を公開しました。
まずは基本的な使用方法を紹介します。

Blend for Visual Studio で XAML を編集します。

[F5] キーを押して実行すると、いろいろな種類の画像ファイルが作成されます。

実行したアプリは自動的に終了し、出力フォルダーがエクスプローラーで開きます。
複数のサイズや、図形の色を黒に変えたバージョンを作成するように設定できます。

基本的な操作の説明は以上です。
アイコンを作成するのに便利だと思います。
以下では、セットアップと設定の方法を紹介します。

 

■ セットアップ

(元の内容は XAML to Image の Wiki の Setup にあります。)
セットアップの方法は、プロジェクト テンプレートを配置するだけです。

まず、Download から、次のプロジェクト テンプレート ファイルの最新版をダウンロードします。

  • csXamlToImage_Blend_xxx.zip
  • csXamlToImage_VS_xxx.zip

 

Blend 用のセットアップ

"%USERPROFILE%\Documents\Visual Studio 2012\Blend\ProjectTemplates" フォルダーを開きます。
そこに csXamlToImage_Blend_xxx.zip をコピーします。

これで、[XAML to Image] のプロジェクト テンプレートが表示されるようになります。

 

Visual Studio 用のセットアップ

"%USERPROFILE%\Documents\Visual Studio 2012\Templates\ProjectTemplates\Visual C#" フォルダーを開きます。
Windows フォルダーを作成し、そこに csXamlToImage_VS_xxx.zip をコピーします。

これで、[XAML to Image] のプロジェクト テンプレートが表示されるようになります。
なお、[.NET Framework 4.5] 以降を選択していないと表示されません。

 

■ 設定

(元の内容は XAML to Image の Wiki の Usage にあります。)
MainWindow.xaml 上には、設定項目がいくつかあります。

  • File name: 出力される各ファイルの名前の基礎となる文字列です。画像形式は拡張子から自動的に判断されます。
  • Black version: 図形の色を黒に変更したバージョンも出力するかどうかを示す値です。
  • Image sizes: 出力される画像ファイルのサイズの集合です。Size 構造体の値を指定します。

 

以上です。
あとは、[MainCanvas] という名前の Canvas の上で自由に画像をデザインするだけです。

次の例のような使い方もできます。

  • MainCanvas の親の Border の Width と Height を変更する
  • MainCanvas の Background を変更する
  • 既存の画像ファイルを使用する

出力は次のようになります。

 

XAML ファイルや出力された画像ファイルの例は Images にあります。

バージョン情報
Visual Studio 2012 以降

参照
XAML to Image (GitHub Pages)
XAML to Image (GitHub)

カテゴリー: ツール. タグ: . Leave a Comment »

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。