簡易スタイルの使用

Microsoft Expression Blend でアプリケーションのユーザー インターフェイス (UI) をデザインする方法は、単に既定のコントロールやシステム コントロールを使用するだけにとどまりません。コントロールを目的に合わせて適切に動作するように自由にカスタマイズし、スタイルを指定できます。また、Expression Blend のリソースを活用して、他のアプリケーションとは一味違う個性的で魅力的な外観を作り出し、アプリケーションのブランド感を高めたり、アプリケーション全体で UI の統一を図ったりすることが可能です。

メモ :
Expression Blend の簡易スタイルは Microsoft Silverlight 1.0 プロジェクトでは使用できませんが、JavaScript クラスを作成することで再利用可能なコントロールを定義できます。例については、[ヘルプ] メニューの [ようこそ画面] の [サンプル] タブからアクセスできる ButtonGallery サンプルの Button クラスを参照してください。詳細については、Silverlight ラーニング センターのページ (英語の可能性あり) を参照してください。

簡易スタイルとは

簡易スタイルとは、Button コントロールや ListBox コントロールなど、一般的なシステム コントロール群にそのまま適用できるカスタム スタイル リソース一式のことです。システム コントロールのスタイルをその機能を損なわないように変更するには、WPF (Windows Presentation Foundation) のスタイルとテンプレートに関する知識が必要です。そのため、Expression Blend には、これらの簡易スタイル リソースが用意されています。Expression Blend の簡易スタイルは、それだけで完結したリソース一式として適用でき、簡単に手を加えてアプリケーション独自の外観を演出できます。WPF のスタイルやテンプレートについて一から学習する必要はありません。

先頭に戻る

簡易スタイル コントロールの作成

簡易スタイルを使用するには、アセット ライブラリの [コントロール] タブで [簡易スタイル] をクリックします。[すべて表示] チェック ボックスをオンにすると、使用可能な簡易スタイルがすべて表示されます。アセット ライブラリから簡易スタイルを選択すると、その簡易スタイルのアイコンが [アセット ライブラリ] ボタン の上に選択された状態で表示され、アートボードに簡易スタイルをすぐに描画できます。アートボード上に簡易スタイル (SimpleButton など) を描画すると、実際には、SimpleButton スタイルが適用されたシステム コントロール (Button など) のインスタンスが作成されます。

ツールボックスには一部のツールを選択するためのドロップダウン リスト群がありますが、ここから使用できるツールに簡易スタイルを適用する場合は、アセット ライブラリの [コントロール] タブで [簡易スタイル] を選択した状態で [既定として使用] ボタンをクリックします。

使用可能な簡易スタイル コントロールと、それらのコントロールを既定のスタイルとして設定するオプションを表示するアセット ライブラリ

次の表に、使用可能な簡易スタイルと、適用先のコントロールを示します。

簡易スタイル	適用先のコントロール	アイコン
SimpleButton	Button
SimpleCheckBox	CheckBox
SimpleComboBox	ComboBox
SimpleComboBoxItem	ComboBoxItem
SimpleExpander	Expander
SimpleLabel	Label
SimpleListBox	ListBox
SimpleListBoxItem	ListBoxItem
SimpleMenu	Menu
SimpleMenuItem	MenuItem
SimpleProgressBar	ProgressBar
SimpleRadioButton	RadioButton
SimpleRepeatButton	ListBox コントロールの RepeatButton
SimpleScrollBar	ScrollBar
SimpleScrollBarRepeatButtonStyle	ScrollBar コントロールの RepeatButton
SimpleScrollViewer	ScrollViewer
SimpleSeparator	ListBox、Menu、または ToolBar コントロールの Separator
SimpleSlider	Slider
SimpleSliderThumb	Slider コントロールの Thumb
SimpleTabControl	TabControl
SimpleTabItem	TabControl の TabItem
SimpleTextBox	TextBox
SimpleThumbStyle	ListBox コントロールの ScrollBar の Thumb
SimpleTreeView	TreeView
SimpleTreeViewItem	TreeView コントロールの TreeViewItem
SimpleTreeViewItemToggleButton	TreeView コントロールの ToggleButton

