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

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

　Windows Phoneアプリを作成する際に重要となるポイントは「分かりやすいデザイン」と「直感的な操作感」です。今回は、複数のWindows Phone用コントロールを組み合わせ、さらにXAMLで調整し、ひと目で操作が分かる「画像をトリミングするサンプルアプリ」を作成してみます。

　Windows Phoneアプリは分かりやすいデザインと直感的な操作感が重要です。この2つを両立させるにはWindows Phone用コントロールの組み合わせやXAMLによる修飾が不可欠です。ComponentOne Studio for Windows Phoneを使うときも同様で複数のコントロールを組み合わせることでコンポーネントを使う効果が高まるときがあります。

　そこでDockPanel for Windows Phone（C1DockPanel）、Imaging for Windows Phone（C1Bitmap）、ProgressBar for Windows Phone（C1ProgressBar）およびC1GestureListenerを使って画像をトリミングするサンプルを作成してみたいと思います。

　なお、サンプルとしてはVB版とC#版の両方を用意し、XAML定義を始めとしてそれぞれのコードが対応づけられるようにプロシージャ順やロジックにも配慮してあるので、ご活用ください（CZ1206ImageVB、CZ1206ImageCS）。

コンポーネントの登録

　ComponentOne Studio for Windows PhoneのコントロールをVisual Studioで利用するには、関連する26個のコントロールをツールボックスへ登録が必要です。［ツールボックスアイテムの選択］ダイアログで名前空間でソートし、C1.Phoneで始まるコントロールをすべてチェックしてください。

図1 Windows Phoneコンポーネントの追加

初期準備

アプリ用プロジェクトの準備

　まずは、PictureHubにある写真を画面に表示する部分を作成してみましょう。

　［ファイル］-［新規作成］-［プロジェクト］-［Silverlight for Windows Phone］-［Windows Phoneアプリケーション］の順で選択して、新規にWindows Phoneアプリ用のプロジェクトを作成します。

　プロジェクトが生成されたら、アプリに必要なXAML定義とロジックコードを記述するためのファイルを作成しましょう。クラスを作成する前にファイルを格納する場所として、ソリューションエクスプローラでプロジェクトに［Models］フォルダ、［Viwes］フォルダ、［ViewModels］フォルダ、［Images］フォルダを作成します。そして、MainPage.xamlを［View］フォルダにコピーします。

　このまま実行するとエラーが発生するので、スタートアップ画面であるMainPage.xamlの位置を「MainPage.xaml」から「Views/MainPage.xaml」に変更します。

リスト1 WMAppManifest.xamlの変更例

    ：
<DefaultTask  Name ="_default" NavigationPage="Views/MainPage.xaml"/>
    ：

C1Bitmapの利用方法

　C1BitmapクラスはWindows Phoneのページに直接貼り付けて利用するものではありません。C1BitmapクラスはWritebleBitmapクラスと同じように、ImageコントロールのSourceに指定して利用します。

　つまり、XAML定義を変更しなくてもSourceに指定している部分をC1Bitmapに切り替えれば、既存アプリにC1Bitmapクラスの豊富な機能が追加できる足がかりを簡単に作ることができます。