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

cafe. Blend

Expression Blend 勉強会

その42:チェックボックスをカスタマイズして、on/offに画像を利用する

連載:0から始めるExpression Blend 4 再入門

おでさんがチェックボックスよーわからへんってつぶやいた途端、
まわりのWPクラスタが「VSMでいいよ!あとはみつばたんにきけばおk!」って全力で丸投げされたのでやってみました。

とっても簡単です。
例えば、以下の様なonとoffのイメージがあるとしましょう。

1.まずは元となるCheckBoxを配置し、右クリック、テンプレートの編集、コピーして編集を行います。

2.オブジェクトパネルにCheckBoxが構成されているオブジェクトが配置されています。

3.ひとまず邪魔なものは削除しましょう。

4.次に状態パネルからCheckedを選択します。状態パネルが無い場合は上部メニューにあるウィンドウから出してください。
これで指定したコントロールの状態になった時の見せ方を編集できます。Checkedだと、CheckBoxにチェックが入った状態ですね。

5.あとはImageを2つおいて、Checkedの時はOff.pngがソースになっているImageのOpacityを0にします。
Uncheckedの指定も同様に、状態からUncheckedを選択して、On.pngはソースになっているImageのOpacityを0にします。

6.ビルドしてみましょう。クリックでon/offが切り替わります。

IsEnableの状態も設定したければ状態パネルからIsEnableの状態で見た目を編集してやればいいですよ。
ね、VSMなんて簡単でしょ!

その41:TextTrimmingプロパティを使ってみよう

連載:0から始めるExpression Blend 4 再入門

これ知らなかったのですが、TextBlockにはTextTrimmingプロパティという便利なプロパティがあります。
TextTrimmingプロパティを設定すると、TextBlockのサイズからはみ出したTextを...に丸めてくれます。
早速使ってみましょう。

まずは、SampleDataSetを使って、適当な文字列を生成します。

つぎにお馴染みのItemTemplateの編集を行います。

オブジェクトパネルの詳細にあるTextTrimmingプロパティからWordEllipsisを選択します。

すると、英文を解釈して、TextBlockのWidthからはみ出るテキストには...が追加されます。

これまで、こういったことはコンバータを書かないといけないかなぁと思っていたのですが、いやぁ便利ですね。

その40:DataStoreChangedTriggerを使ってみる

連載:0から始めるExpression Blend 4 再入門

