次に、[ソリューション・エクスプローラー]内の「MainWindow.xaml」を展開して表示される、「MainWindow.xaml.vb」のコードを記述する。
ここでは、コードが長くなるため今回のテーマと肝となる「画像の合成」「データの一覧表示」部分の解説にとどめている。名前空間の読み込み、メンバー変数の宣言も省略している。全てのコードを見る場合は、サンプルをダウンロードして「MainWindow.xaml.vb」ファイルを見ていただきたい。
- Protected Overrides Async Sub OnNavigatedTo(e As Navigation.NavigationEventArgs)
- Dim myFolder As StorageFolder = Windows.Storage.KnownFolders.PicturesLibrary
- Dim SubFolder = Await myFolder.CreateFolderAsync("TrimingImage", CreationCollisionOption.OpenIfExists)
- myPictureFiles = Await SubFolder.GetFilesAsync
- If myPictureFiles.Count > 0 Then
- allDeleteButton.IsEnabled = True
- deleteButton.IsEnabled = True
- Else
- allDeleteButton.IsEnabled = False
- deleteButton.IsEnabled = False
- End If
- Await AddPhoto()
- MyBase.OnNavigatedTo(e)
- End Sub
以降、上記コードの中身を詳細に見ていこう。
まず、非同期処理で行われるためメソッドの先頭にAsyncを追加している。
次に、ピクチャライブラリにアクセスし、CreateFolderAsyncメソッドで「TrimingImage」というフォルダーを作成する。その際、CreationCollisionOption.OpenIfExistsを指定すると、同名フォルダーがあるときは、そのフォルダー名を返し、ないときは新規に作成する。
CreationCollisionOption Enumerationの詳細については、下記のURLを参照してほしい。
GetFilesAsyncメソッドで「TrimingImage」フォルダー内のファイルを取得し、メンバー変数「myPictureFiles」で参照しておく。
Countプロパティで、そのフォルダー内のファイルの数を取得し、ファイルが存在する場合は、「削除」と「一括削除」ボタンの使用を可能にする。それ以外は使用を不可とする。
切り出した画像が保存されている場合は、GridViewに画像の一覧を表示する、AddPhotoタスクを実行する。
- Private Sub ContentPanel_ManipulationDelta(sender As Object, e As ManipulationDeltaRoutedEventArgs) 'Handles ContentPanel.ManipulationDelta
- 'エラー処理をしていないとトリミング時にエラーが発生する
- Try
- Rectangle1.Width = e.Cumulative.Translation.X
- Rectangle1.Height = e.Cumulative.Translation.Y
- Catch
- e.Handled = False
- Exit Sub
- End Try
- End Sub
ここでは、「e.Cumulative.Translation.X」「e.Cumulative.Translation.Y」でx-y画面座標を取得し、RectangleのWidthとHeightに設定する。矩形で描かれたWidthとHeightの値を、RectangleのWidthとHeightの値に指定するということだ。
- Private Sub ContentPanel_ManipulationStarted(sender As Object, e As ManipulationStartedRoutedEventArgs)
- Rectangle1.Margin = New Thickness(e.Position.X, e.Position.Y, 0, 0)
- Rectangle1.Width = 0
- Rectangle1.Height = 0
- If flag = True Then
- Rectangle1.Visibility = Windows.UI.Xaml.Visibility.Collapsed
- Button1.IsEnabled = False
- Else
- Rectangle1.Visibility = Windows.UI.Xaml.Visibility.Visible
- Button1.IsEnabled = True
- End If
- End Sub
RectangleのMarginプロパティに、タッチした位置に合わせてRectangleを移動した位置を指定する。Marginプロパティの書式は下記の通りだ。
FrameworkElement.Margin(left,,top, right, buttom)
例えば、「Margin="10"」は全てのプロパティが10に設定される。またMargin=”10,20”はLeftとRightが10、TopとBottomが20に設定されたThicknessとして解釈される。
Marginプロパティの値は「New Thickness(Left、Top、Right、Bottom)」と指定する。この場合はleftにe.Position.Xを、topにe.Position.Yの値を指定している。
RectangleのWidthとHeightは「0」で初期化する。
メンバー変数「flag」の値で条件分岐を行う。Trueであった場合、つまり一覧表示されている切り出された画像が画面上に表示されていた場合は、トリミングができないように、Rectangle1を非表示にし、「切り出す」ボタンの使用を不可とする。それ以外の場合は、トリミングを可能にし、「切り出す」ボタンの使用を可能にする。
- Private Sub Rectangle1_ManipulationDelta(sender As Object, e As ManipulationDeltaRoutedEventArgs)
- Rectangle1.Margin = New Thickness(Rectangle1.Margin.Left + e.Delta.Translation.X, Rectangle1.Margin.Top + e.Delta.Translation.Y, 0, 0)
- e.Handled = True
- End Sub
ここでは、矩形の位置をドラッグした移動量分だけ動かす。「e.Delta.Translation.X」「e.Delta.Translation.Y」でx-y画面座標の変化を取得している。「e.Handled=True」と指定して、Gridにイベントが伝わらないようにする。
- Private Async Function SelectImage() As Task
- Dim myFileOpenPicker As New FileOpenPicker
- myFileOpenPicker.ViewMode = PickerViewMode.Thumbnail
- myFileOpenPicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary
- myFileOpenPicker.FileTypeFilter.Add(".png")
- myFileOpenPicker.FileTypeFilter.Add(".jpg")
- myFile = Await myFileOpenPicker.PickSingleFileAsync()
- If myFile Is Nothing = False Then
- flag = False
- FileName = myFile.Path
- myBmp.SetSource(Await myFile.OpenReadAsync)
- Image1.Source = myBmp
- If myBmp.PixelWidth <> 640 OrElse myBmp.PixelHeight <> 480 Then
- Dim myMessage As New MessageDialog("画像サイズは640×480限定です。切り出しはできません。")
- Await myMessage.ShowAsync
- Image1.Source = Nothing
- Button1.IsEnabled = False
- Else
- Button1.IsEnabled = False
- End If
- End If
- End Function
以降、上記コードの中身を詳細に見ていこう。
まず、非同期処理で行われるためメソッドの先頭にAsyncを追加している。
次に、FileOpenPickerクラスの新しいインスタンスmyFileOpenPickerオブジェクトを作成する。FileOpenPickerクラスは、ユーザーが選択し、ファイルを開くことのできるUI要素を表すクラスだ。
ファイルの表示モードを指定するViewModeプロパティにサムネイル表示を指定する。サムネイル表示の他にリスト(List)表示がある。ファイルを開く最初の場所を設定する、SuggestedStartLocationプロパティにピクチャライブラリを指定しておく。
開くファイルタイプを指定するFileTypeFilter.Addで「.png」「.jpg」を指定しておく。PNGファイルを指定する場合は、「FileTyleFilter.Add(".png")」と指定する。"*.png"ではないので、注意してほしい。
PickSingleFileAsynメソッドで、ユーザーが1つのファイルを選択できるようにファイルピッカーを表示し、変数「myFile」で参照する。変数「myFile」がファイルを参照している場合は、メンバー変数「flag」にFalseを指定し、トリミングを可能にしておく。選択された画像のファイルシステムパス名(myFile.Path)を、メンバー変数「FileName」に格納しておく。
新しいBitmapImageクラスのインスタンスmyBmpオブジェクトに、SetSourceメソッドで「Await myFile.OpenReadAsync」と指定して、ファイルの内容を読み込むために、現在のファイルを、ランダムアクセスストリームで開く。
Image1のSourceプロパティにmyBmpオブジェクトを指定する。これで、ファイルピッカーで指定したファイルが表示される。
もし指定したファイルの画像サイズが640×480より大きかった場合は、メッセージを表示し、画像は表示せず、[切り取り]ボタンの使用も不可とする。
また、画像を選択する際、選択をやめてキャンセルした場合も、[切り取り]ボタンの使用は不可としておく。
Copyright © ITmedia, Inc. All Rights Reserved.
Smart & Social 鬯ッ�ッ�ス�ョ�ス�ス�ス�ォ�ス�ス�ス�ス�ス�ス�ス�ェ鬯ョ�ッ陋ケ�コ�ス�サ郢ァ謇假スス�ス�ス�ソ�ス�ス�ス�ス�ス�ス�ス�ス�ス�ス�ス�ス�ス�ス�ス�ス�ス�ス�ス�コ鬯ョ�」陋ケ�ス�ス�ス�ス�オ鬮ォ�エ遶擾スオ�ス�コ�ス�キ�ス�ス�ス�ク�ス�ス�ス�キ�ス�ス�ス�ス�ス�ス�ス�ケ鬮ォ�エ髮懶ス」�ス�ス�ス�「�ス�ス�ス�ス�ス�ス�ス�ス�ス�ス�ス�ス�ス�ス�ス�ウ鬯ッ�ゥ陝キ�「�ス�ス�ス�「�ス�ス�ス�ス�ス�ス�ス�ァ�ス�ス�ス�ス�ス�ス�ス�ス�ス�ス�ス�ス�ス�ス�ス�ュ鬯ッ�ゥ陝キ�「�ス�ス�ス�「鬮ォ�エ髮懶ス」�ス�ス�ス�「�ス�ス�ス�ス�ス�ス�ス�ス�ス�ス�ス�ス�ス�ス�ス�ウ鬯ッ�ゥ陝キ�「�ス�ス�ス�「�ス�ス�ス�ス�ス�ス�ス�ァ�ス�ス�ス�ス�ス�ス�ス�ス�ス�ス�ス�ス�ス�ス�ス�ー