次の方法で共有

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

  • [アーティクル]

このページは WPF プロジェクトにのみに適用

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

Noteメモ :

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

ここで説明する手順に従うには、Microsoft Visual Studio 2010 、Microsoft SQL Server 2008、および AdventureWorks サンプル データベースをインストールする必要があります。AdventureWorks サンプルの入手方法については、MSDN の「AdventureWorks のサンプル データベースとサンプルのインストール Cc294789.xtlink_newWindow(ja-jp,Expression.40).png」を参照してください。

他のデータベースから DataTable または DataSet を作成することもできます。その場合は、使用するデータに合わせて、このトピックの 1 番目と 2 番目の作業を調整できます。CLR (または Microsoft .NET Framework) データ ソースを使用している限り、同じ原則が適用されます。

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

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

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

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

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

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

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

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

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

    Noteメモ :

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

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

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

    tip noteヒント :

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

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

    tip noteヒント :

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

tip noteヒント :

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

  1. Visual Studio 2010 の [ソリューション エクスプローラー] でプロジェクト名を右クリックし、[参照の追加] をクリックします。[.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 メソッドをトリガーする便利な方法として、Command を実装できます。

  11. [ファイル] メニューの [新しいアイテム] をクリックします。[新しいアイテム] ダイアログ ボックスで [クラス] をクリックします。[名前] ボックスに、「DelegateCommand.cs」と入力します。

  12. 新しいページで、CTRL キーを押しながら A キーを押してすべてのコンテンツを選択し、DELETE キーを押します。次のコードをコピーし、上記で作成したページに貼り付けます。

    namespace AWDataSource
{
    using System;
    using System.Windows.Input;

    ///
    /// DelegateCommand is a simplified version of ICommand in WPF. You can wrap one of these around any method,
    /// and thus bind any command on any WPF object to your method.
    ///
    /// DelegateCommand also supports an IsEnabled property that you can use to turn the command on and off.
    ///
    public sealed class DelegateCommand : ICommand
    {
        // Type signature of the method that DelegateCommand works with - returns void, no arguments.
        public delegate void SimpleEventHandler();

        // Remember the method so that it can be called at the right time.
        private SimpleEventHandler handler;

        // Maintain the enabled state.
        private bool isEnabled = true;

        // Simple constructor: Pass in the method that needs to be called when the command executes.
        public DelegateCommand(SimpleEventHandler handler)
        {
this.handler = handler;
        }

        #region ICommand implementation

        // Executing the command is as simple as calling the method.
        void ICommand.Execute(object arg)
        {
 this.handler();
        }

        // Saying whether the command can be executed.
ICommand.CanExecute(object arg)
        {
            return this.IsEnabled;
        }

        // This is the event that the command architecture of WPF listens to so it knows when to update
        // the UI on command enable/disable.
        public event EventHandler CanExecuteChanged;
        #endregion

        // Public visibility of the isEnabled flag - note that when it is set, the event must be raised
        // so that WPF knows to update any UI that uses this command.
        public bool IsEnabled
        {
            get { return this.isEnabled; }
            set
            {
this.isEnabled = value;
 this.OnCanExecuteChanged();
            }
        }

        // Simple event propagation that makes sure that someone is listening to the event before raising it.
        private void OnCanExecuteChanged()
        {
            if (this.CanExecuteChanged != null)
            {
 this.CanExecuteChanged(this, EventArgs.Empty);
            }
        }
    }
}

    [ファイル] メニューの [保存] をクリックします。

    DelegateCommand.cs ファイルのコードを使用して、任意のコマンドをメソッドにバインドできます。

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

    private DelegateCommand getDataCommand;

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

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

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

    public DelegateCommand GetDataCommand { get { return getDataCommand; } }

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

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

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

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

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

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

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

    tip noteヒント :

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

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

    Caution note注意 :

    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.40).png、[オブジェクト データ ソースの作成] の順にクリックします。

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

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

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

    tip noteヒント :

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

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

    オブジェクトをアクティブ化せずに選択することもできます。

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

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

    tip noteヒント :

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

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

    tip noteヒント :

    上記の操作の結果を確認するには、[オブジェクトとタイムライン] パネルにある 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] をダブルクリックし、アートボード上にボタンを描画します。表示されるドロップダウン リストの [Button] をクリックします。

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

    tip noteヒント :

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

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

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

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

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

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

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

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

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

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

    tip noteヒント :

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

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

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

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

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

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

    tip noteヒント :

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

  27. [オブジェクトとタイムライン] パネルで [ListBox] オブジェクトが選択された状態で、[プロパティ] パネルの [レイアウト] で、次の操作を行います。

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

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

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

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

  28. [ツール] パネルで、ImageCc294789.adb61060-da5f-4279-8c0d-3681bfeb145c(ja-jp,Expression.40).png を選択します。

    tip noteヒント :

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

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

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

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

  32. [シーン要素] で、[ウィンドウ] と LayoutRoot を展開し、ListBox ([System.WIndows.Controls.ListBox]) を選択します。

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

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

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

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

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

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

Cc294789.b769099f-ccd9-42ac-97f1-70424dfef1ee(ja-jp,Expression.40).png

Copyright ©2011 by Microsoft Corporation. All rights reserved.