SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

現役エンジニア直伝! 「現場」で使えるコンポーネント活用術(ComponentOne Studio)

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

 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コンポーネントの追加
図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クラスの豊富な機能が追加できる足がかりを簡単に作ることができます。

次のページ
画像表示部分の作成

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
現役エンジニア直伝! 「現場」で使えるコンポーネント活用術(ComponentOne Studio)連載記事一覧

もっと読む

この記事の著者

初音玲(ハツネアキラ)

 国内SIerのSEでパッケージ製品開発を主に行っており、最近は、空間認識や音声認識などを応用した製品を手掛けています。 個人的には、仕事の内容をさらに拡張したHoloLensなどのMRを中心に活動しています。 Microsoft MVP for Windows Development ブログ:http://hatsune.hatenablog.jp/

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/6628 2012/06/21 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング