読者です 読者をやめる 読者になる 読者になる

KatsuYuzuのブログ

.NET の開発をメインとした日記です。

Tile Logo Maker for Windows App を作りました #win8dev_jp #wpdev_jp

この記事はXAML Advent Calendar 2014 - Qiitaに参加しています。2日目の担当です。前日は@Grabacr07さんでした。

ツール作りました

f:id:KatsuYuzu:20141202041105p:plain

MSCCの勇者御一行やアプリ作るよりロゴ作る方が大変だと感じる僕のためにロゴ作成ツールを作りました。大きな特徴として xaml ファイルを読み込めます!……というか、まだ xaml にしか対応していません!漢は黙って xaml。

このツールの何がいいの?

  • xaml 対応!
  • タイルに対してのロゴのスケール設定
  • 中心位置に対してのオフセット設定

単純に画像のサイズを変換するだけだとこの辺にモヤモヤしていました。タイルサイズに合わせてロゴのスケールが違ったり、ちょっと上付きだったり。
f:id:KatsuYuzu:20141202041504p:plain
当然あるであろう下記の機能や個人的に欲しい機能はこれから……(

  • 設定の自由変更、追加
  • 画像ファイルの読み込み
  • マルチ解像度icoの出力

設定の自由変更、追加に対応すると、設定ファイルの配布、加工だけで複数プラットフォームいける!あと地味に面倒なicoもやっておきたい。

使い方

まず、Expression Designでアイコンを作ります。この辺に作り方が書いてあります(透過周りの話は情報が古い気がしています。今だと全部透過でいいかも)。

作成したオブジェクトを選択して余白無しでエクスポートします。形式はもちろん xaml で!
f:id:KatsuYuzu:20141202042948p:plain
あとは TileLogoMaker.exe で素材として開いて、ロゴを保存するだけです!同じフォルダーに素材名のフォルダーを作成して出力されます。
f:id:KatsuYuzu:20141202043252p:plain

実装のお話

選ばれた xaml を単純に読み込んでいます。

private UIElement Load(string path)
{
    using (var reader = new XamlXmlReader(path))
    using (var writer = new XamlObjectWriter(reader.SchemaContext))
    {
        while (reader.Read())
        {
            writer.WriteNode(reader);
        }
        return (UIElement)writer.Result;
    }
}

保存時はユーティリティライクな関数に対して、ロゴの数だけコールしています。読み込んだ UIElement を VisualBrush にして、DrawingVisual に書き込んでいます。その時に設定として持っていたオフセットで TranslateTransform を与えたり。

// TODO: この辺を設定化
new LogoInfo
{
    SubDirectoryName = "Windows 8.1", 
    Name = "Logo", 
    Width = 150, 
    Height = 150,
    OffsetY = -10,
    LogoScale = 0.45,
    SupportedTileScales = TileScales.All
}
var drawingVisual = new DrawingVisual();

using (var drawingContext = drawingVisual.RenderOpen())
{
    // 一辺
    var side = (width < height) ? width : height;
    var scaledSide = side * logoScale;

    // 移動
    drawingContext.PushTransform(
        new TranslateTransform(
            width / 2 - scaledSide / 2,
            height / 2 - scaledSide / 2 + offsetY * tileScale));

    // 描画
    drawingContext.DrawRectangle(
        visualBrush,
        null,
        new Rect(new Size(scaledSide, scaledSide)));
}

return drawingVisual;

最後に RenderTargetBitmap に描画して PngBitmapEncoder で保存しています。全体は Github を参照してください。

ダウンロード

とりあえず動くというレベルの機能があるだけなのでアルファ版です。かゆいところ、へぼいところ、是非、フィードバック頂けると嬉しいです。

Releases · KatsuYuzu/TileLogoMaker · GitHub
アイコン作るツールなのにアイコンが初期です(チラ

終わりに

カレンダーありきでやっつけたソースなのでこれから修正 & 育てていきます。ちなみにMSCCはソロ勇者としてアリアハンで眠ったままです。女賢者が見つかったら本気だす。

バトンタッチ!

3日目は@kaorunさんです!

ちなみに最初に参加しようとしたWindows Phoneの方は11月前半くらいに25人埋まってた印象。おかc
Windows Phone Advent Calendar 2014 - Adventar