20章:10 行でズバリ!! リスト アイテムの表現 (C#)

    作成2013.04.16

     10 行でズバリ!! リスト アイテムの表現 (C#)は下記の参照元情報からほぼ完全な作成方法の説明と解説を参照できます。

  1. 参照元情報
     10 行でズバリ!! リスト アイテムの表現 (C#)は
    「10 行でズバリ!! リスト アイテムの表現 (C#)」にジャンプする
     作成方法の詳細は上記を参照願います。


  2. 10 行でズバリ!! コントロールのテンプレート化と再利用 (C#)の完成ファイル
     10 行でズバリ!! リスト アイテムの表現 (C#)の作成の解説とおりに作業を実施すると、C#プロジェクトファイル群が完成しますが、 ここでは、VBで作成したプログラムをC#言語に変換を基本とします。
     完成ファイルは以下からダウンロードできます。
     ダウンロード後は解凍してから使用してください。
      [10 行でズバリ!! リスト アイテムの表現 (C#)]をダウンロードする。
     解凍すると「20MyListbox」フォルダーがあります。
    注(1)「20MyListbox」フォルダーの「MyListbox.sln」ファイルをダブルクリックすると「Express 2012 for Windows Desktop」が起動します。
    注(2)メニューの「ウインド」_「ウインドレイアウトのリセット」で標準に戻ります。
    注(3)「ソリューションエクスプローラ」ウインドウ内の「MainWindow.xaml」をダブルクリックすると「デザイン」が表示されます。
    注(4)メニューの「表示」_「コード」を選択するとコードが表示されます。
    注(5)「MyListbox.sln」の動作確認は「デバッグ」_「デバッグ開始」で実行します。デバッグ機能を用いて動作確認を行います。


  3. MyListbox.slnの実行
    (1)「Express 2012 for Windows Desktop」のデバッグ機能を使用します。
    (2)「デバッグ」_「デバッグ開始」を選択します。
    (3)操作画面が表示されます。
    (4)動作確認はありません。
    (6)クローズボックスで終了します。


  4. 新規プロジェクトの作成
    (1)MainWindow.xamlのデザイン設定
     新規プロジェクトを作成すると「デザイナー」にはMainWindow.xamlが自動生成されます。MainWindow.xamlのデザイン設定はVBのMainWindow.xamlのコピー&ペーストで完成します。

    (2) MainWindow.xaml.csコード
     基本コードが自動生成されます。


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

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


  7. MainWindow.xaml.csの全コード
     コードはありません。


  8. MainWindow.xaml.csコードの解説
     コードはありません。


    感想:
    (1)VB とC#は同じです。







21章:10 行でズバリ !! コントロール間の連携 (C#)に行く。

トップページに戻る。