[Silverlight][バインディング] Blendを使ってサンプルデータをバインディングする

今回は Visual Studio ではなく、Blendを使用して Silverlightのサンプルアプリケーションを作成します。(ノンコーディングなので、今回の操作はVB.NETもC#も共通です)

まずは Blendを起動し「新規プロジェクト」をクリックします。

Blendを起動

「新しいプロジェクト」ダイアログが開くので、「Silverlightアプリケーション」を選択し[OK]ボタンをクリックします。(名前や場所は自由に付けてください)

サンプルプロジェクトの作成

次に「アセット」タブを選択して、「コントロール」の中からListBoxを見つけ、MainPage.xaml にドラッグ&ドロップをします。ListBoxのサイズは適当に設定しておきます。

ListBoxの配置

ここからサンプルデータの作成に入ります。

最初に「データ」タブを選択します。

次に、どこにサンプルデータを作成するかを選択するのですが今回はプロジェクト全体で使えるようにする「プロジェクト」を選択状態にし、「サンプルデータの作成」ボタンをクリックします。開いているドキュメントだけで使用する場合は「このドキュメント」を選択します。

サンプルデータの作成

「新しいサンプルデータ」をクリックします。

「新しいサンプルデータ」を選択

 

「新しいサンプルデータ」ダイアログが表示されるので、データソース名を入力し[OK]ボタンをクリックします。今回はデフォルトのままとします。

データソース名を設定する

追加したデータソースにはコレクションがあり、2つのプロパティがあることを確認できます。

コレクションとプロパティが2つあることを確認

Collectionにぶら下がっている2つのプロパティの名前を「Img」と「Name」に変更します(プロパティ名を変更するには、表示されているプロパティ名をゆっくりと2回クリックします。文字を入力できるようになるので、元々のプロパティ名を削除して新しい名称を入力します。)

プロパティ名の変更

次に、「Img」と「Name」のデータ型を変更します。

「Img」プロパティは「イメージ型」に変更します。場所には、サンプルで使用するイメージが格納されているフォルダを指定します。サンプルイメージを持っていない場合は空欄にします。

空欄にすると Blendが持っているサンプルイメージが使用されるようになります。

今回は「場所」は空欄にしておきます。

「Img」プロパティのデータ型を「イメージ」に変更

 

「Name」プロパティは、文字列型にし、形式に「名前」を指定します。形式にはいくつか種類があるので、サンプルとしてふさわしいものを選択してください。「名前」を選択した場合は人の名前がサンプルデータとして設定されます。

データ型を文字列型にし、形式に「名前」を設定

 

ここまでできたら、SampleDataSource にある Collection を ListBoxにドラッグ&ドロップします。

CollectionをListBoxにドラッグ&ドロップ

すると、ListBoxにはサンプルデータが表示されます。

サンプルデータが表示されたListBox

それでは、実行してみましょう。

実行例

ブラウザでもサンプルデータが表示されます。

このように、データを一から準備する必要はなく、簡単にサンプルデータを作成することができます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください