25章:チュートリアル24:リスト アイテムの表現(VB)

    作成2013.03.26

     ここでは、Silverlight アプリケーション用サンプルコードをWPFアプリケーション用コードに変換します。

  1. 参照元情報
     リスト アイテムの表現(Visual Basic ガイド ツアー)
    「リスト アイテムの表現」にジャンプする
     作成方法の詳細は上記を参照願います。


  2. リスト アイテムの表現
     リスト アイテムの表現の解説とおりにWPFアプリケーションを作成すると、互換性の問題でエラーが発生しますが、僅かな修正で動作するようになります。
     完成ファイルは以下からダウンロードできます。
     ダウンロード後は解凍してから使用してください。
      [リスト アイテムの表現]をダウンロードする。
     解凍すると「25ListItems」フォルダーがあります。
    注(1)「25ListItems」フォルダーの「ListItems.sln」ファイルをダブルクリックすると「Microsoft Visual Basic 2010 Express」が起動します。
    注(2)メニューの「ウインド」_「ウインドレイアウトのリセット」で標準に戻ります。
    注(3)「ソリューションエクスプローラ」ウインドウ内の「MainWindow.xaml」をダブルクリックすると「デザイン」と「XAML」が表示されます。
    注(4)メニューの「表示」_「コード」を選択するとコードが表示されます。
    注(5)「ListItems.sln」の動作確認は「デバッグ」_「デバッグ開始」で実行します。デバッグ機能を用いて動作確認を行います。


  3. ListItems.slnの実行
    (1)「Microsoft Visual Basic 2010 Express」のデバッグ機能を使用します。
    (2)「デバッグ」_「デバッグ開始」を選択します。
    (3)MainWindow画面が表示されます。
    (4標準色がスクロールで表示されます。
    (5)クローズボックスで終了します。


  4. 新規プロジェクトの作成
    (1)新規プロジェクト
     新規プロジェクトを作成すると「デザイナー」にはとXAMLが自動生成されます。

    (2)XAMLコードの作成
     サンプルのXAMLコードをコピーして、ペーストすると完成します。

    (3) クラスコード
    Class MainWindow
    End Class
    が自動生成されます。

    (4) その他
     サンプルのXAMLコードをコピーして、ペーストすると簡単に完成しますが、互換性の問題でエラーが発生します。エラーの原因を修正すると動作するようになります。
     エラーの原因を修正は学習に有効な作業となります。


  5. XAMLの全コード
    <Window x:Class="MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="190" Width="670">
        <Grid x:Name="LayoutRoot" >
            <ListBox x:Name="listColors" Height="120" >
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal" />
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
    
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Grid Width="100">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>
                            <TextBlock Grid.Row="0" Text="{Binding Name}" />
                            <Ellipse Grid.Row="1" Fill="{Binding Brush}"  Height="80"/>
                        </Grid>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </Grid>
    </Window>
    


  6. XAMLのポイント
    (1)<UserControl x:Class="MySilverlightApp.MainPage"が<Window x:Class="MainWindow"に変更となります。  (<Window x:Class="MainWindow"はWPFアプリケーションのデホルトです。)
    (2)<ListBox x:Name="listColors" Height="120" >は"listColors"で定義された色の群をリスト表示します。
    (3)"listColors"はVBコードlistColors.ItemsSource = ColorListで設定されます。(結構難解です。)


  7. Class MainWindowクラスの全コード
    Imports System.Reflection
    Class MainWindow
        Public Sub New()
            ' この呼び出しはデザイナーで必要です。
            InitializeComponent()
            Dim ColorList = From C In GetType(Colors).GetProperties() _
                Select New ColorItem With {.Name = C.Name, .Color = CType(C.GetValue(Nothing, Nothing), Color)}
            listColors.ItemsSource = ColorList
        End Sub
    End Class
    
    Public Class ColorItem
        Private _Name As String
        Private _Color As Color
    
        Public Property Name() As String
            Get
                Return _Name
            End Get
            Set(ByVal value As String)
                _Name = value
            End Set
        End Property
    
        Public Property Color() As Color
            Get
                Return _Color
            End Get
            Set(ByVal value As Color)
                _Color = value
            End Set
        End Property
    
        Public ReadOnly Property Brush() As Brush
            Get
                Return New SolidColorBrush(_Color)
            End Get
        End Property
    End Class
    


  8. Class MainWindowクラスのコード解説
    (1)Text="{Binding Name}" と Fill="{Binding Brush}" に対応するリストデータを作成します。
    (2)図形の色を直接指定できないようです。(ソリッドブラシで指定するようです。)
    (3)かなり難解なコードで完全には理解できません。(なれるに従って理解できるようになるかもしれません。)


    感想:
    (1)表示画面は鮮やかですが、コードは難解です。
    (2)動作はするので、コピーして利用はできそうです。
    (3)十分時間をかければ解読できるかもしれません。






26章:チュートリアル25:コントロール間の連携(VB) に行く。

トップページに戻る。