先頭に戻る

簡易スタイルの変更

簡易スタイル リソースは、SimpleStyles.xaml というリソース ディクショナリに含まれています。簡易スタイル コントロールをツールボックスからアートボードに追加すると、SimpleStyles.xaml リソース ディクショナリ ファイルがプロジェクトに追加され、すべての簡易スタイル リソースが [リソース] パネルに表示されます。

SimpleStyles.xaml リソース ディクショナリには、簡易スタイルで使用されるブラシ リソースやその他のテンプレートが含まれています。簡易スタイルは、次の方法で変更できます。

• 色の変更 すべての簡易スタイルで使用される色はリソースとして保存され、この色リソースを変更できます。いずれかの色リソースを変更するには、[リソース] パネルで該当する色リソースの横にある下矢印ボタンをクリックします。ブラシの詳細については、「外観の概要」を参照してください。

  [リソース] パネルでスタイル リソースを選択して編集

  

• スタイルの変更 Expression Blend のコントロールのスタイルを使用して、そのスタイルが適用されるコントロールで既定で使用されるプロパティとトリガを指定できます。プロパティ (背景ブラシの色など) はコントロールの外観に影響を与え、トリガはプロパティの変化やイベントに対するコントロールの応答方法に影響を与えます。たとえば、SimpleButton スタイルでは、ユーザーがマウス ポインタをボタン コントロール上に移動したときにボタンの外観が変わるように、IsMouseOver プロパティに対してトリガが設定されています。このトリガは、IsMouseOver プロパティが False から True に変更されたときに発生します。いずれかの簡易スタイルを変更するには、[リソース] パネルで簡易スタイルの横にある [リソースの編集] ボタンをクリックします。

  [リソース] パネルでスタイル リソースを選択して編集

  

• コントロール テンプレートの変更 コントロールのテンプレートは、コントロールに含まれる子コントロールを定義することで、そのコントロールの外観を定義しています。たとえば、SimpleTextBox 要素のコントロール テンプレートには Grid 要素が含まれ、その中に Border 要素、さらに Border 要素の中に PART_ContentHost という名前の ScrollViewer 要素が含まれています。この SimpleTextBox スタイルをアートボード上の TextBox に適用すると、子要素である ScrollViewer 要素に TextBox のコンテンツが表示されます。スタイルと同様に、コントロール テンプレートにもプロパティとイベント トリガを設定できます。簡易スタイルのコントロール テンプレートを変更するには、[リソース] パネルで簡易スタイルの横にある [リソースの編集] ボタンをクリックし、[オブジェクトとタイムライン] に表示される Style 要素を右クリックします。次に、[コントロール パーツ (テンプレート) の編集] をポイントし、[テンプレートの編集] をクリックします。

  スタイルの編集スコープから開始するコントロール テンプレートの編集の選択

  

  ヒント :
  コントロールに適用されるスタイルがコントロールの外観 (パーツ) と動作の両方を含むよう、コントロール テンプレートはスタイルの内部にラップされています。[コピーの編集] または [テンプレートの編集] を選択するときは、その違いを考慮する必要があります。

簡易スタイルとテンプレートの詳細な比較については、「スタイルとテンプレート」を参照してください。簡易スタイルの詳細と、簡易スタイルおよびコントロール テンプレートの変更例については、「簡易スタイル」の「参照」と「試してみよう」に記載されているトピックを参照してください。

先頭に戻る

アートボード上での既存のコントロールへのスタイル リソースの適用

簡易スタイルはリソースであり、他のリソースと同様に適用および管理することができます。例については、このユーザー ガイドの「スタイル リソースの適用」を参照してください。リソースの詳細については、このユーザー ガイドの「リソースの概要」を参照してください。

先頭に戻る