試してみよう : CLR オブジェクト データ ソースの作成

Microsoft Expression Blend では、XML データ ソースと共通言語ランタイム (CLR) オブジェクト データ ソースを操作できます。XML データ ソースは操作が簡単ですが、CLR オブジェクト データ ソースはより複雑です。次の手順では、Expression Blend アプリケーションで CLR データ ソースのデータを表示する方法について説明します。最初の 2 つの作業では、サンプル データベースからデータを取得し、Expression Blend がバインドできる形式にデータを変換します。3 番目の作業では、データにバインドする要素を含む Expression Blend プロジェクトを作成します。

メモ :
Silverlight 2 アプリケーションについては、MSDN ライブラリの「データ連結」を参照してください。

メモ :
ここで説明する手順に従うには、Microsoft Visual Studio 2008、Microsoft SQL Server 2008、および AdventureWorks サンプル データベースをインストールする必要があります。AdventureWorks サンプルの入手方法の詳細については、MSDN の「AdventureWorks のサンプル データベースとサンプルのインストール」を参照してください。 他のデータベースから DataTable または DataSet を作成することもできます。その場合は、使用するデータに合わせて、このトピックの 1 番目と 2 番目の作業を調整できます。CLR (または Microsoft .NET Framework) データ ソースを使用している限り、同じ原則が適用されます。

DataTable の定義と入力

次の手順では、Visual Studio 2008 のクラス ライブラリを作成して、AdventureWorks サンプル データベースのデータを使用して DataTable のインスタンスを設定する方法を説明します。

DataTable を定義して設定するには

1. Visual Studio 2008 で、[ファイル] メニューの [新規作成] をポイントし、[プロジェクト] をクリックします。

