UWPのImageスケーリング方法～NineGrid～

WinRTのImageコントロールにはこんなプロパティあるんですね。
NineGridというプロパティがあってこんなことができるみたいです。
https://msdn.microsoft.com/ja-jp/library/windows/apps/windows.ui.xaml.controls.image.ninegrid.aspx

Win8からあったみたいですが一応φ(..)メモメモ

Web系の開発経験ある人には馴染みのある画像のスケーリング方法だと思いますが、
こんな風に画像を3×3の9分割して、以下のように四隅のサイズを固定してスケーリングする方法です。
cssとかの界隈では9パッチとか9スライスって呼ばれてるものですね。

用意した画像

スケーリング結果

        <Image  Height="100" Width="300"
               Stretch="Fill"
               NineGrid="30,30,30,30"
               Source="Images/1.png"/>

こうすることで、画像で枠を付けたりボタンのデザインをする場合などにイイ感じに拡大できる、という寸法です。

XAMLでデザインを作っていれば、積極的に使うことはないかもしれません。
でも、web系アプリの開発で使ってた素材を流用する時とか、デザイナからこういう素材を渡された時などは、もしかしたら活用できるかもしれません。

サンプル

素材

とりあえず、パワポで適当にボタンっぽいデザインを作ってこんな画像として出力しました。

(サイズ：100×100)

MainPage.xaml

こんな風に、Nine Grid指定で四隅のサイズを固定することで、サイズを変えても綺麗にスケーリングできています。

        <StackPanel>
            <Image Width="300"
                   Height="100"
                   Margin="10"
                   NineGrid="20,20,20,20"
                   Source="Images/btn.png"
                   Stretch="Fill" />
            <Image Width="100"
                   Height="150"
                   Margin="10"
                   NineGrid="20,20,20,20"
                   Source="Images/btn.png"
                   Stretch="Fill" />
            <Image Width="50"
                   Height="50"
                   Margin="10"
                   NineGrid="20,20,20,20"
                   Source="Images/btn.png"
                   Stretch="Fill" />
        </StackPanel>