次に、ソリューションエクスプローラー内のMainWindow.xamlを展開して表示される、MainWindow.xaml.vbをダブルクリックしてリスト2のコードを記述します。
ロジックコードを記述する
リスト2 (MainWindow.xaml.vb)
ユーザーがファイルを参照し、ファイルを開き、ファイルを保存する時、名前や拡張子、場所、を選択可能にするUI要素を管理するクラスの含まれる、Windows.Storage.Pickers名前空間をインポートします。
1 | Imports Windows.Storage.Pickers |
コーデック（データのエンコードとデコードを双方向に行うことができるソフトウエア)がインストールされているWindows.Graphics.Imaging名前空間をインポートします。Windows.Graphics.Imaging名前空間には、任意の形式でのイメージファイルのデコーディング、編集、およびエンコードが可能なクラスが含まれます。
1 | Imports Windows.Graphics.Imaging |
シーケンシャルとランダムアクセスのストリームの読み書きを提供するクラスの含まれる、Windows.Storage.Streams名前空間をインポートします。
1 | Imports Windows.Storage.Streams |
基本的な図形を定義するクラスの含まれる、Windows.UI.Xaml.Shapes名前空間をインポートします。
1 | Imports Windows.UI.Xaml.Shapes |
System.Runtime.InteropServices.WindowsRuntime名前空間には、マネージコードおよび Windows ランタイムとの相互運用をサポートするクラスが含まれています。
1 | Imports System.Runtime.InteropServices.WindowsRuntime |
ファイル、フォルダ、およびアプリケーションの設定を管理するクラスの含まれる、Windows.Storage名前空間をインポートします。
コアシステムの機能と、その UI についてのランタイム情報にアクセスするアプリケーションを提供するクラスの含まれる、Windows.UI名前空間をインポートします。
コンテキストメニューおよびメッセージダイアログボックスに関するクラスの含まれる、Windows.UI.Popups名前空間をインポートします。
1 | Imports Windows.UI.Popups |
3 | Public NotInheritable Class MainPage |
BitmapImageクラスの新しいインスタンスmyBmpメンバ変数を宣言します。
1 | Dim myBmp As New BitmapImage |
ファイルを表すStorageFileクラスのメンバ変数myFileを宣言します。
1 | Dim myFile As StorageFile |
WriteableBitmapクラス型の、myEllpise、myCrop、myCrop2メンバ変数を宣言します。
1 | Dim myEllipse As WriteableBitmap |
2 | Dim myCrop As WriteableBitmap |
3 | Dim myCrop2 As WriteableBitmap |
Colorクラス型のメンバ変数myColorを宣言します。
ページがアクティブになった時の処理
画像ファイルを選択するSelectImageプロシージャを実行します。
1 | Protected Overrides Sub OnNavigatedTo(e As Navigation.NavigationEventArgs) |
画像ファイルを選択する処理
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が追加されていると、その処理が非同期で行われることを意味します。
01 | Private Async Sub ImageSelect() |
02 | Dim myFileOpenPicker As New FileOpenPicker |
03 | myFileOpenPicker.ViewMode = PickerViewMode.Thumbnail |
04 | myFileOpenPicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary |
05 | myFileOpenPicker.FileTypeFilter.Add("*") |
06 | myFile = Await myFileOpenPicker.PickSingleFileAsync() |
07 | If myFile Is Nothing = False Then |
08 | myBmp.SetSource(Await myFile.OpenReadAsync) |
ドラッグした時の処理
Ellipse1のWidthとHeightを設定します。e.Cumulative.Translation.Xとe.Cumulative.Translation.Yでx-y画面座標を取得します。円形で描かれたWidthとHeightの値を、Ellipse1のWidthとHeightの値に指定します。
1 | Private Sub ContentPanel_ManipulationDelta(sender As Object, e As ManipulationDeltaRoutedEventArgs) Handles ContentPanel.ManipulationDelta |
3 | Ellipse1.Width = e.Cumulative.Translation.X |
4 | Ellipse1.Height = e.Cumulative.Translation.Y |
タッチを開始した時の処理
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を表示します。[切り出す]ボタンの使用を可能にします
1 | Private Sub ContentPanel_ManipulationStarted(sender As Object, e As ManipulationStartedRoutedEventArgs) Handles ContentPanel.ManipulationStarted |
2 | Ellipse1.Margin = New Thickness(e.Position.X, e.Position.Y, 0, 0) |
5 | Ellipse1.Visibility = Windows.UI.Xaml.Visibility.Visible |
6 | Button1.IsEnabled = True |