2. [新しいプロジェクト] ダイアログ ボックスの [プロジェクトの種類] で、[Visual C#] をクリックします。[テンプレート] で [クラス ライブラリ] をクリックします。新しいプロジェクトに「AWDataSource」と名前を付け、[OK] をクリックします。

   新しいクラス ライブラリ プロジェクトのコードが生成され、Class1.cs ファイルを開いて編集できます。

3. Class1.cs ファイルのパブリック クラス定義名を、「Class1」からさらにわかりやすい「ProductPhotosCollection」に変更します。

4. [ソリューション エクスプローラ] でプロジェクト名 (AWDataSource) を右クリックし、[追加] をポイントして、[新しい項目] をクリックします。

5. [新しい項目の追加] ダイアログ ボックスで、テンプレートの一覧から DataSet を選択し、項目に「ProductPhotos.xsd」と名前を付け、[追加] をクリックします。

   データセットが、スキーマ ファイルとサポートするクラス ファイルの形式でプロジェクトに追加されます。また、スキーマ ファイルを開いて編集できるようになります。

   メモ :
   データセットは、データ テーブルを含むオブジェクトです。一時的にデータをメモリに格納し、アプリケーションの実行に使用できます。詳細については、MSDN の「Visual Studio のデータセットの概要」を参照してください。

6. [サーバー エクスプローラ] で [データ接続] を右クリックし、[接続の追加] をクリックします。

7. [データ ソースの選択] ダイアログ ボックスで、[データ ソース] フィールドに "Microsoft SQL Server (SqlClient)" と表示されます。

   ヒント :
   SQL Server データベースを使用しない場合は、[変更] ボタンをクリックして別のデータ ソースを選択できます。次の手順は、Visual Studio の [データ ソースの選択] ダイアログ ボックスの手順とは一致しません。

8. [サーバー名] フィールドに、AdventureWorks データベースがインストールされている SQL Server のインスタンスの名前を入力します。

   ヒント :
   AdventureWorks データベース以外の SQL Server データベースを使用する場合は、その SQL Server データベースがインストールされているサーバー名を選択します。

9. [サーバーにログオンする] で、SQL Server のインスタンスにログオンするときに必要な認証方法を選択します。この情報が不明なときは、サーバー管理者に問い合わせてください。[Windows 認証] では現在のログオン資格情報が使用されます。[SQL Server 認証] では、データベースにアクセス権を持つように設定されたアカウントのユーザー名とパスワードが必要です。

10. [データベースへの接続] で AdventureWorks データベースを選択します。データベース名は、ログオン資格情報が正しく、AdventureWorks データベースがコンピュータにインストールされていて、コンピュータが SQL Server を実行している場合にのみ表示されます。

11. [接続の確認] ボタンをクリックします。接続の確認が成功しない場合は、SQL Server 管理者に問い合わせてください。

12. [OK] をクリックしてデータ接続の作成を完了します。[サーバー エクスプローラ] の "データ接続" ノードの下に、「<servername>.AdventureWorks.dbo」という新しい接続が表示されます。<servername> はサーバーの名前です。

13. [サーバー エクスプローラ] の新しい <servername>.AdventureWorks.dbo 接続ノードを展開し、Tables ノードを展開して、ProductPhoto テーブルを探します。デザイン画面に ProductPhotos.xsd ファイルを開いた状態で、[サーバー エクスプローラ] の ProductPhoto テーブルをデザイン画面にドラッグします。これで、AdventureWorks データベースに接続し、ProductPhoto テーブルのコンテンツを返すことができる、型指定されたデータセットが作成されました。

14. Class1.cs ファイルの ProductPhotosCollection クラスに、次のメソッドを追加します。

    private void GetData()
        {
            ProductPhotosTableAdapters.ProductPhotoTableAdapter da =
                new ProductPhotosTableAdapters.ProductPhotoTableAdapter();
            ProductPhotos.ProductPhotoDataTable dt = da.GetData();
        }
    

    ProductPhotosTableAdapters 名前空間は、ProductPhotos DataSet を作成したときに Visual Studio によって生成された ProductPhotos.Designer.cs ファイルで定義されています。これで、アプリケーションの実行時のデータで ProductPhotos DataTable のインスタンスに入力するメソッドが作成されました。

15. F6 キーを押してプロジェクトをビルドし、エラーがないことを確認します。

先頭に戻る

データ コレクションの WPF コレクションへの適用

次の手順では、Visual Studio 2008 でクラス ライブラリを作成し、DataTable から ObservableCollection にデータを変換して、Expression Blend (または Windows Presentation Foundation (WPF) を使用する任意のアプリケーション) でデータをバインドできるようにする方法について説明します。ProductPhoto クラスを定義してテーブルの行にあるデータを表し、ProductPhotos のコレクションをプライベート メンバとして ProductPhotosCollection に追加して、クラス外のロジックからアクセスできるようにパブリック アクセサ (get メソッド) を追加します。

ヒント :
前述の作業を実行すると、AdventureWorks の ProductPhoto データベース テーブルのデータを処理する DataTable インスタンスが作成されます。DataTable または DataSet を他のデータ ソースから入力した場合は、含まれるデータに合わせて、次の手順でデータ テーブル名とフィールド名を調整できます。

データ コレクションを WPF コレクションに適用するには

1. Visual Studio 2008 の[ソリューション エクスプローラ] でプロジェクト名を右クリックし、[参照の追加] をクリックします。[.NET] タブで、WindowsBase アセンブリを選択します。WindowsBase アセンブリが表示されない場合は、[参照] タブを選択し、%システムドライブ%\Program Files\Reference Assemblies\Microsoft\Framework\v3.0 フォルダで WindowsBase.dll アセンブリを検索することもできます。

2. [OK] をクリックします。WindowsBase アセンブリには System.Collections.Object.ObservableCollection クラスが実装されています。

3. Class1.cs ファイルの先頭に、次のステートメントを追加します。

   using System.Collections.ObjectModel;
   

4. また、Class1.cs ファイルで、AWDataSource 名前空間に次の ProductPhoto クラス定義を追加し、クラスを操作できるようにします。

   public class ProductPhoto { }
   

5. 次のメンバを ProductPhotosCollection クラスに追加します。

   private ObservableCollection<ProductPhoto> productPhotos =
       new ObservableCollection<ProductPhoto>();
   

6. 次のアクセサ メソッドを、ProductPhotosCollection クラスに追加します。

   public ObservableCollection<ProductPhoto> ProductPhotos
   { get { return this.productPhotos; } }
   

   次の手順では、ID、変更したデータ、および 2 つの写真を、DataTable から ObservableCollection にコピーします。

7. [ソリューション エクスプローラ] でプロジェクト名を右クリックし、[参照の追加] をクリックします。参照を PresentationCore アセンブリに追加します。

8. Class1.cs ファイルの先頭に、次のステートメントを追加します。

   using System.Windows.Media;
   using System.Windows.Media.Imaging;
   

9. メンバを ProductPhoto クラスに追加し、クラスを次のようにします。

   public class ProductPhoto
       {
           // Public Accessors to the private properties.
           public int ID { get { return id; } }
           public ImageSource ThumbNailPhoto { get { return thumbNailPhoto; } }
           public ImageSource LargePhoto { get { return largePhoto; } }
           public DateTime ModifiedDate { get { return modifiedDate; } }
   
           // Constructor.
           public ProductPhoto(int id, byte[] thumbNailPhoto, byte[] largePhoto,
               DateTime modifiedDate)
           {
               this.id = id;
               this.thumbNailPhoto = ByteArrayToImageSource(thumbNailPhoto);
               this.largePhoto = ByteArrayToImageSource(largePhoto);
               this.modifiedDate = modifiedDate;
           }
   
           // Private properties.
           private int id;
           private ImageSource thumbNailPhoto;
           private ImageSource largePhoto;
           private DateTime modifiedDate;
   
           // Supporting method.
           private ImageSource ByteArrayToImageSource(byte[] data)
           {
               BitmapImage image = null;
               if (null != data)
               {
                   image = new BitmapImage();
                   image.BeginInit();
                   image.StreamSource = new System.IO.MemoryStream(data);
                   image.EndInit();
               }
               return image;
           }
       }
   

10. 次のコードを ProductPhotosCollection クラスの GetData メソッドの最後に追加し、メソッドが DataTable を ObservableCollection にコピーするようにします。

    productPhotos.Clear();
       foreach (ProductPhotos.ProductPhotoRow row in dt)
       {
           productPhotos.Add(new ProductPhoto(
               row.ProductPhotoID,
               row.ThumbNailPhoto,
               row.LargePhoto,
               row.ModifiedDate));
       }
    

    ここで、ProductsPhotosCollection.GetData メソッドをトリガする便利な方法として、コマンド を実装できます。

11. [ソリューション エクスプローラ] でプロジェクト名を右クリックし、[追加] をクリックして、[既存の項目] をクリックします。

12. [既存項目の追加] ダイアログ ボックスで、Expression Blend のサンプル フォルダである %システム ドライブ%\Program Files\Microsoft Expression\Blend\Samples\<言語>\ColorSwatch から DelegateCommand.cs ファイルを検索し、[追加] をクリックします。

13. [ColorSwatch] の名前空間を使用する名前空間名 (AWDataSource) に変更します。DelegateCommand.cs ファイルのコードを使用して、任意のコマンドをメソッドにバインドできます。

14. Class1.cs ファイルの ProductPhotosCollection クラスに、次のメンバを追加します。

    private DelegateCommand getDataCommand;
    

15. 次のコンストラクタを ProductPhotosCollection クラスに追加して、コマンドを初期化します。

    public ProductPhotosCollection()
        {
            getDataCommand = new DelegateCommand(delegate() { GetData(); });
        }
    

16. 最後に、次のアクセサ メソッドを ProductPhotosCollection クラスに追加して、コマンドを公開します。

    public DelegateCommand GetDataCommand { get { return getDataCommand; } }
    

17. F6 キーを押してプロジェクトをビルドし、エラーがないことを確認します。これで、Expression Blend (または任意の WPF) アプリケーションのデータ ソースとして使用できるクラスが作成されました。このクラスは ProductPhotosCollection、または同等のクラス (独自に定義した場合) です。

先頭に戻る

Expression Blend のデータ ソースへのバインド

次の手順では、データ ソースにバインドされている ListBox コントロールがある、単純な Expression Blend アプリケーションを作成する方法について説明します。このアプリケーションでは、"マスタ-詳細" 表示という一般的なユーザー インターフェイス デザイン パターンを使用します。左側のウィンドウはマスタ ウィンドウと呼ばれ、製品一覧が表示されます。このウィンドウで製品を選択すると、製品の詳細情報が詳細ウィンドウという右ウィンドウに表示されます。一方のウィンドウで要素を選択したときに他方のウィンドウ コンテンツを更新する処理は、コントロール間でデータの同期を使用して実現できます。

プロシージャを Expression Blend のデータ ソースにバインドするには

1. Expression Blend で、[ファイル] メニューの [新しいプロジェクト] をクリックします。

2. [プロジェクトの新規作成] ダイアログ ボックスで、[WPF アプリケーション (.exe)] プロジェクト タイプを選択します。 デザインしている内容をビルドして実行できる Microsoft Windows ベースのアプリケーションのプロジェクトが作成されます。もう 1 つのオプションである [WPF コントロール ライブラリ] プロジェクトは、他の Windows ベース アプリケーションで使用するコントロールのデザインに使用できます。

3. [名前] ボックスに、「AWProductPhotos」と入力します。この手順には手書きのコードはないため、[言語] は既定値のままにします。

4. [OK] をクリックします。Expression Blend に新しいプロジェクトが読み込まれ、編集できるようになります。

   ヒント :
   既にプロジェクトを開いていると、新しいプロジェクトを開く前に現在のプロジェクトを保存または破棄することを確認するダイアログ ボックスが表示される場合があります。

5. 新しいプロジェクトがメモリに読み込まれたら、[ファイル] メニューの [すべて保存] をクリックして、ディスクに保存します。[名前] ボックスに AWProductPhotos と入力されていることを確認し、[OK] をクリックします。

   注意 :
   Expression Blend の操作時に加えた変更はメモリには反映されますが、ハード ディスクには反映されません。そのため、早めに、また頻繁にファイルを保存してください。詳細については、「プロジェクトおよびファイルの管理」を参照してください。

6. [プロジェクト] メニューの [参照の追加] をクリックします。

7. [参照の追加] ダイアログ ボックスで、このトピックの 2 番目の作業の最後にビルドした AWDataSource.dll ファイルを参照して選択し、このファイルに対する参照を追加します。通常、AWDataSource.dll ファイルは、作成した AWDataSource プロジェクトの bin/Debug フォルダにあります。

8. [OK] をクリックします。AWDataSource.dll がプロジェクトに追加されます。[プロジェクト] パネルの [ファイル] の下にある References ノードを展開すると、AWDataSource.dll への参照が表示されます。

9. [プロジェクト] パネルの [データ] の下にある [+ CLR オブジェクト] ボタンをクリックします。

10. [CLR オブジェクト データ ソースの追加] ダイアログ ボックスで、AWDataSource ノードを展開し、ProductPhotosCollection を選択して、[OK] をクリックします。

    [プロジェクト] の [データ] の下に、ProductPhotosCollectionDS というデータ ソースが追加されます。ProductPhotosCollectionDS データ ソースは、参照した CLR クラスのインスタンス構造を表します。ProductPhotosCollectionDS と ProductPhotosCollection を展開すると、構造が表示されます。この作業の後半の手順では、[プロジェクト] パネルの [データ] の下にあるデータをアートボードにドラッグして、新しいコントロールを作成します。

11. [組み合わせ] パネルの [オブジェクトとタイムライン] の下にある LayoutRoot ダブルクリックしてアクティブ化します。要素をアクティブ化すると、影付きの境界ボックスが名前の周りに表示されます。

    ヒント :
    要素に子要素を追加する場合、または他の特殊な操作を行う場合、[組み合わせ] パネルの [オブジェクトとタイムライン] の下の親要素をダブルクリックし、子要素を追加します。このアクションはアクティブ化と呼ばれます。アクティブ化した要素は、要素名の周りが影付きの境界ボックスで囲まれます。 要素のプロパティを変更する場合、[組み合わせ] パネルの [オブジェクトとタイムライン] の下にある要素名をクリックします。このアクションは選択と呼ばれます。選択した要素は、背景色がハイライトされます。 要素をアクティブ化せずに選択することもできます。

12. ツールボックスで [選択内容] ツール をクリックします。アートボードの LayoutRoot の上部にある濃いルーラー領域にマウスを移動します。列ルーラーがポインタに従って移動し、クリックしたときに新しい列デバイダを配置する場所を示します。

13. クリックすると新しい列デバイダが作成され、左側の列と右側の列が同じ幅になります。左側の列には、製品写真のサムネイルの一覧が表示され、右側の列には選択した項目を表す大きいサイズの写真が表示されます。列デバイダが LayoutRoot 内に表示されます。

    ヒント :
    アートボードの LayoutRoot 要素全体を表示するために、ズーム アウトすることもできます。ズーム アウトするには、アートボードの下部のテキスト ボックス にズーム値を入力する方法、ズーム値の横にある矢印をクリックする方法、または Ctrl キーを押しながらマウス ホイールを回転する方法があります。

14. アートボードの LayoutRoot の左側にある濃いルーラー領域にポインタを移動します。クリックして新しい行デバイダを作成し、一番上の行サイズをボタンに合わせます。一番上の行の横に表示される開いた南京錠アイコン をクリックすると、行が固定の高さにロックされます。

    ヒント :

    前の手順で説明したアクションの結果を確認するには、[組み合わせ] パネルの [オブジェクトとタイムライン] の下にある LayoutRoot を右クリックし、[XAML の表示] をクリックします (Extensible Application Markup Language つまり XAML を表示する場合)。アートボードが XAML 表示に切り替わり、LayoutRoot コードがハイライトされます。より見やすくするには、[ウィンドウ] メニューの [パネルを隠す] をクリックします (F4 キーまたは Tab キーを押します)。 <Grid.ColumnDefinitions> セクションと <Grid.RowDefinitions> セクションが、LayoutRoot を表す <Grid> 要素に追加されています。Width 属性と Height 属性では、各列サイズの比率が一定に保たれることを示すスター サイズが使用されます。たとえば、"2*" の Width にすると、幅 が "*" に設定された列サイズの 2 倍の列が作成されます。ロックした行では高さが固定であるため、スター サイズは使用されません。 XAML の確認が終わったら、[デザイン] 表示に切り替え、パネルを復元します (F4 キーまたは Tab キーを押します)。

15. アートボードの左上のグリッド セルに、[プロジェクト] パネルの [データ] の下にある (ProductPhotosCollection の下から) GetDataCommand をドラッグします。

16. 表示されるドロップダウン リストの Button をクリックします。

17. [データ バインドの作成] ダイアログ ボックスの [フィールドの選択] で [Command] を選択し、[OK] をクリックします。これにより、AWDataSource クラスの GetDataCommand アクセサ メソッドにバインドされた新しいボタンが作成されます。実行時にこのボタンをクリックすると、ProductPhotosCollection データ ソース上で GetDataCommand が実行されます。また、このトピックの 2 番目の作業のように、このコマンドの実装によって GetData メソッドが呼び出されます。

    ヒント :
    アートボード上の新しいボタンを移動およびサイズ変更するには、ツールボックスの選択内容ツールをクリックし、アートボードまたは [オブジェクトとタイムライン] の新しいボタンを選択して、アートボード上でガイドを使用します。詳細については、「オブジェクトの位置変更/移動」および「オブジェクトのサイズの変更、または拡大/縮小」を参照してください。

    ヒント :
    データ バインドには、[プロパティ] パネルからアクセスできます。データ バインドを作成した後で [データ バインドの作成] ダイアログ ボックスを再び開くには、最初に [オブジェクトとタイムライン] の下にある [Button] を選択します。次に、[プロパティ] パネルの [その他] で、Command プロパティの横にある [詳細プロパティ オプション]  ボタンをクリックして、[データ バインド] をクリックします。

18. [オブジェクトとタイムライン] で [Button] を選択した状態で、[プロパティ] パネルの [共通プロパティ] の下にある Content プロパティを確認します。テキスト「Get Product Photos」を入力して Content プロパティを設定し、Enter キーを押します。

19. ツールボックスの [選択内容] ツールをクリックし、アートボード上のガイドを使用して、[Button] 要素の移動またはサイズ変更を行います。[Button] を左上のグリッド セルに合わせます。[プロパティ] パネルの [レイアウト] で次のプロパティを設定します。

    • Width プロパティと Height プロパティを [自動] に設定します。

    • Margin プロパティを 0 に設定します。

    • HorizontalAlignment プロパティと VerticalAlignment プロパティを [中央揃え] に設定します。

    このように設定することで、ボタンは Content プロパティのテキストに合わせるために必要なサイズに設定され、グリッド セル内で中央揃えされます。

20. アートボードの左下のグリッド セルに、[プロジェクト] パネルの [データ] の下にある ProductPhotos (配列) をドラッグします。

21. 表示されるドロップダウン リストの ListBox をクリックします。

22. [データ バインドの作成] ダイアログ ボックスの [フィールドの選択] で [ItemsSource] を選択し、[OK] をクリックします。

    ヒント :
    データ テンプレートは、基本的に、データへのバインドを含めることができる UI 要素のツリーです。特定の種類のデータを表示する必要がある場合、適切なデータ テンプレートを選択します。テンプレートでは、要素ツリーの新しいコピーの書式が設定されて、更新データがユーザーに表示されます。ListBox 要素に表示される各アイテムは、2 番目の作業で実装した ProductPhoto という種類のオブジェクトです。

23. [データ テンプレートの作成] ダイアログ ボックスで、[新しいデータ テンプレートと表示フィールド] ラジオ ボタンをクリックします。このオプションによって、[データ] パレットからドラッグしたデータの種類の構造が定義されます (たとえば、ProductPhoto オブジェクトのコレクションの各要素など)。データ構造の任意のパーツをバインドし、データ テンプレートの要素ツリーの外観を定義できるようになります。各データ アイテムは、データ フィールド (StackPanel 要素と TextBlock 要素) を表すときに使用するドロップダウン リストです。さらに、これは、データ アイテムをバインドする要素のプロパティを示すラベルでもあります。

24. ListBox のみに表示するため、[LargePhoto] オプションを選択解除します。

25. ModifiedDate データ フィールドの種類は StackPanel です。このデータの種類に適切な要素の種類にコントロールを変更する必要があります。ModifiedDate の横のドロップダウン リストで、[TextBlock] を選択します。ラベルが自動的に [Text] に変わります。

26. ThumbNailPhoto データ フィールドの種類は ImageSource です。このデータの種類に適切な要素の種類にコントロールを変更する必要があります。ThumbNailPhoto の横のドロップダウン リストで、[Image] を選択します。ラベルが自動的に [Source] に変わります。

27. [OK] をクリックします。これにより、新しい ListBox がドキュメントに挿入されます。

    ヒント :
    データ テンプレートはリソースです。ProductPhotosTemplate データ テンプレートを作成後に変更するには、[リソース] パネルの Window1.xaml ノードを展開し、Window を展開して、ProductPhotosTemplate の横のボタンをクリックします。

28. [組み合わせ] パネルの [オブジェクトとタイムライン] の下にある [ListBox] 要素を選択した状態で、[プロパティ] パネルの [レイアウト] で以下を行います。

    • Width プロパティと Height プロパティを [自動] に設定します。

    • Margin プロパティを 8 に設定します。

    • HorizontalAlignment プロパティと VerticalAlignment プロパティを [中央揃え] に設定します。

    このように設定することで、ListBox が左下のグリッド セルをほぼ満たすサイズになります。

29. ツールボックスの Image コントロールを選択します。

    ヒント :
    ツールボックスに Image コントロールが表示されない場合、[アセット ライブラリ] ボタン をクリックして検索できます。このギャラリからコントロールを選択すると、コントロールのアイコンが [アセット ライブラリ] ボタンの上のツールボックスに表示されます。

30. アートボードの右下のグリッド セルに、ほぼセル全体を満たすように、新しい Image を描画します。

31. [オブジェクトとタイムライン] で [Image] を選択した状態で、[プロパティ] パネルの [共通プロパティ] の下にある [Source] プロパティを確認します。Source プロパティの名前をクリックし、表示されるドロップダウン リストの [データ バインド] を選択します。

32. [ListBox] 要素のプロパティにデータをバインドするので、[データ バインドの作成] ダイアログ ボックスで、[要素プロパティ] タブを選択します。

33. [シーン要素] の下にある Window と LayoutRoot を展開し、ListBox ([System.WIndows.Controls.ListBox]) を選択します。

34. [表示] ドロップダウン リストの [すべてのプロパティ] を選択します。Source プロパティ (String) とデータの種類が同じプロパティだけでなく、バインドに使用できるすべてのプロパティが表示されます。

35. [プロパティ] の下にある [SelectedItem : (Object)] を選択します。

36. [カスタム パス式を使用する] チェック ボックスをオンにします。既定の式は SelectedItem です。SelectedItem.LargePhoto に変更します。これは、現在選択している ProductPhoto オブジェクトの LargePhoto メンバにバインドしているためです。

37. [完了] をクリックします。

38. [プロジェクト] メニューの [プロジェクトのテスト] をクリックします (または F5 キーを押します)。アプリケーションの起動時には、[Get Product Photos] をクリックしてアプリケーションをテストします。リスト ボックスにデータを読み込むときに、アイテムを 1 つずつ選択し、サイズの大きな写真が右側の列に表示されることを確認します。

完成したアプリケーション

先頭に戻る