引き続き、アメリカ上空からお届けしております。蜜葉です。
いや、いんたぁねっとがないから暇とかそういうわけじゃないんですよ(

今回はDataStoreChangedTriggerを試してみましょう。
前回のTimerTriggerのサンプルに追記します。
前回はボタンをタップすると、数字がカウントアップされていくサンプルでした。


これに続いて、ボタンの数字が10になったらイベントが発火されるサンプルを作成してみます。
とりあえずTextBlockを1つおいてみましょう
こんなかんじ。


つぎに、このTextBlockのOpacityを0にして、見えないようにします。


Opacityが設定できたら、ChangePropertyActionをTextBlockに設置します。
プロパティパネルのトリガーを新規作成して、DataStoreChangedTriggerを選択します。

Property1が変わったときに、Property1が10だったら、TextBlockのOpacityを5秒掛けて100%にします。
パネルでみるとこんなかんじ。


実行してみましょう。ボタンをタップして、10秒待つと、TextBlockがアニメーションで表示されます。

その39:TimerTriggerをつかってみる

連載:0から始めるExpression Blend 4 再入門

ただいま0から始めるExpression Blend をシアトルからお届けしております!

これまで、ビヘイビアの挙動や振る舞いについてはいくつかご紹介しましたが、そういえばTriggerについてはあんまり紹介してなかったですね。

というわけで、しばらくはTrigger回でもやりますか。

Triggerはデフォルトでいろいろ用意されていて、いろんなタイミングでビヘイビアを発火させることができます。



今回はTimerTriggerを使ってみましょう。
TimerTriggerは名前の通り、ビヘイビアで設定した処理をくるくる一定時間まわし続けるトリガーです。
まずはボタンを1つ用意して、SetDataStoreを設置します。こんなかんじですね。

つぎに、オブジェクトパネルからChangePropertyActionを選択し、プロパティパネルのトリガー欄から新規作成をクリックします。


そのなかからTimerTriggerを選択します。


すると、トリガー欄のプロパティが変更されました。


今回はボタンをタップすると、タイマーが実行されて1秒ごとにインクリメントされるようにしてみましょう。

まずは、DataStoreにNumber型のプロパティを1つ作成します。
データストアパネルの新しいデータの作成をクリックします。


で、こんなかんじに設定ですね。


ボタンのContentにDataStoreのProperty1をバインディングしましょう。
Contentが0になります。


次に、ChangePropertyActionを以下のように設定します。

Trigger / EventName:ボタンがタップされたら
Trigger / MillsecondsPerTicks:1000 msごとに
Trigger / TotalTicks:永遠に
共通プロパティ / プロパティ:Property1に
共通プロパティ / Value:1
共通プロパティ / Increment:追加する

こんなかんじですね。


実行してみましょう。ボタンを1度タップすると、1秒ごとに数字がカウントアップされるはずです。

結果のxamlはこうなります。

<phone:PhoneApplicationPage
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
	xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:ec="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions"
	mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"
	x:Class="WindowsPhoneApplication29.MainPage"
	FontFamily="{StaticResource PhoneFontFamilyNormal}"
	FontSize="{StaticResource PhoneFontSizeNormal}"
	Foreground="{StaticResource PhoneForegroundBrush}"
	SupportedOrientations="Portrait" Orientation="Portrait"
	shell:SystemTray.IsVisible="True">

	<!--LayoutRoot は、すべてのページ コンテンツが配置されるルート グリッドです-->
	<Grid x:Name="LayoutRoot" Background="Transparent" DataContext="{Binding Source={StaticResource DataStore}}">
		<Grid.RowDefinitions>
			<RowDefinition Height="Auto"/>
			<RowDefinition Height="*"/>
		</Grid.RowDefinitions>

		<!--TitlePanel には、アプリケーションの名前とページ タイトルが含まれています。-->
		<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
			<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
			<TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
		</StackPanel>

		<!--ContentPanel - 追加のコンテンツを配置します-->
		<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
			<Button Content="{Binding Property1}" VerticalAlignment="Top" d:LayoutOverrides="Width" Height="173" Margin="0,121,0,0">
				<i:Interaction.Triggers>
					<ec:TimerTrigger EventName="Tap">
						<ec:SetDataStoreValueAction PropertyName="Property1" TargetObject="{Binding Mode=OneWay, Source={StaticResource DataStore}}" Increment="True" Value="1"/>
					</ec:TimerTrigger>
				</i:Interaction.Triggers>
			</Button>
		</Grid>
	</Grid>
</phone:PhoneApplicationPage>

ちなみにこれ、DataStoreを使わずにChangePropertyActionで直接Contentを書き換えようとすると落ちましたw
DataStoreを使うと、型を指定してデータを作って、しかもバインディングがいいかんじに型変換してくれるので便利ですね。

その38:Expression BlendでDataStoreを作成する。

連載:0から始めるExpression Blend 4 再入門

Expression Blendを使えばパネルからデータストアを作成することができます。
試しに利用してみましょう。

1.データタブから新しいデータストアを作成します。

2.データストアに名前をつけます。

3.できたデータストアを編集します。

4.名前や初期値、型を設定します。

5.適当にボタンを置いて、ContentにBindingしてみましょう。

6.データフィールドから、Bindingする要素を選択します。

7.ボタンに0が表示されました。


このDataStoreはxamlxaml.csからできています。
DataStore.xaml

<!--
      *********    このファイルを編集しないでください     *********
      このファイルはデザイン ツールにより作成されました。
      このファイルに変更を加えるとエラーが発生する場合があります。
-->
<DataStore:DataStore xmlns:DataStore="clr-namespace:Expression.Blend.DataStore.DataStore" Num="0" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" />

DataStore.xaml.cs

//      *********    このファイルを編集しないでください     *********
//      このファイルはデザイン ツールにより作成されました。
//      このファイルに変更を加えるとエラーが発生する場合があります。
namespace Expression.Blend.DataStore.DataStore
{
	using System;
	using System.Collections.Generic;

	public class DataStoreGlobalStorage
	{
		public static DataStoreGlobalStorage Singleton;
		public bool Loading {get;set;}
		private List<WeakReference> registrar; 

		public DataStoreGlobalStorage()
		{
			this.registrar = new List<WeakReference>();
		}
		
		static DataStoreGlobalStorage()
		{
			Singleton = new DataStoreGlobalStorage();
		}

		public void Register(DataStore dataStore)
		{
			this.registrar.Add(new WeakReference(dataStore));
		}

		public void OnPropertyChanged(string property)
		{
			foreach (WeakReference entry in this.registrar)
			{
				if (!entry.IsAlive)
				{
					continue;
				}
				DataStore dataStore = (DataStore)entry.Target;
				dataStore.FirePropertyChanged(property);
			}
		}
		
		public bool AssignementAllowed
		{
			get
			{
				// Only assign from loading once
				if(this.Loading && this.registrar.Count > 0)
				{
					return false;
				}
				
				return true;
			}
		}

		private double _Num = 0;

		public double Num
		{
			get
			{
				return this._Num;
			}

			set
			{
				if(!this.AssignementAllowed)
				{
					return;
				}
				
				if (this._Num != value)
				{
					this._Num = value;
					this.OnPropertyChanged("Num");
				}
			}
		}
	}

	public class DataStore : System.ComponentModel.INotifyPropertyChanged
	{
		public event System.ComponentModel.PropertyChangedEventHandler PropertyChanged;
		
		public void FirePropertyChanged(string propertyName)
		{
			this.OnPropertyChanged(propertyName);
		}

		protected virtual void OnPropertyChanged(string propertyName)
		{
			if (this.PropertyChanged != null)
			{
				this.PropertyChanged(this, new System.ComponentModel.PropertyChangedEventArgs(propertyName));
			}
		}

		public DataStore()
		{
			try
			{
				System.Uri resourceUri = new System.Uri("/WindowsPhoneApplication23;component/DataStore/DataStore/DataStore.xaml", System.UriKind.Relative);
				if (System.Windows.Application.GetResourceStream(resourceUri) != null)
				{
					DataStoreGlobalStorage.Singleton.Loading = true;
					System.Windows.Application.LoadComponent(this, resourceUri);
					DataStoreGlobalStorage.Singleton.Loading = false;
					DataStoreGlobalStorage.Singleton.Register(this);
				}
			}
			catch (System.Exception)
			{
			}
		}

		private double _Num = 0;

		public double Num
		{
			get
			{
				return DataStoreGlobalStorage.Singleton.Num;
			}

			set
			{
				DataStoreGlobalStorage.Singleton.Num = value;
			}
		}
	}
}


このC#から分かるようにDataStoreをデータパネルから作成すると、DataStoreに対して自動的にOnPropertyChangedやINotiyPropertyChangedが実装されています。

次に、SetDataStoreValueActionを使ってみましょう。
SetDataStoreValueActionをボタンに設置します。

クリックされたらDataStoreのNumを1増やすように設定します。
Incrementにチェックをいれるとその分値を増やすビヘイビアになります。

実行してみましょう。
ボタンを押すたびに値が増えていくことが確認できます。

その37の補足:”Inkscapeから素材を作成して、Expression Blendで扱うまで”の罠って?

連載:0から始めるExpression Blend 4 再入門

やまきさんにツッコミを頂いたので補足します。

結論からいうと、このxamlはBlendにインポート機能が無かった時代に作られたWPF向けのXAMLです。

具体的に中を見てみましょう。

Expression Blendにaiでインポートしたペンギンのxamlです。

<Canvas x:Name="penguin" HorizontalAlignment="Left" Height="365.6" UseLayoutRounding="False" VerticalAlignment="Top" Width="376.8">
	<Path Data="F1M309.309,373.904C309.309,373.466,309.668,373.103,310.105,373.103C310.547,373.103,310.906,373.466,310.906,373.904C310.906,374.345,310.547,374.705,310.105,374.705C309.668,374.705,309.309,374.345,309.309,373.904z M153.594,350.302C153.305,349.545,153.66,347.92,154.387,346.693C156.281,343.482,156.043,342.716,153.105,342.627C149.516,342.513,146.684,341.638,146.313,340.525C146.141,340.013,147.555,338.806,149.453,337.849C153.895,335.611,153.785,335.759,152.246,334.056C150.98,332.662,151.309,332.564,160.316,331.693C172.563,330.513,177.793,328.962,178.289,326.369C178.832,323.541,177.102,320.111,173.738,317.341C170.488,314.662,168.531,314.361,146.906,313.228C137.086,312.712,136.91,312.673,137.16,310.88C137.359,309.462,136.871,308.869,134.961,308.205C133.609,307.732,132.508,307.115,132.508,306.826C132.512,305.505,141.156,301.904,144.32,301.904C146.184,301.904,147.707,301.763,147.707,301.591C147.707,301.42,145.719,297.916,143.289,293.806C133.293,276.884,124.363,247.306,122.121,223.693C121.676,218.97,121.309,209.306,121.309,202.22C121.305,168.548,126.188,143.712,138.129,116.611C140.359,111.556,139.973,109.74,135.617,104.795C131.668,100.306,124.68,96.572,114.488,93.505C105.445,90.783,104.586,90.06,107.34,87.474C109.258,85.673,110.195,85.502,120.574,85.048C131.531,84.568,131.816,84.509,135.129,82.037C147.75,72.611,150.844,71.314,160.574,71.38C171.68,71.451,180.133,74.619,187.543,81.482C195.289,88.662,201.078,100.837,202.574,113.103C203.273,118.822,204.129,120.822,210.402,131.388C223.34,153.181,226.738,163.291,232.516,197.158C234.109,206.505,234.316,207.052,238.098,212.048C249.918,227.662,264.504,266.353,264.504,282.103C264.508,285.076,264.195,287.505,263.816,287.505C263.438,287.505,262.117,285.255,260.887,282.505C259.656,279.755,256.602,274.052,254.098,269.837C249.602,262.252,234.176,239.423,231.984,237.103C229.953,234.959,229.332,237.705,229.32,248.896C229.313,255.459,228.543,265.431,227.293,275.123C225.863,286.244,225.516,291.201,226.094,292.279C227.273,294.482,230.926,296.9,241.25,302.306C246.293,304.947,250.551,307.533,250.715,308.056C251.395,310.259,246.168,311.529,233.121,312.326C206.004,313.99,200.922,315.048,195.52,320.173C192.359,323.17,191.328,325.525,190.457,331.712C189.77,336.599,188.102,338.65,182.359,341.681C176.996,344.505,161.52,350.295,157.117,351.119C154.695,351.572,154.023,351.42,153.594,350.302z M153.594,350.302"
Fill="#FF333333" Height="303.327" Canvas.Left="105.956" Stretch="Fill" Canvas.Top="71.378" Width="204.95"/>
</Canvas>


一方こちらがInkscapeからxamlに出力したデータです。

<Viewbox xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Stretch="Uniform">
<Canvas Name="svg2985" Width="471" Height="457">
<Canvas.Resources/>
<!-- Unknown tag: metadata -->
<!-- Unknown tag: sodipodi:namedview -->
<Canvas Name="g3013">
<Canvas.RenderTransform>
<TranslateTransform X="0.70416038" Y="-10.562404"/>
</Canvas.RenderTransform>
<Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path3015" Fill="#FF333333">
<Path.Data>
<PathGeometry Figures="m 385.92935 478.6937 c 0 -0.55 0.45 -1 1 -1 0.55 0 1 0.45 1 1 0 0.55 -0.45 1 -1 1 -0.55 0 -1 -0.45 -1 -1 z m -194.6392 -29.50216 c -0.36318 -0.94642 0.0821 -2.97754 0.98944 -4.5136 2.36967 -4.01153 2.06753 -4.97143 -1.60024 -5.08392 -4.48692 -0.13762 -8.02713 -1.2317 -8.49129 -2.6242 -0.21427 -0.64279 1.55237 -2.14819 3.92586 -3.34534 5.54869 -2.79865 5.41248 -2.61357 3.4883 -4.73976 -1.58101 -1.74699 -1.16967 -1.86744 10.08947 -2.95452 15.30696 -1.4779 21.8476 -3.41572 22.4671 -6.65642 0.67572 -3.53477 -1.48481 -7.82069 -5.68957 -11.2866 -4.06219 -3.34841 -6.51046 -3.72353 -33.53987 -5.13892 -12.27599 -0.64283 -12.49431 -0.69539 -12.18233 -2.93299 0.24737 -1.77415 -0.36128 -2.51511 -2.75 -3.34782 -1.68722 -0.58817 -3.0666 -1.36288 -3.06529 -1.72158 0.006 -1.64921 10.81183 -6.15217 14.76347 -6.15217 2.32878 0 4.23415 -0.17599 4.23415 -0.39109 0 -0.2151 -2.48402 -4.59476 -5.52004 -9.73257 -12.49808 -21.15028 -23.66121 -58.12413 -26.46014 -87.63972 -0.55998 -5.90514 -1.01852 -17.98377 -1.01898 -26.8414 -0.002 -42.0905 6.09845 -73.13634 21.02821 -107.01149 2.78542 -6.32003 2.30336 -8.58845 -3.13905 -14.77136 -4.93708 -5.60881 -13.67584 -10.27766 -26.41481 -14.1126 -11.30173 -3.40227 -12.37406 -4.3067 -8.93584 -7.53674 2.39735 -2.25219 3.57219 -2.46762 16.54708 -3.03414 13.69351 -0.5979 14.04906 -0.67147 18.19004 -3.76388 15.77539 -11.78083 19.64501 -13.40143 31.80904 -13.32165 13.88047 0.091 24.44831 4.05069 33.70833 12.63015 9.68232 8.97072 16.92025 24.19426 18.79262 39.52649 0.87273 7.1466 1.94283 9.6466 9.78198 22.85294 16.17142 27.24343 20.41997 39.87928 27.64311 82.21476 1.99344 11.68375 2.24877 12.36474 6.97861 18.61271 14.77481 19.51708 33.00477 67.88001 33.00855 87.56959 7.1e-4 3.7125 -0.38726 6.75 -0.86215 6.75 -0.47489 0 -2.12288 -2.8125 -3.66221 -6.25 -1.53932 -3.4375 -5.35697 -10.56349 -8.48366 -15.83553 -5.6217 -9.47898 -24.90237 -38.01478 -27.64451 -40.91447 -2.53901 -2.68487 -3.31468 0.74719 -3.33087 14.73776 -0.009 8.20609 -0.97151 20.66822 -2.53097 32.78648 -1.78866 13.89935 -2.22273 20.09606 -1.50203 21.4427 1.47433 2.75481 6.03964 5.77462 18.94729 12.53306 6.30253 3.3 11.62538 6.5361 11.82855 7.19134 0.85318 2.75151 -5.68159 4.33757 -21.98867 5.33687 -33.89597 2.07717 -40.25268 3.40327 -47.00388 9.80573 -3.94837 3.74441 -5.23982 6.68929 -6.32714 14.42778 -0.85776 6.1047 -2.94332 8.67063 -10.12473 12.45679 -6.70174 3.53327 -26.04915 10.76838 -31.55317 11.79954 -3.02694 0.56708 -3.86525 0.3727 -4.39976 -1.02021 z" FillRule="NonZero"/>
</Path.Data>
</Path>
</Canvas>
</Canvas>
</Viewbox>

素直にCanvasでくくられているだけでなく、ViewBoxでもくくられています。
またPath.Dataも入れ子で書かれています。
ではこのxamlをコピーして、既存のxamlファイルにペーストしてどうなるか試してみましょう。

無効なXAMLといわれました。

エラーを見るとFiguresで引っかかっているようです。

一応SilverlightにもFiguresがありますが、"m ~~~~ z"でスタートポイントとエンドポイントを設定する書き方はできません。
http://msdn.microsoft.com/ja-jp/library/bb980098(v=vs.95).aspx
この書き方はWPFなら可能のようです。
http://msdn.microsoft.com/en-us/library/ms752293.aspx

そもそも蜜葉がInkscapeを触ってたのは3、4年前でSL1.0の頃です。
その頃からXAML書き出しはあったので、このXAML書き出しはWPF用だと考えられます。

いまではBlendにAiのインポート機能についたので、pdfにして、拡張子aiに変えて、インポートするのがスマートだと思います。
WPFでもSLでもWPでも、Blendがいい感じのPathコントロールにしてくれるはず!

どっかまちがってたらおしえてください!

その37:Inkscapeから素材を作成して、Expression Blendで扱うまで

連載:0から始めるExpression Blend 4 再入門

「ねぇねぇ、みつばたん。みつばたん普段素材どやってつくってんのー?あたしアプリつくりたいんだけど素材作るのに苦労しちゃってー。。。」
「ほむほむ、普段はillustratorつかってますよー」
「えーでもあたしそんなお高いのもってないー。なんかフリーでInkscapeっていうの見つけたんやけど、あれじゃだめー?」
「また、えらく懐かしいものを!」


はい、蜜葉もillustratorが手に入るまで、というか高校時代はどっぷりOSSを使ってコンテンツ制作をしていました。なのでInkscapeは昔だいぶ使ってたのです。Blendがなかった頃にはInkscapeでデザインしてPathの値をXAMLに直書きとかしてました。


Inkscapeとはillustratorとおなじく、ベクター形式のファイルを作るドローツールです。DTPのためのソフトウェアですね。OSSで開発されています。
ラスター形式の画像編集ソフトだとGimpが有名ですね。よくPhotoshopと比較されています。


今回はillustratorがない人のためにInkscapeで素材を(しかも簡単に!)作成して、それをExpression Blendで利用するまでをご紹介します。


まずはInkscapeをダウンロードします。exe形式のインストーラがあるのでそれでいいでしょう。
今回はver 0.48.2を利用しています。
http://inkscape.org/index.php?lang=ja




では、素材作成を試してみましょう。

1.Googleなどで適当に素材になりそうなファイルを探します。
WPアプリ開発でよく利用されるシルエット画像を探してみましょう。
この時、ライセンスに気をつけてください。クリエイティブ・コモンズとかあると嬉しいですね。
こんなJPEG画像を使ってみます。写真でもかまいませんが、シルエットがはっきりしてるものほどよいです。
でもってサイズも大きければ大きいほどよいです。

2.画像をペイントなどで必要な部分だけきりとります。これをすると後が楽です。
こんなかんじ。

3.ここまで出来たら、Inkscapeを立ち上げます。さきほど作成した画像を”ファイル->インポート”からインポートします。

とりあえず埋め込みを選択します。

4.読み込めたら、必要であれば適当に拡大します。

5.左のメニューバーから黒矢印をクリックし、画像を選択した状態で”パス->ビットマップをトレース”を選択。

6.プロパティを変えながらプレビューを更新し、うまく出来たらOKをクリックします。

7.作成したパス以外、すべて削除します。

8.”ファイル->名前をつけて保存”から任意の名前でPDFで保存します。
ダイアログ中にXAMLとかありますが罠です。

9.さらにダイアログが出るので、"テキストをパスに変換"にチェックをつけて保存します。(一応)

10.できたPDFファイルの拡張子を.aiに変更します。

11.あとは前に紹介したように、ファイルからAIファイルをインポートします。

12.見事にInkscapeで作成したPathデータがBlendにインポートされました。
インポートするとCanvas->Pathの階層になります。

13.あとはサイズを整えて、Ellipseで囲って、EllipseのStrokeとPathのFillをPhoneContrastBackgroundColorに指定してやれば、あっという間にペンギンアイコンの完成ですね。
Path化するとColorResourceでテーマ対応できるので素敵ですね。



illustratorがあれば、ビットマップのデータをもっと綺麗にPathにトレースすることができます。
また、ラスターデータの感覚でPathオブジェクトを消しゴムで編集できるので便利です。
ただまぁ、Inkscapeでもトレース時のプロパティ設定さえうまく指定してやれば、綺麗にPath化されます。
もっとも、Pathぐらい1から引けて当然だろ!っていう方はBlendでもPath引けるので大丈夫ですね!



ぶれんどでなんか疑問あったら@ください。 ブログのネタにします((

このように、画像編集初心者でも、方法さえ知っていればそこそこに素材は作れます。
また、Windows Phone Apps Art GalleryにはWindows Phoneアプリ開発に限定されているもののたくさんの素材があります。
http://msdn.microsoft.com/ja-jp/windowsphone/hh544699
一方で開発者がなかなか手に入らないのが効果音やBGMといったサウンド素材です。
その辺もArt Galleryに出ればいいなー。