画像処理ができるWindows Phoneアプリケーションを作ろう

～ComponentOne Studio for Windows Phoneを活用したアプリ例～

画像表示部分の作成

　では、PictureHubから画像を選択して表示する部分を作成しましょう。MainPage.xamlのXAML定義は次のようになります。

リスト2 MainPage.xamlのXAML記述例

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,0,0" 
      VerticalAlignment="Top" HorizontalAlignment="Left"
      Height="535" Width="456">
    <Image x:Name="C1Sample_Image" Stretch="None" Tap="C1Sample_Image_Tap"  />
    <my:C1ProgressBar x:Name="Now_ProgressBar" IsIndeterminate="True" />
</Grid>

　ContentPanel部分にImageコントロールとC1ProgressBarを設置し、ApplicationBarMenuItemに画像選択用のメニューを追加しています（上記リスト2では、見やすさを考慮し一部コードを省略しています。詳細はサンプルコードを確認ください）。これでWindows Phone全体に画像表示エリアを確保することになります。

　注目すべきプロパティとしては、StretchをNoneにしている点です。なぜこのようなプロパティ値をとるかというと、画像の拡大縮小をImageコントロールまかせにせず、コード内で画面に納まらないときだけ縦横比を維持しつつ、縮小表示のみ（拡大表示は抑止）対応するようにしたいからです。

画面表示関連のコード

リスト3-1 MainPage.xamlのコードビハインドの記述例（Visual Basic）

Partial Public Class MainPage
    Inherits PhoneApplicationPage

    Private IsNewPageInstance As Boolean = False

    ' コンストラクター
    Public Sub New()
        InitializeComponent()
        Me.IsNewPageInstance = True
        Me.ApplicationBar.IsMenuEnabled = True
        Me.Now_ProgressBar.IsIndeterminate = False
    End Sub

    ''' <summary>
    ''' 画像選択
    ''' </summary>
    ''' <param name="sender"></param>
    ''' <param name="e"></param>
    ''' <remarks></remarks>
    Private Sub Choose_Click(sender As System.Object, e As System.EventArgs)
        Me.Now_ProgressBar.IsIndeterminate = True
        Me.ApplicationBar.IsMenuEnabled = False
        App.ViewModel.PictureShow().Execute(New Size(CType(Me.C1Sample_Image.Parent, Grid).ActualWidth, _
                                                     CType(Me.C1Sample_Image.Parent, Grid).ActualHeight))
    End Sub

    ''' <summary>
    ''' 写真取得
    ''' </summary>
    ''' <param name="sender"></param>
    ''' <param name="e"></param>
    ''' <remarks></remarks>
    Private Sub PropertyChanged(sender As Object, e As PropertyChangedEventArgs)
        If e.PropertyName = "Item" Then
            Me.C1Sample_Image.Source = App.ViewModel.PictureItem.ImageSource
            Me.ApplicationBar.IsMenuEnabled = True
            Me.Now_ProgressBar.IsIndeterminate = False
        End If
    End Sub

    ''' <summary>
    ''' ページ遷移時に情報を復元する
    ''' </summary>
    ''' <param name="e"></param>
    ''' <remarks></remarks>
    Protected Overrides Sub OnNavigatedTo(e As System.Windows.Navigation.NavigationEventArgs)
        MyBase.OnNavigatedTo(e)

        If IsNewPageInstance Then
            AddHandler App.ViewModel.PropertyChanged, AddressOf PropertyChanged
        End If
    End Sub
End Class

リスト3-2 MainPage.xamlのコードビハインドの記述例（C#）

using System;
using System.ComponentModel;
using System.Windows;
using System.Windows.Controls;
using Microsoft.Phone.Controls;

namespace CZ1206ImageCS
{
    public partial class MainPage : PhoneApplicationPage
    {
        private Boolean IsNewPageInstance = false;

        // コンストラクター
        public MainPage()
        {
            InitializeComponent();
            this.IsNewPageInstance = true;
            this.ApplicationBar.IsMenuEnabled = true;
            this.Now_ProgressBar.IsIndeterminate = false;
        }

        /// <summary>
        /// 画像選択
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void Choose_Click(System.Object sender, 
            System.EventArgs e)
        {
            this.Now_ProgressBar.IsIndeterminate = true;
            this.ApplicationBar.IsMenuEnabled = false;
            App.ViewModel.PictureShow.Execute(new Size(((Grid)this.C1Sample_Image.Parent).ActualWidth,
                                                       ((Grid)this.C1Sample_Image.Parent).ActualHeight));
        }

        /// <summary>
        /// 写真取得
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void PropertyChanged(System.Object sender, 
            System.ComponentModel.PropertyChangedEventArgs e)
        {
            if (e.PropertyName == "Item")
            {
                this.C1Sample_Image.Source = App.ViewModel.PictureItem.ImageSource;
                this.ApplicationBar.IsMenuEnabled = true;
                this.Now_ProgressBar.IsIndeterminate = false;
            }
        }

        /// <summary>
        /// ページ遷移時に情報を復元する
        /// </summary>
        /// <param name="e"></param>
        protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
        {
            base.OnNavigatedTo(e);

            if (IsNewPageInstance)
            {
                App.ViewModel.PropertyChanged += new PropertyChangedEventHandler(PropertyChanged);
            }
        }
    }
}

　画面上で［画像の選択］メニューをクリックして、Choose_Clickイベントプロシージャを呼び出します。この中では画面上の縦横のサイズをパラメータにして、ViewModelのPictureShow.Executeメソッドを呼び出しています。

　PictureShow.Executeメソッドは、画像選択用の画面を開くだけで実行が終わります。

図2 画像の選択

　画面表示時に自動実行する「OnNavigatedTo」の中でイベントの登録を行っているため、画像を選択した時にはPropertyChangedプロシージャが実行されます。

リスト4-1 画像選択イベントの登録（Visual Basic）

AddHandler App.ViewModel.PropertyChanged, AddressOf PropertyChanged

リスト4-2 画像選択イベントの登録（C#）

App.ViewModel.PropertyChanged += new PropertyChangedEventHandler(PropertyChanged);

　今回のサンプルではApp.ViewModelを経由してPictureModelクラスを使用しています。PictureModelクラスの中ではPictureHubから画像を取得したり、トリミングや色調変換などのロジックも記述したりなどができます。