１８章：チュートリアル17:リスト アイテムの表現(VB)

    作成2013.03.15

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


  2. リスト アイテムの表現
    　リスト アイテムの表現の解説とおりに作業を実施すると、プロジェクトファイル群が完成します。
    　完成ファイルは以下からダウンロードできます。
    　ダウンロード後は解凍してから使用してください。
    　 [リスト アイテムの表現]をダウンロードする。
    　解凍すると「MyListbox」フォルダーがあります。
    注（１）「MyListbox」フォルダーの「MyListbox.sln」ファイルをダブルクリックすると「Microsoft Visual Basic 2010 Express」が起動します。
    注（２）メニューの「ウインド」＿「ウインドレイアウトのリセット」で標準に戻ります。
    注（３）「ソリューションエクスプローラ」ウインドウ内の「MainWindow.xaml」をダブルクリックすると「デザイン」と「XAML」が表示されます。
    注（４）メニューの「表示」＿「コード」を選択するとコードが表示されます。
    注（５）「MyListbox.sln」の動作確認は「デバッグ」＿「デバッグ開始」で実行します。デバッグ機能を用いて動作確認を行います。


  3. MyListboxの実行
    （１）「Microsoft Visual Basic 2010 Express」のデバッグ機能を使用します。
    （２）「デバッグ」＿「デバッグ開始」を選択します。
    （３）MainWindow画面が表示されます。
    （４）画面には、分類、タイトル、URLのみに整理された内容が表示されます。
    （５）クローズボックスで終了します。


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

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

    （３） クラスコード
    Class MainWindow
    End Class
    が自動生成されます。

    （４） その他
    　サンプルのXAMLコードをコピーして、ペーストすると簡単に完成しますが、内容の詳細が理解できません。できるだけデザイナーを使用して、XAMLコードを自動生成すると理解が深まります。
    　ただし、デザイナーの操作だけでは、完全なコードが生成できないようです。最終的にはXAMLコードの仕組みを理解して、コードの修正が必要になるようです。
    　学習のため、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" Width="600" Height="500">
     <ListBox ItemsSource="{Binding}" 
                 ScrollViewer.HorizontalScrollBarVisibility="Auto"
                 VerticalContentAlignment="Stretch" Name="ListBox1">
        <ListBox.DataContext>
            <!-- データ ソースの定義 -->
            <XmlDataProvider 
                    Source="http://www.microsoft.com/japan/msdn/rss.xml" 
                    XPath="/rss/channel/item" />
        </ListBox.DataContext>

        <ListBox.ItemTemplate>
            <!-- データ テンプレートの定義 -->
            <DataTemplate>
                <Border Background="LightBlue" Width="600" CornerRadius="5" Padding="5" Margin="1">
                    <StackPanel>
                        <TextBox Text="{Binding XPath=category}" />
                        <TextBox Text="{Binding XPath=title}" TextWrapping="Wrap"/>
                        <TextBox Text="{Binding XPath=link}" TextWrapping="Wrap"/>
                    </StackPanel>
                </Border>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</Window>


  6. XAMLの階層構造
    <Window>階層1
     <ListBox>階層2-1
        <ListBox.DataContext>階層3-1
            <XmlDataProvider />階層4-1
            Source="http://www.microsoft.com/japan/msdn/rss.xml" 
             XPath="/rss/channel/item"
        </ListBox.DataContext>
        <ListBox.ItemTemplate>階層3-2
            <DataTemplate>階層4-2
                <Border>階層5-2
                    <StackPanel>階層6-2
                        <TextBox/>階層7-2
                        <TextBox/>
                        <TextBox />
                    </StackPanel>
                </Border>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</Window>
    （１）XAMLを理解するには、まずXAMLの階層構造を理解する必要があります。（サンプルは上記のようになります。）
    （２）<ListBox>階層2-1：クラス：項目のリストを表示する Windows コントロールを表します。
    （３）<ListBox.DataContext>階層3-1：プロパティ：FrameworkElement がデータ バインディングに関与するときにそのデータ コンテキストを取得または設定します。
    （４）<XmlDataProvider />階層4-1：クラス：データ バインディングで使用する XML データへの宣言アクセスを有効にします。
    （５）Source="http://www.microsoft.com/japan/msdn/rss.xml"はXMLファイルを指定します。
    （６）XPath="/rss/channel/item"はXMLファイルの階層構造を指定します。
    （７）<ListBox.ItemTemplate>階層3-2：プロパティ：各項目を表示するために使用する DataTemplate を取得または設定します。
    （８） <DataTemplate>階層4-2：クラス：データ オブジェクトのビジュアル構造を記述します。
    （９）<Border>階層5-2：クラス：別のオブジェクトの周囲に境界線、背景、またはその両方を描画します。
    （１０）<StackPanel>階層6-2：クラス：
    （１１） <TextBox/>階層7-2：クラス：

    注：XPath="/rss/channel/item"はXMLファイル毎に異なります。


  7. VBの全コード
    　VBのコードはありません。


    感想：
    　XMLファイルをスマートに表示できるので感心しました。







１９章：チュートリアル18:コントロール間の連携 (VB) に行く。

トップページに戻る。