PR

お花とクラウディアさんを合成して表示するプログラムを作る

2013年5月8日(水)
薬師寺 国安

前回の「デスクトップのクラウディアさんが声で励ましてくれるプログラムを作る」に続き、今回のサンプルも、下記の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]アイコンで現在表示されているファイルが削除される(クリックで拡大)

実際に動かした動画は下記のようになります。スマホで撮影したため、見難い点はご了承願います。

サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。

プロジェクトの作成

VS 2012のメニューから[ファイル(F)/新規作成(N)/プロジェクト(P)]と選択します。
次に、「テンプレート」から「Windows ストア」を選択し、右に表示される項目名から「新しいアプリケーション(XAML)」を選択します。
「名前(N)」に任意のプロジェクト名を指定します。ここでは「ClaudiaWithFlower」という名前を付けています。

ソリューションエクスプローラー内にImagesというフォルダを作って、クラウディアの画像と花の画像を配置しておきます。またリスト1のclaudia.xmlとflower.xmlファイルもClaudiaWithFlowerプロジェクト内に配置しておきます。

リスト1 XML文書ファイル

claudia.xml

  <?xml version="1.0" encoding="utf-8" ?>
  <Claudia>
  <Item small="s_claudia_01.png" Large="claudia_01.png"/>
  <Item small="s_claudia_02.png" Large="claudia_02.png"/>
  <Item small="s_claudia_03.png" Large="claudia_03.png"/>
  <Item small="s_claudia_04.png" Large="claudia_04.png"/>
</Claudia>

flower.xml

  <?xml version="1.0" encoding="utf-8" ?>
  <Flowers>
  <Flower Width="1215" Height="1556">flower_01.png</Flower>
  <Flower Width="1512" Height="1847">flower_02.png</Flower>
  <Flower Width="916" Height="1479">flower_03.png</Flower>
  <Flower Width="1089" Height="1308">flower_04.png</Flower>
  <Flower Width="1181" Height="916">flower_05.png</Flower>
  <Flower Width="1240" Height="930">flower_06.png</Flower>
  </Flowers>

コントロールの配置

ツールボックスからデザイン画面上にCanvasコントロールを1個、Buttonコントロールを2個、ListBoxコントロールを3個、RadioButtonコントロールを2個、Frameコントロールを1個配置します。
書き出されるXAMLコードをリスト2のように編集します。
レイアウトは図7のようになります。

リスト2 書き出され編集されたXAMLコード(MainPage.xaml)

  • (1)プロパティ要素内にKey名がclaudiaListBoxTemplateという要素を配置します。その子要素として要素を配置し、WidthとHeightプロパティの値を指定します。
    SourceプロパティにClaudiaImageをバインドしておきます。更にもう1つKey名がflowerListBoxTemplateという要素を配置し、子要素として要素を配置します。
    WidthプロパティにWidthをバインドし、HeightプロパティにHeightをバインドします。
    SourceプロパティにはFlowerをバインドしています。ここでバインドする名称はVBコード内のクラスで定義されたプロパティ名です。
  • (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という名前の要素を配置します。
    Contentプロパティに「クラウディア前面」と指定します。
    GroupNameにはClaudiaと指定しておきます。
  • (9)backClaudiaRadioButtonという名前の要素を配置します。
    Contentプロパティに「クラウディア背面」と指定します。
    GroupNameにはClaudiaと指定しておきます。
    (8)のGroupNameと同じ名称を指定します。異なった名称を指定すると、複数の要素が選択可能な状態になりますので、注意してください。
  • (10)myFrameという名前の要素を配置しています。
<Page
  x:Class="ClaudiaWithFlower.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:ClaudiaWithFlower"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d">
  <Page.Resources>■(1)
    <DataTemplate x:Key="claudiaListBoxTemplate">■(1)
      <Image Width="58" Height="188" Source="{Binding ClaudiaImage}" Stretch="UniformToFill"/>■(1)
    </DataTemplate>■(1)
    <DataTemplate x:Key="flowerListBoxTemplate">■(1)
      <Image Width="{Binding Width}" Height="{Binding Height}" Source="{Binding Flower}"/>■(1)
    </DataTemplate>■(1)
  </Page.Resources>■(1)
  <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

    <Canvas x:Name="Canvas1" HorizontalAlignment="Left" Height="480" Margin="541,31,0,0" VerticalAlignment="Top" Width="640" Background="#FF040413" />■(2)
    <Button x:Name="saveButton" Style="{StaticResource SaveAppBarButtonStyle}" HorizontalAlignment="Left" Height="89" Margin="697,532,0,0" VerticalAlignment="Top" Width="100" IsEnabled="False"/>■(3)
    <Button x:Name="backButton" HorizontalAlignment="Left" Height="65" Margin="10,10,0,0" VerticalAlignment="Top" Width="78" Style="{StaticResource BackButtonStyle}"/>■(4)
    <ListBox x:Name="claudiaListBox" HorizontalAlignment="Left" Height="727" Margin="88,31,0,0" VerticalAlignment="Top" Width="166"  ItemTemplate="{StaticResource claudiaListBoxTemplate}" />■(5)
    <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)
    <ListBox x:Name="fileListBox" HorizontalAlignment="Left" Height="226" Margin="832,532,0,0" VerticalAlignment="Top" Width="402" FontFamily="Meiryo UI" FontSize="20"/>■(7)
    <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)
    <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"/>■(9)
    <Frame x:Name="myFrame" HorizontalAlignment="Left" Height="763" Margin="65,5,0,0" VerticalAlignment="Top" Width="1291"/>■(10)
  </Grid>
</Page>
図7:各コントロールを配置した(クリックで拡大)

ピクチャライブラリへのアクセス許可

ピクチャライブラリに内に、FlowerAndClaudiaというフォルダを作成して、年月日時分秒.xmlを保存するため、ピクチャライブラリへのアクセス権が必要になります。ソリューションエクスプローラー内のPackage.appxmanifestをダブルクリックして開きます。「機能」タブ内の「画像ライブラリ」にチェックを付けてください。

Think IT会員限定特典
  • お花とクラウディアさん

薬師寺国安事務所

薬師寺国安事務所代表。Visual Basic プログラミングと、マイクロソフト系の技術をテーマとした、書籍や記事の執筆を行う。
1950年生まれ。事務系のサラリーマンだった40歳から趣味でプログラミングを始め、1996年より独学でActiveXに取り組む。1997年に薬師寺聖とコラボレーション・ユニット PROJECT KySS を結成。2003年よりフリーになり、PROJECT KySS の活動に本格的に参加、.NETやRIAに関する書籍や記事を多数執筆する傍ら、受託案件のプログラミングも手掛ける。Windows Phoneアプリ開発を経て、現在はWindows ストア アプリを多数公開中

Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。Microsoft MVP for Development Platforms - Windows Phone Development(Oct 2012-Sep 2013)。Microsoft MVP for Development Platforms - Client Development(Oct 2013-Sep 2014)。Microsoft MVP for Development Platforms-Windows Platform Development (Oct 2014-Sep 2015)。

連載バックナンバー

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています