MainPage.xamlの編集とコントロールの追加

ツールボックスからButtonコントロールを3個、InkPresenterコントロールを1個、InkPresenterコントロールの子要素として、Imageコントロールを1個配置します。また、ListBoxコントロールを1個、Sliderコントロールを1個も配置します。ListBoxコントロールの背景色にSilver、Foreground(文字色)にNavyを指定します。Sliderコントロールのプロパティの[共通]パネル内の、Maximumに320、SmallChangeに1と指定します。Maximumプロパティには、範囲要素に指定できるMaximumValueを設定します。SmallChangeプロパティには、Valueに対して加算または減算するValueを設定します。書き出されるXAMLコードをリスト2のように編集します。

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

（１）<phone:PhoneApplicationPage.Resources>プロパティ要素内に<DataTemplate>要素を配置し、ListBoxTemplateというキーのテンプレートを定義します。テンプレート内では以下の内容を定義しています。
  2列を作成し、<StackPanel>要素を配置して、OrientaionプロパティにVertical(垂直方向)を指定します。デフォルトはVertical(垂直方向)です。StackPanel内の要素が垂直方向にスタックされます。画像の下に、画像名が表示されることになります。1列目に<Image>要素を配置し、SourceプロパティにfileNameをバインドします。WidthとHeightの値も指定しておきます。2列目には<TextBlock>要素を配置し、Textプロパティに「画像名」をバインドします。ここで指定する名称はVBコード内のクラスで定義するプロパティ名です。
（２）<Grid>を<Canvas>要素に変更しています。
（３）<InkPresenter>要素の子要素として<Image>要素を配置します。
（４）（１）で定義したテンプレートをItemTemplateに指定して、参照させます。
（５）Sliderは、最初は使用不可としておきます。
<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:el="clr-namespace:Microsoft.Expression.Interactivity.Layout;assembly=Microsoft.Expression.Interactions" 
  x:Class="WP71_PhotoChooserTask.MainPage"
  mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
  SupportedOrientations="Portrait" Orientation="Portrait"
  shell:SystemTray.IsVisible="True" Language="ja-JP">
  <phone:PhoneApplicationPage.Resources>　■（１）
    <DataTemplate x:Key="ListBoxTemplate">　■（１）
      <Grid>
        <Grid.RowDefinitions>
          <RowDefinition/>
          <RowDefinition/>
        </Grid.RowDefinitions>
        <StackPanel Orientation="Vertical" Margin="5" HorizontalAlignment="Left">　■（１）
        <Image Source="{Binding fileName}" Width="75" Height="18" Grid.Row="0"/>　■（１）
        <TextBlock Text="{Binding 画像名}" Width="130"/>　■（１）
      </StackPanel>
      </Grid>
    </DataTemplate>
  </phone:PhoneApplicationPage.Resources>
  
  <!--ApplicationBar の使用法を示すサンプル コード-->
  ～コード略～
  
    <!--LayoutRoot は、全てのページ コンテンツが配置されるルート グリッドです-->
  <Canvas x:Name="LayoutRoot" Background="Transparent">　■（２）
        <!--TitlePanel は、アプリケーション名とページ タイトルを格納します-->
    <StackPanel x:Name="TitlePanel"  Margin="12,17,0,28">
      <TextBlock x:Name="ApplicationTitle" Text="マイ アプリケーション" Style="{StaticResource PhoneTextNormalStyle}"/>
    </StackPanel>
   
    <!--ContentPanel - 追加コンテンツをここに入力します-->
    <InkPresenter x:Name="InkPresenter1" Height="296" Width="268" Canvas.Left="43" Canvas.Top="128">　■（３）
      <Image Height="296" HorizontalAlignment="Left" x:Name="Image1" Stretch="Uniform" VerticalAlignment="Top" Width="268" />　■（３）
    </InkPresenter>　■（３）
    <Button Content="画像読み込み" Height="79" x:Name="callImageButton" Width="303" Canvas.Left="24" Canvas.Top="50" />
    <ListBox Height="237" x:Name="ListBox1" Width="134" ItemTemplate="{StaticResource ListBoxTemplate}" Background="Silver" Canvas.Left="326" Canvas.Top="134" Foreground="Navy" />　■（４）
    <Button Content="保存" Height="77" Name="saveButton" Width="394" Canvas.Left="43" Canvas.Top="586" />
    <Slider Height="84" x:Name="Slider1" Width="394" Maximum="320" SmallChange="1" Canvas.Left="43" Canvas.Top="430"  IsEnabled="False"/>　■（５）
    <Button Canvas.Left="43" Canvas.Top="520" Content="全クリア" Height="74" Name="clearButton" Width="394" />
  </Canvas>　■（２）
</phone:PhoneApplicationPage>

全て設定すると図4のようになります。

次に、MainPage.xamlを展開して表示される、MainPage.xaml.vbをダブルクリックしてリスト2のコードを記述します。

ロジックコードを記述する

リスト2　(MainPage.xaml.vb)

Option Strict On

ランチャーやチューザーに関するクラスの含まれる、Microsoft.Phone.Tasks名前空間をインポートします。
Imports Microsoft.Phone.Tasks

仮想ファイルシステムを作成および使用するための型が含まれている、System.IO.IsolatedStorage名前空間をインポートします。分離ストレージによって、安全なクライアント側のストレージが提供されます。
Imports System.IO.IsolatedStorage

曲、アルバム、再生リスト、およびピクチャを列挙、再生、および表示するためのクラスの含まれる、Microsoft.Xna.Framework.Media名前空間をインポートします。ピクチャへのアクセスを提供するMediaLibrayクラスを使用するため、この名前空間のインポートが必要です。
Imports Microsoft.Xna.Framework.Media

Imports System.Windows.Media.Imaging
Imports System.Xml.Linq
  このサンプルでは、アタッチされた要素を、マウスをドラッグのジェスチャに応答して要素の上に再配置する、MouseDragElementBehaviorクラスを使用するため、このクラスの含まれる、Microsoft.Expression.Interactivity.Layout名前空間のインポートが必要です。
Imports Microsoft.Expression.Interactivity.Layout

ImageFilterというクラス内に文字列型の「画像名」と「fileName」というプロパティを定義しておきます。
Public Class ImageFilter
  Public Property 画像名 As String
  Public Property fileName As String
End Class

Partial Public Class MainPage
  Inherits PhoneApplicationPage
 
  ' コンストラクター
  Public Sub New()
    InitializeComponent()
  End Sub

XMLの要素を表すXElementクラス型のメンバ変数xmldocを宣言します。
  Dim xmldoc As XElement
 
  Dim myScale As Double = 1

書き込みおよび更新が可能な BitmapSourceを提供する、WriteableBitmapクラス型のmyWriteableBitmapメンバ変数を宣言します
  Dim myWriteableBitmap As WriteableBitmap

Imageクラス型のメンバ変数createImageを宣言します。
  Dim createImage As Image