この手順では、Microsoft Expression Blend で PropertyGrid for Silverlight を使って Silverlight アプリケーションを作成します。C1PropertyGrid コントロールをアプリケーションに追加すると、機能的な標準プロパティウィンドウのようなインターフェイスが完成します。これを使用して、ユーザーは、任意の .NET オブジェクトのプロパティやメソッドを参照したり編集することができます。
プロジェクトをセットアップし、C1PropertyGrid コントロールをアプリケーションに追加するには、次の手順に従います。
Expression Blend で、［ファイル］→［新しいプロジェクト］を選択します。
［新しいプロジェクト］ダイアログボックスで、左ペインからプロジェクトの種類として［Silverlight］を選択し、右ペインから［Silverlight アプリケーション + Web サイト］を選択します。プロジェクトの［名前］と［場所］を入力し、ドロップダウンボックスで［言語］を選択し、［OK］をクリックします。 新しいアプリケーションが作成され、MainPage.xaml ファイルがデザインビューで開きます。
［プロジェクト］ウィンドウに移動し、プロジェクトファイルリストで［参照］フォルダを右クリックします。コンテキストメニューから［参照の追加］を選択し、C1.Silverlight.dll および C1.Silverlight.Extended.dll アセンブリを見つけて選択し、［開く］をクリックします。ダイアログボックスが閉じ、プロジェクトに参照が追加されます。
ツールボックスで、 ［アセット］ボタン（二重山かっこアイコン）をクリックして、［アセット］ダイアログボックスを開きます。
［アセットライブラリ］ダイアログボックスで、左ペインから［コントロール］項目を選択し、右ペインで［C1PropertyGrid］アイコンをクリックします。 ［C1PropertyGrid］アイコンがツールボックスの［アセット］ボタンの下に表示されます。
UserControl のデザイン領域をクリックして選択します。Visual Studio とは異なり Blend では、次の手順に示すように、Silverlight コントロールを直接デザインサーフェスに追加できます。
ツールボックスの［StackPanel］ボタンをダブルクリックして、ページに追加します。［StackPanel］ボタンが表示されない場合は、［Grid］パネルボタンをクリックして StackPanel を選択する必要があります。
［プロパティ］ウィンドウで、StackPanel の次のプロパティを設定します。
Height および Width プロパティを "Auto" に設定します。
Orientation プロパティを Horizontal に設定します。
HorizontalAlignment および VerticalAlignment を Center に設定して、コントロールをパネルの中央に配置します。
［オブジェクトとタイムライン］ペインで StackPanel を選択したまま、ツールボックスの標準［Button］コントロールをダブルクリックしてパネルに追加します。C1PropertyGrid コントロールを使用して、このコントロールのプロパティを設定します。
コントロールを選択し、［プロパティ］ウィンドウで、Name プロパティを "button1"、Width を 75、Height を 290 に設定します。
［オブジェクトとタイムライン］ペインで StackPanel を選択し、ツールボックスの［C1PropertyGrid］アイコンをダブルクリックして、このコントロールをパネルに追加します。
［オブジェクトとタイムライン］ペインで C1PropertyGrid コントロールをクリックし、［プロパティ］ウィンドウに移動して、次のプロパティを設定します。
コード内でコントロールにアクセスできるように、Name を "c1propertygrid1" に設定して名前を付けます。
Width を "250" に、Height を "290" に設定します。
HorizontalAlignment および VerticalAlignment を Center に設定して、コントロールをパネルの中央に配置します。
XAML は次のようになります。
| XAML |
コードのコピー
|
|---|---|
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal"> <Button Width="75" Height="290" Content="ボタン"/> <c1:C1PropertyGrid Height="250" Width="290" HorizontalAlignment="Center" VerticalAlignment="Center"/> </StackPanel> |
|
これで、アプリケーションのユーザーインターフェイスのセットアップは終了しましたが、C1PropertyGrid コントロールには何もコンテンツが入っていません。次の手順では、Button コントロールの特定のプロパティを表示するように C1PropertyGrid コントロールを設定し、さらにアプリケーションにコードを追加して、コントロールに機能を追加します。