PanelとDataGridのドラッグ&ドロップ

2010年8月26日(木)
PROJECT KySS

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

ソリューションエクスプローラ内のMainPage.xamlを展開し、MainPage.xaml.vbをダブルクリックしてコード画面を開きます。

リスト3のようにロジックコードを記述します。

リスト3: ロジックコード(MainPage.xaml.vb)

XML to LINQでXMLを処理するクラスの含まれるSystem.Xml.Linq名前空間を読み込んでおきます。ImageコントロールのSourceプロパティに画像を指定するクラスの含まれる、System.Windows.Media.Imaging名前空間を読み込んでおきます。

■ページが読み込まれた時の処理

XElement.LoadメソッドでXML文書ファイル(photo_etc.xml)を読み込みます。

読み込んだXML文書ファイルから、要素のコレクションを取得するクエリ(query)を定義します。queryを実行します。クエリコレクション内を反復処理する変数resultを使って、以下の処理を繰り返し実行します。

新しいImageのインスタンスmyImageオブジェクトを生成します。Width、Heightプロパティに画像のサイズを指定します。Cursorプロパティには手の形が表示されるようHandを指定します。Sourceプロパティには、フォルダ名のImageを連結した、要素の値を相対Uriで指定します。WrapPanel内に表示される画像の余白をMarginプロパティで5に指定します。Tagプロパティに1ずつ増加する変数iの値を持たせておきます。この値は、ドラッグ&ドロップされた画像の「説明」を特定するインデックスとして使用します。

fromWrapPanelコントロールにmyImageオブジェクトを追加します。myImageオブジェクトの上でマウスの左ボタンが押された時(MouseLeftButtonDownイベント時)、myImage_MouseLeftDownプロシジャを実行します。

■画像の上でマウスの左ボタンが押された時の処理

ImageのTagプロパティの値を取得します。取得した値はObject型であるため、CInt関数で整数型に変換して変数noに格納しておきます。

■右側のPanelDragDropTargetコントロールに画像がDropされた時の処理

変数noに該当するインデックスの要素の値を取得します。TextBox1コントロールに、取得した、要素の値を順次追加していきます。Dropした画像の説明が順次表示されていきます。

■ドラッグ先から画像をドラッグ元にドラッグした場合の処理

変数noに該当するインデックスの要素の内容を取得します。Replaceメソッドで、要素の内容を消去します。これで、ドラッグ先の画像がドラッグ元に返されたとき、表示されていた画像の説明は消去されます。

四国のSOHO。薬師寺国安(VBプログラマ)と、薬師寺聖(デザイナ、エンジニア)によるコラボレーション・ユニット。1997年6月、Dynamic HTMLとDirectAnimationの普及を目的として結成。共同開発やユニット名義での執筆活動を行う。XMLおよび.NETに関する著書や連載多数。最新刊は「Silverlight実践プログラミング」両名とも、Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。http://www.PROJECTKySS.NET/

連載バックナンバー

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています