前回の「デスクトップのクラウディアさんが声で励ましてくれるプログラムを作る」に続き、今回のサンプルも、下記のMicrosoftのURLで提供されているクラウディアの画像と音声を使用しています。http://msdn.microsoft.com/ja-jp/claudia00_03.aspx
※なお、利用の際は必ず使用ガイドラインに則ってご利用ください。今回の記事での利用もMicrosoft様より使用許諾をいただいています。
それでは、サンプルの動きを以下で解説します。
まず、気に入ったクラウディアを選択すると画面一杯にクラウディアが表示されます（図1）。
黒い枠内に収まる程度までピンチで縮小してください（図2）。枠内から大幅にはみ出しても問題はありません。
次に花が選択可能になりますので、気に入った花を選択してください。画面一杯に花の画像が表示されます。黒い枠内に収まる程度までピンチで縮小し、クラウディアを花より背面に配置するよう選択してみました（図3）。これも枠から大幅にはみ出しても問題はありません。クラウディアとの比較で大きさを自由に決めてください。
[Save]アイコンをタップすると、情報を記録したXMLファイルが作成され、右下のリストボックスに追加表示されます（図4）。
新しいファイルほど下に追加されますので、スクロールしてください。作成されたファイルを選択すると、クラウディアと花の情報が読み込まれて、たった今作成した状態でクラウディアと画像が表示されます（図5）。
[Delete]アイコンで現在表示されているファイルを削除できます（図6）。
図1：画面一杯にクラウディアが表示された（クリックで拡大）
図2：ピンチで縮小した（クリックで拡大）
図3：選択した花をピンチで縮小した（クリックで拡大）
図4：[Save]アイコンをタップして作成されたファイルがリストボックスに追加された（クリックで拡大）
図5：作成されたファイルを選択してクラウディアと花が表示された（クリックで拡大）
図6：[Delete]アイコンで現在表示されているファイルが削除される（クリックで拡大）
実際に動かした動画は下記のようになります。スマホで撮影したため、見難い点はご了承願います。
VIDEO
サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。
プロジェクトの作成
VS 2012のメニューから[ファイル(F)／新規作成(N)／プロジェクト(P)]と選択します。
ソリューションエクスプローラー内にImagesというフォルダを作って、クラウディアの画像と花の画像を配置しておきます。またリスト1のclaudia.xmlとflower.xmlファイルもClaudiaWithFlowerプロジェクト内に配置しておきます。
リスト1 XML文書ファイル
claudia.xml
1 <?xml version="1.0" encoding="utf-8" ?>
3 <Item small="s_claudia_01.png" Large="claudia_01.png"/>
4 <Item small="s_claudia_02.png" Large="claudia_02.png"/>
5 <Item small="s_claudia_03.png" Large="claudia_03.png"/>
6 <Item small="s_claudia_04.png" Large="claudia_04.png"/>
flower.xml
1<?xml version="1.0" encoding="utf-8" ?>
3<Flower Width="1215" Height="1556">flower_01.png</Flower>
4<Flower Width="1512" Height="1847">flower_02.png</Flower>
5<Flower Width="916" Height="1479">flower_03.png</Flower>
6<Flower Width="1089" Height="1308">flower_04.png</Flower>
7<Flower Width="1181" Height="916">flower_05.png</Flower>
8<Flower Width="1240" Height="930">flower_06.png</Flower>
コントロールの配置
ツールボックスからデザイン画面上にCanvasコントロールを1個、Buttonコントロールを2個、ListBoxコントロールを3個、RadioButtonコントロールを2個、Frameコントロールを1個配置します。
リスト2 書き出され編集されたXAMLコード(MainPage.xaml)
（1）プロパティ要素内にKey名がclaudiaListBoxTemplateという要素を配置します。その子要素として要素を配置し、子要素として
（2）Canvas1という名前の要素を配置します。Widthには640、Heightに480と指定しています。背景色には紺色系統色を指定しています。
（3）saveButtonという名前の要素を配置します。
（4）backButtonという名前の要素を配置します。
（5）claudiaListBoxという名前の要素を配置し、ItemTemplateにStaticResourceを使って（1）で定義したclaudiaListBoxTemplateを参照させます。
（6）flowerListBoxという名前の要素を配置し、ItemTemplateにStaticResourceを使って（1）で定義したflowerListBoxTemplateを参照させます。IsEnabledにFalseを指定して選択不可としています。
（7）fileListBoxという名前の要素を配置しています。
（8）frontClaudiaRadioButtonという名前の要素を配置します。
（9）backClaudiaRadioButtonという名前の要素を配置します。要素が選択可能な状態になりますので、注意してください。
（10）myFrameという名前の要素を配置しています。
02 x:Class="ClaudiaWithFlower.MainPage"
05 xmlns:local="using:ClaudiaWithFlower"
10 <DataTemplate x:Key="claudiaListBoxTemplate">■（1）
11 <Image Width="58" Height="188" Source="{Binding ClaudiaImage}" Stretch="UniformToFill"/>■（1）
13 <DataTemplate x:Key="flowerListBoxTemplate">■（1）
14 <Image Width="{Binding Width}" Height="{Binding Height}" Source="{Binding Flower}"/>■（1）
17 <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
19 <Canvas x:Name="Canvas1" HorizontalAlignment="Left" Height="480" Margin="541,31,0,0" VerticalAlignment="Top" Width="640" Background="#FF040413" />■（2）
20 <Button x:Name="saveButton" Style="{StaticResource SaveAppBarButtonStyle}" HorizontalAlignment="Left" Height="89" Margin="697,532,0,0" VerticalAlignment="Top" Width="100" IsEnabled="False"/>■（3）
21 <Button x:Name="backButton" HorizontalAlignment="Left" Height="65" Margin="10,10,0,0" VerticalAlignment="Top" Width="78" Style="{StaticResource BackButtonStyle}"/>■（4）
22 <ListBox x:Name="claudiaListBox" HorizontalAlignment="Left" Height="727" Margin="88,31,0,0" VerticalAlignment="Top" Width="166" ItemTemplate="{StaticResource claudiaListBoxTemplate}" />■（5）
23 <ListBox x:Name="flowerListBox" HorizontalAlignment="Left" Height="727" Margin="259,31,0,0" VerticalAlignment="Top" Width="261" FontFamily="Meiryo UI" FontSize="20" IsEnabled="False" ItemTemplate="{StaticResource flowerListBoxTemplate}"/>■（6）
24 <ListBox x:Name="fileListBox" HorizontalAlignment="Left" Height="226" Margin="832,532,0,0" VerticalAlignment="Top" Width="402" FontFamily="Meiryo UI" FontSize="20"/>■（7）
25 <RadioButton x:Name="frontClaudiaRadioButton" Content="クラウディア前面" HorizontalAlignment="Left" Height="51" Margin="581,621,0,0" VerticalAlignment="Top" Width="200" GroupName="claudia" FontFamily="Meiryo UI" FontSize="24" Foreground="Gold"/>■（8）
26 <RadioButton x:Name="backClaudiaRadioButton" Content="クラウディア背面" HorizontalAlignment="Left" Height="51" Margin="581,677,0,0" VerticalAlignment="Top" Width="200" GroupName="claudia" FontFamily="Meiryo UI" FontSize="24" Foreground="Gold"/>■（９）
27 <Frame x:Name="myFrame" HorizontalAlignment="Left" Height="763" Margin="65,5,0,0" VerticalAlignment="Top" Width="1291"/>■（10）
図7：各コントロールを配置した（クリックで拡大）
ピクチャライブラリへのアクセス許可
ピクチャライブラリに内に、FlowerAndClaudiaというフォルダを作成して、年月日時分秒.xmlを保存するため、ピクチャライブラリへのアクセス権が必要になります。ソリューションエクスプローラー内のPackage.appxmanifestをダブルクリックして開きます。「機能」タブ内の「画像ライブラリ」にチェックを付けてください。
