WP Apps トライアスロン：テンプレートの応用

  • Article

#wp7dev_jp

Windows Phone トライアスロンに向けて皆さん走り出していますか？

さて、アプリケーションをどんな感じで作ったらいいのかわからない方のために、テンプレート (ZIP 形式/557 KB) を用意しています。使い方などは詳しくはWindows Phone トライアスロンのサポート欄をご覧ください。なお、もちろん自分で作れる方はテンプレートを使う必要はありません。

加工方法を変える

さて、このテンプレートですが、そのまま作ると枠をつけて画像を傾けるという処理になっていますが、そのほかいくつかの画像処理例が入っています。コメントアウトを外すと試すことができるので使ってみるといいでしょう。（最後の加工はほかのエフェクトはコメントアウトして使ってください）

  1. 画像の重ね合わせ：ほかの画像を重ねる（背景透明のPngを用意）
  2. 白枠を追加する：new Thickness(15); を new Thickness(15,15,15,120); とするとポラロイド風に
  3. 傾ける：写真加工には関係ないですけどね。imgViewではなくimgGridを傾ければ保存する写真も傾きます
  4. マスク：マスク画像で切り抜きができます。
  5. コントラストを強く：ピクセル1ドットずつを処理するサンプルです。
  6. 古い写真加工(複合技)

解像度を上げる

このテンプレートでは440ｘ440の解像度の写真が保存されます。画面のサイズに合わせてるためですが、これはちょっと小さいと感じるかもしれません。そこで解像度を上げてみましょう。MainPage.xaml と MainPage.xaml.cs を変更します。

MainPage.xaml

変更は3か所4項目です。1024, 768の部分は保存したい画像サイズを選んでみてください。ただし、2048以上にはしないようにしてください。

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <Viewbox Name="imgView">
        <Grid Width="1024" Height="768" Name="imgGrid" Background="White">
            <Image Margin="0" Stretch="Uniform" Name="imgPhoto" Source="/PhotoEffect1;component/image/Logo.png" />
            <Image Margin="0" Stretch="Fill" Name="imgPicture"/>
            <Border Name="frame" BorderBrush="White" />
        </Grid>
    </Viewbox >
</Grid>

解像度は縦横別でも構いません。大きくなった画像を、画面内に見た目上だけ首相させるために Toolkit のViewbox を使っています(すでに参照済み)。imgPhotoのオプションは初めから Uniform にしておけばよかったです。

 

MainPage.xaml.cs

ここも、はじめからこのようにしておけばよかったです。

// 【処理1-1】 画像選択機能呼び出し
private void btnLoad_Click(object sender, EventArgs e)
{
    task.PixelWidth = (int)imgGrid.Width;
    task.PixelHeight = (int)imgGrid.Height;
    task.Show();
}

このようにすれば、解像度を上げることができます。ただ、エフェクトの処理時間が一寸遅くなるので注意と、白枠は相対的に細くなるので、太くした方がいいでしょうね。

image

ということで、皆さんのご参加をお待ちしています。