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

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

Room metro #28 XAML Day | grabacr.nét

ツール作りました

f:id:KatsuYuzu:20141202041105p:plain
<a href="https://github.com/KatsuYuzu/TileLogoMaker">KatsuYuzu/TileLogoMaker</a>
MSCCの勇者御一行やアプリ作るよりロゴ作る方が大変だと感じる僕のためにロゴ作成ツールを作りました。大きな特徴として xaml ファイルを読み込めます！……というか、まだ xaml にしか対応していません！漢は黙って xaml。

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

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

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

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

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

使い方

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

Expression Design でアプリのアイコンを作ろう！ #wpdev_jp #win8dev_jp - KatsuYuzuのブログ

作成したオブジェクトを選択して余白無しでエクスポートします。形式はもちろん 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 を参照してください。

ダウンロード

とりあえず動くというレベルの機能があるだけなのでアルファ版です。かゆいところ、へぼいところ、是非、フィードバック頂けると嬉しいです。
<a href="https://github.com/KatsuYuzu/TileLogoMaker/releases">KatsuYuzu/TileLogoMaker</a>
Releases · KatsuYuzu/TileLogoMaker · GitHub
アイコン作るツールなのにアイコンが初期です（チラ