PR

ListBox間を画像がアニメーションを伴って行き来する

2011年1月18日(火)
PROJECT KySS

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

次に処理を記述します。

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

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

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

Option Strict On

LINQ to XMLでXMLを処理するクラスの含まれる、System.Xml.Linq名前空間をインポートします。
項目が追加、削除された時やリスト全体が更新された場合に通知する動的なデータコレクションである、ObservableCollection(T)クラスの含まれる、System.Collections.ObjectModel名前空間をインポートします。
Imports System.Xml.Linq
Imports System.Collections.ObjectModel

ImageInfoクラスを定義し、String型の「画像名」プロパティを定義します。
Public Class ImageInfo
    Public Property 画像名 As String
End Class

Partial Public Class SilverlightControl1
    Inherits UserControl

ImageInfo型のObservableCollectionクラスの新しいインスタンス、myImageInfoとmyImageInfo2メンバ変数を宣言しておきます。
    Dim myImageInfo As New ObservableCollection(Of ImageInfo)
    Dim myImageInfo2 As New ObservableCollection(Of ImageInfo)
Dim xmldoc As XElement
    Public Sub New()
        InitializeComponent()
    End Sub

■SilverlightControl1が読み込まれた時の処理
XElement.LoadメソッドでXML文書ファイル(Photo.xml)を読み込みます。読み込んだXML文書から<画像名>要素のコレクションを取得するクエリ(query)を定義します。クエリ(query)を実行します。クエリコレクション内を変数resultで反覆処理しながら、以下の処理を実行します。
Addメソッドで、ImageInfoクラスのプロパティ(「画像名」)に、XMLの要素 (<画像名>)の値を追加します。このプロパティの値が、XAML内の<Image>要素のSourceプロパティにバインドされます。
ListBox1コントロールのItemSourceプロパティに、myImageInfoオブジェクトを指定します。
これで、左のListBoxに画像の一覧が表示されます。
    Private Sub SilverlightControl1_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded
        xmldoc = XElement.Load("Photo.xml")
        Dim query = From c In xmldoc.Descendants("画像名") Select c
        For Each result In query
            With myImageInfo
                .Add(New ImageInfo With {.画像名 = "Image/" & result.Value})
            End With
        Next
        ListBox1.ItemsSource = myImageInfo
    End Sub

■左のListBoxから画像を選択し[>>]ボタンをクリックした場合のパブリックプロシージャ
CallMethodActionアクションのMethodNameに指定するプロシージャであるため、パブリックプロシージャにする必要があります。
左のListBoxで画像が選択されている場合は、以下の処理を実行します。
ListBox1から選択された項目を、ImageInfoクラスにキャストし、ImageInfo型の変数addImageで参照します。ListBox1より選択された画像をAddメソッドでmyImageInfo2オブジェクトに追加します。右のListBox2のItemsSourceプロパティにmyImageInfo2を指定します。ListBox2にListBox1で選択した画像が追加されます。
ListBox1から選択された項目を、ImageInfoクラスにキャストし、ImageInfo型の変数delImageで参照します。
Removeメソッドで、ListBox1より選択された画像をmyImageInfoオブジェクトから削除します。画像の削除されたmyImageInfoオブジェクトをListBox1のItemsSourceに指定します。

    Public Sub AddRightItem()
        If ListBox1.SelectedIndex >= 0 Then
            Dim addImage As ImageInfo = DirectCast(ListBox1.SelectedItem, ImageInfo)
            myImageInfo2.Add(addImage)
            ListBox2.ItemsSource = myImageInfo2

            Dim delImage As ImageInfo = DirectCast(ListBox1.SelectedItem, ImageInfo)
            myImageInfo.Remove(delImage)

            ListBox1.ItemsSource = Nothing
            ListBox1.ItemsSource = myImageInfo
       End If
    End Sub

■右のListBoxから画像を選択し[<<]ボタンをクリックした場合のパブリックプロシージャ
CallMethodActionアクションのMethodNameに指定するプロシージャであるため、パブリックプロシージャにする必要があります。
右のListBoxで画像が選択されている場合は、以下の処理を実行します。
ListBox2より選択された画像のインデックスを変数noに格納しておきます。
ListBox2から選択された項目を、ImageInfoクラスにキャストし、ImageInfo型の変数addImageで参照します。ListBox2より選択された画像をAddメソッドでmyImageInfoオブジェクトに追加します。左のListBox1のItemsSourceプロパティにmyImageInfoを指定します。ListBox1にListBox2で選択した画像が追加されます。
変数noの値に該当する要素を、myImageInfo2オブジェクトよりRemoveAtメソッドで削除します。画像の削除されたmyImageInfo2オブジェクトをListBox2のItemsSourceに指定します。

    Public Sub AddLeftItem()
        If ListBox2.SelectedIndex >= 0 Then
            Dim no As Integer = ListBox2.SelectedIndex

            Dim addImage As ImageInfo = DirectCast(ListBox2.SelectedItem, ImageInfo)
            myImageInfo.Add(addImage)
            ListBox1.ItemsSource = myImageInfo

            myImageInfo2.RemoveAt(no)
            ListBox2.ItemsSource = Nothing
            ListBox2.ItemsSource = myImageInfo2
        End If
    End Sub
End Class

コードが完成したところで、次にMainPage.xamlにSilverlightControl1を取り込みます。

SilverlightControl1をMainPage.xamlに取り込む

MainPage.xamlの要素内にlocalという名前空間を定義します。値には現在のプロジェクト名を指定します。xmlns:local=””と入力すると、一覧が表示されますので、その中から「SL4_FluidMoveBehavior_ListBox」を選択します(図5)。

図5: local名前空間を定義する(クリックで拡大)

次に、要素内に

図6: SiverlightControl1を選択する
<Grid x:Name="LayoutRoot" Background="White">
        <local:SilverlightControl1/>
</Grid>

のように記述します。SilverlightControl1.xamlのデザインが取り込まれます。

ここで一度「ビルド(B)/ソリューションのビルド(B)」を実行してみてください。MainPage.xaml内に画像の追加されたListBoxが表示されます(図7)。

図7: MainPage.xaml内にSilverlightControl1.xamlのデザインが取り込まれ、画像が表示される(クリックで拡大)

次に、ソリューションエクスプローラー内の、SilverlightControl1.xamlを選択し、マウスの右クリックで表示されるメニューの、「Expression Blendを開く(X)」を選択し、Blend4を起動します。

四国の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のWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

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