次の方法で共有

試してみよう : サンプル SQL データベースからのデータ表示

  • [アーティクル]

This page applies to WPF projects only

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

Cc294789.alert_note(JA-JP,Expression.30).gifメモ :

Microsoft Silverlight アプリケーションについては、MSDN の「Silverlight データ バインディング」を参照してください。
Cc294789.alert_note(JA-JP,Expression.30).gifメモ :

ここで説明する手順に従うには、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"と名前を付け、[追加] をクリックします。

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

    Cc294789.alert_note(JA-JP,Expression.30).gifメモ :

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

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

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

    Cc294789.alert_tip(JA-JP,Expression.30).gifヒント :

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

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

    Cc294789.alert_tip(JA-JP,Expression.30).gifヒント :

    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. Ctrl + Shift + B キーを押してプロジェクトをビルドし、エラーがないことを確認します。

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

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

Cc294789.alert_tip(JA-JP,Expression.30).gifヒント :

前述の作業を実行すると、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\<language>\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. F5 キーを押してプロジェクトをビルドし、エラーがないことを確認します。これで、Expression Blend (または任意の WPF) アプリケーションのデータ ソースとして使用できるクラスが作成されました。このクラスは ProductPhotosCollection、または同等のクラス (独自に定義した場合) です。

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

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

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

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

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

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

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

    Cc294789.alert_tip(JA-JP,Expression.30).gifヒント :

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

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

    Cc294789.alert_caution(JA-JP,Expression.30).gif注意 :

    Expression Blend で作業しているときに加えた変更は自動的にハード ディスクに保存されません。そのため、できるだけ頻繁に手動で保存してください。詳細については、「ソリューション、プロジェクトおよびファイルの管理」を参照してください。

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

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

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

  9. [データ] パネルで、[ライブ ソースの追加] Cc294789.601d2ab6-5e4b-49ab-bb3c-064456dc8184(JA-JP,Expression.30).png、[新しいオブジェクト データ ソースの定義] の順にクリックします。

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

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

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

    Cc294789.alert_tip(JA-JP,Expression.30).gifヒント :

    要素に子要素を追加する場合や、他の特別な操作を行う場合は、[オブジェクトとタイムライン] パネルで親要素をダブルクリックしてから、子要素を追加します。このアクションはアクティブ化と呼ばれます。アクティブ化した要素は、要素名の周りが影付きの境界ボックスで囲まれます。

    要素のプロパティを変更する場合は、[オブジェクトとタイムライン] パネルで要素名をクリックします。このアクションは選択と呼ばれます。選択した要素は、背景色がハイライトされます。

    要素をアクティブ化せずに選択することもできます。

  12. [ツール] パネルで [選択内容] Cc294789.2ff91340-477e-4efa-a0f7-af20851e4daa(JA-JP,Expression.30).png をクリックします。アートボードの LayoutRoot の上部にある濃いルーラーの上にポインターを置きます。列ルーラーがポインターに従って移動し、クリックしたときに新しい列デバイダを配置する場所を示します。

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

    Cc294789.alert_tip(JA-JP,Expression.30).gifヒント :

    アートボードの LayoutRoot 要素全体を表示するために、ズーム アウトすることもできます。ズーム アウトするには、アートボードの下部のテキスト ボックス Cc294789.12524287-c48b-4cfc-b614-01951207239d(JA-JP,Expression.30).png にズーム値を入力する方法、ズーム値の横にある矢印をクリックする方法、または Ctrl キーを押しながらマウス ホイールを回転する方法があります。

  14. アートボードの LayoutRoot の左側にある濃いルーラー領域にポインターを移動します。クリックして新しい行デバイダを作成し、一番上の行サイズをボタンに合わせます。一番上の行の横に表示される開いた錠前アイコン Cc294789.1b4edaf6-b6a8-4498-80dc-949375fa610d(JA-JP,Expression.30).png をクリックすると、行が固定の高さにロックされます。

    Cc294789.alert_tip(JA-JP,Expression.30).gifヒント :

    上記の操作の結果を確認するには、[オブジェクトとタイムライン] パネルにある [LayoutRoot] を右クリックし、[XAML の表示] をクリックします。XAML は、Extensible Application Markup Language の略です。アートボードが [XAML] ビューに切り替わり、LayoutRoot のコードがハイライトされます。より見やすくするには、[ウィンドウ] メニューの [パネルを隠す] をクリックします (F4 キーまたは Tab キーを押します)。

    <Grid.ColumnDefinitions> セクションと <Grid.RowDefinitions> セクションが、LayoutRoot を表す <Grid> 要素に追加されています。Width 属性と Height 属性には、各列サイズの比率が一定に保たれることを示すアスタリスクを使用します。たとえば、Width を "2*" にすると、"*" に設定された列の幅の 2 倍の列が作成されます。ロックした行では高さが固定であるため、アスタリスクは使用できません。

    XAML の確認が終わったら、[デザイン] ビューに切り替え、パネルを復元します (F4 キーまたは Tab キーを押します)。

  15. アートボードの左上のグリッド セルに、[データ] パネルの [ProductPhotosCollection] の下にある [GetDataCommand] をドラッグします。

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

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

    Cc294789.alert_tip(JA-JP,Expression.30).gifヒント :

    アートボードの新しいボタンを移動したりサイズを変更したりするには、まず、[ツール] パネルの[選択内容] ツールをクリックし、アートボードまたは [オブジェクトとタイムライン] パネルの新しいボタンを選択します。アートボードにガイドに沿って、ボタンを移動またはサイズ変更します。詳細については、「オブジェクトの位置変更/移動」および「オブジェクトのサイズの変更、または拡大/縮小」を参照してください。
    Cc294789.alert_tip(JA-JP,Expression.30).gifヒント :

    データ バインドには、[プロパティ] パネルからアクセスできます。データ バインドを作成した後で [データ バインドの作成] ダイアログ ボックスを再び開くには、最初に [オブジェクトとタイムライン] パネルで [Button] を選択します。次に、[プロパティ] パネルの [その他] で、[Command] プロパティの横にある [詳細プロパティ オプション] Cc294789.12e06962-5d8a-480d-a837-e06b84c545bb(JA-JP,Expression.30).png をクリックして、[データ バインド] をクリックします。

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

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

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

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

    • [HorizontalAlignment] プロパティと [VerticalAlignment] プロパティを [Center] に設定します。

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

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

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

  22. [データ バインドの作成] ダイアログ ボックスの [<オブジェクト名> のプロパティ] ドロップダウン リストで [ItemsSource] を選択し、[OK] をクリックします。

    Cc294789.alert_tip(JA-JP,Expression.30).gifヒント :

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

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

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

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

  26. 現在、ThumbNailPhoto データ フィールドの種類は ImageSource となっていますが、このデータ型に合った種類にコントロールを変更する必要があります。[ThumbNailPhoto] の横のドロップダウン リストで、[イメージ] を選択します。ラベルが自動的に [Source] に変わります。

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

    Cc294789.alert_tip(JA-JP,Expression.30).gifヒント :

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

  28. [オブジェクトとタイムライン] パネルで [ListBox] 要素を選択し、[プロパティ] パネルの [レイアウト] で、次の操作を行います。

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

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

    • [HorizontalAlignment] プロパティと [VerticalAlignment] プロパティを [Center] に設定します。

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

  29. [ツール] パネルの [イメージ] Cc294789.adb61060-da5f-4279-8c0d-3681bfeb145c(JA-JP,Expression.30).png をクリックします。

    Cc294789.alert_tip(JA-JP,Expression.30).gifヒント :

    [ツール] パネル にイメージ コントロールが表示されない場合は、[アセット] Cc294789.0d8b8d29-1af9-418f-8741-be3097d76eab(JA-JP,Expression.30).png をクリックして、イメージ コントロールを見つけます。コントロールを選択すると、[ツール] パネルの [アセット] ボタンの下に、コントロールのアイコンが表示されます。

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

  31. [オブジェクトとタイムライン] パネルで [イメージ] を選択し、[プロパティ] パネルの [共通プロパティ] で [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 つずつ選択し、サイズの大きな写真が右側の列に表示されることを確認します。

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

Cc294789.b769099f-ccd9-42ac-97f1-70424dfef1ee(JA-JP,Expression.30).png