画像を円形にトリミングして表示・保存するプログラムを作る

次に、ソリューションエクスプローラー内のMainWindow.xamlを展開して表示される、MainWindow.xaml.vbをダブルクリックしてリスト2のコードを記述します。

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

リスト2　(MainWindow.xaml.vb)

ユーザーがファイルを参照し、ファイルを開き、ファイルを保存する時、名前や拡張子、場所、を選択可能にするUI要素を管理するクラスの含まれる、Windows.Storage.Pickers名前空間をインポートします。

Imports Windows.Storage.Pickers

コーデック（データのエンコードとデコードを双方向に行うことができるソフトウエア)がインストールされているWindows.Graphics.Imaging名前空間をインポートします。Windows.Graphics.Imaging名前空間には、任意の形式でのイメージファイルのデコーディング、編集、およびエンコードが可能なクラスが含まれます。

Imports Windows.Graphics.Imaging

シーケンシャルとランダムアクセスのストリームの読み書きを提供するクラスの含まれる、Windows.Storage.Streams名前空間をインポートします。

Imports Windows.Storage.Streams

基本的な図形を定義するクラスの含まれる、Windows.UI.Xaml.Shapes名前空間をインポートします。

Imports Windows.UI.Xaml.Shapes

System.Runtime.InteropServices.WindowsRuntime名前空間には、マネージコードおよび Windows ランタイムとの相互運用をサポートするクラスが含まれています。

Imports System.Runtime.InteropServices.WindowsRuntime

ファイル、フォルダ、およびアプリケーションの設定を管理するクラスの含まれる、Windows.Storage名前空間をインポートします。

Imports Windows.Storage

コアシステムの機能と、その UI についてのランタイム情報にアクセスするアプリケーションを提供するクラスの含まれる、Windows.UI名前空間をインポートします。

Imports Windows.UI

コンテキストメニューおよびメッセージダイアログボックスに関するクラスの含まれる、Windows.UI.Popups名前空間をインポートします。

Imports Windows.UI.Popups

Public NotInheritable Class MainPage
  Inherits Page

BitmapImageクラスの新しいインスタンスmyBmpメンバ変数を宣言します。

  Dim myBmp As New BitmapImage

ファイルを表すStorageFileクラスのメンバ変数myFileを宣言します。

  Dim myFile As StorageFile

WriteableBitmapクラス型の、myEllpise、myCrop、myCrop2メンバ変数を宣言します。

  Dim myEllipse As WriteableBitmap
  Dim myCrop As WriteableBitmap
  Dim myCrop2 As WriteableBitmap

Colorクラス型のメンバ変数myColorを宣言します。

  Dim myColor As Color

ページがアクティブになった時の処理

画像ファイルを選択するSelectImageプロシージャを実行します。

  Protected Overrides Sub OnNavigatedTo(e As Navigation.NavigationEventArgs)
    ImageSelect()
  End Sub

画像ファイルを選択する処理

FileOpenPickerクラスの新しいインスタンスmyFileOpenPickerオブジェクトを作成します。FileOpenPickerクラスは、ユーザーが選択し、ファイルを開くことのできるUI要素を表すクラスです。

ファイルの表示モードを指定するViewModeプロパティに、サムネイル表示を指定します。サムネイル表示のほかにリスト（List）表示があります。
ファイルを開く最初の場所を設定する、SuggestedStartLocationプロパティにPicturesLibrayを指定しておきます。開くファイルタイプを指定するFileTypeFilter.Addで「アスタリスク」を指定して全てのファイルを指定しておきます。PNGファイルだけを指定する場合は、FileTyleFilter.Add(“.png”)と指定します。”*.png”ではないので注意してください。

PickSingleFileAsynメソッドで、ユーザーが1つのファイルを選択できるように、ファイルピッカーを表示し、変数myFileで参照します。変数myFileがファイルを参照している場合は、新しいBitmapImageクラスのインスタンスmyBmpオブジェクトのSetSourceメソッドにAwait myFile.OpenReadAsyncと指定して、ファイルの内容を読み込むために、現在のファイルを、ランダムアクセスストリームで開きます。

Image1のSourceプロパティにmyBmpオブジェクトを指定します。これで、ファイルピッカーで指定したファイルが表示されます。選択する画像は最大で640×480の画像にしてください。あまり大きい画像を選択すると画像とボタンが重なって表示され、ボタンがクリックできなくなります。

非同期処理で行われるため、メソッドの先頭にAsyncを追加します。Asyncが追加されていると、その処理が非同期で行われることを意味します。

  Private Async Sub ImageSelect()
    Dim myFileOpenPicker As New FileOpenPicker
    myFileOpenPicker.ViewMode = PickerViewMode.Thumbnail
    myFileOpenPicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary
    myFileOpenPicker.FileTypeFilter.Add("*")
    myFile = Await myFileOpenPicker.PickSingleFileAsync()
    If myFile Is Nothing = False Then
      myBmp.SetSource(Await myFile.OpenReadAsync)
      Image1.Source = myBmp
    End If
  End Sub

ドラッグした時の処理

Ellipse1のWidthとHeightを設定します。e.Cumulative.Translation.Xとe.Cumulative.Translation.Yでx-y画面座標を取得します。円形で描かれたWidthとHeightの値を、Ellipse1のWidthとHeightの値に指定します。

  Private Sub ContentPanel_ManipulationDelta(sender As Object, e As ManipulationDeltaRoutedEventArgs) Handles ContentPanel.ManipulationDelta
    Try
      Ellipse1.Width = e.Cumulative.Translation.X
      Ellipse1.Height = e.Cumulative.Translation.Y
    Catch
      Exit Sub
    End Try
  End Sub

タッチを開始した時の処理

Ellipse1のMarginプロパティに、タッチした位置に合わせてEllipse1を移動した位置を指定します。Marginプロパティの書式は下記の通りです。

FrameworkElement.Margin(left,,top,right,buttom)

たとえばMargin=”10”は全てのプロパティが10に設定されます。またMargin=”10,20”はLeftとRightが10、TopとButtonが20に設定されたThicknessとして解釈されます。この場合はleftにe.Position.Xを、topにe.Position.Yの値を指定しています。

Ellipse1のWidthとHeightを0で初期化します。
非表示になっていたEllipse1を表示します。[切り出す]ボタンの使用を可能にします

  Private Sub ContentPanel_ManipulationStarted(sender As Object, e As ManipulationStartedRoutedEventArgs) Handles ContentPanel.ManipulationStarted
    Ellipse1.Margin = New Thickness(e.Position.X, e.Position.Y, 0, 0)
    Ellipse1.Width = 0
    Ellipse1.Height = 0
    Ellipse1.Visibility = Windows.UI.Xaml.Visibility.Visible
    Button1.IsEnabled = True
  End Sub