ボタン コントロールのスタイル処理のヒント
.png "Ee341364.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(JA-JP,Expression.30).png")
[Button] コントロールは、コントロールは、ユーザーがマウスやキーボードなどの入力デバイスを使って行う操作に反応して、Click イベントを発行するオブジェクトです。
他のコントロールと同様に、[Button] コントロールも既定の外観を変更できます。既定の [Button] コントロールは、次のように表示されます。
.png "Ee341364.c01e5314-5b29-4283-a483-b0a1cb3b59f6(JA-JP,Expression.30).png")
[Button] コントロールのプロパティ
[Button] コントロールはコンテンツ コントロールです。そのため、[Button] コントロールに表示するテキストは、[プロパティ] パネルの [共通プロパティ] にある [Content] プロパティで設定します。
いつ Click イベントを発行するか ([Button] コントロールをクリックして選択したときや選択解除したとき、ポインターをその上に置いたとき) を決めるには、[ClickMode] プロパティを設定します。
これらのプロパティを設定するには、次の方法があります。
オブジェクトのプロパティを設定する アートボードに [Button] オブジェクトを描いた後で、そのプロパティを直接設定します。複数の [Button] コントロールで同じ値を使用する場合は、これらのプロパティをスタイルとして設定します。
プロパティをスタイルとして設定する [Button] オブジェクトのプロパティをスタイル
.png "Ee341364.94fa7fc4-4f3e-4e84-9ba1-287f1b894371(JA-JP,Expression.30).png")
として設定すると、このスタイルを使用するすべての [Button] オブジェクトのプロパティが同じ値になります。特定のオブジェクトの値を上書きすることもできます。詳細については、「スタイルの作成」を参照してください。
[Button] コントロールは、どの状態になっているかによって外観が変わります。各状態の外観を変更するには、テンプレート編集モードにして、[状態] パネルで状態を選択します。詳細については、下の表と「コントロール用ビジュアル状態の定義」を参照してください。
[Button] コントロールがクリックされたときに何が起こるかを指定するには、ビヘイビアーを [Button] オブジェクトか、Button テンプレートにあるオブジェクトにドラッグします。詳細については、「ビヘイビアーをオブジェクトに追加」を参照してください。
この他にも、Click イベントをイベント ハンドラーにフックする方法があります。詳細については、「イベントに応答するコードを記述」を参照してください。
Button テンプレートのパーツ
[Button ]コントロールには、パーツがありません。
[Button] コントロールの状態
既定では、[Button] コントロールは、次の表にある CommonStates 状態グループの 4 つの状態のいずれかになります。これらの状態は、Button テンプレートを変更するときに、[状態] パネルで見ることができます。
状態名 |
説明 |
|---|---|
Normal |
[Button] コントロールに対してユーザーが何も行わず、単に表示されているだけの状態。 |
MouseOver |
ユーザーが [Button] コントロールの上にポインターを動かしたときの状態。 |
Pressed |
ユーザーが [Button] コントロールをクリックしたか、Button コントロールがフォーカスされているときに Enter キーまたはスペース バーを押したときの状態。 |
Disabled |
[IsEnabled] プロパティを [False] に設定したときの状態。 |
[Button] コントロールは、次の FocusStates 状態グループに属する状態のいずれかになることができます。
状態名 |
説明 |
|---|---|
Unfocused |
[Button] コントロールがキーボードでフォーカスされていないときの状態。 |
Focused |
[Button] コントロールがキーボードでフォーカスされたときの状態。たとえば、アプリケーション内でユーザーが Tab キーを押してフォーカスを切り替えていき、[Button] コントロールにフォーカスが移った場合が相当します。 |
.gif "ヒント") ヒント : |
|---|
状態グループは、コントロールの表示状態を論理的に分類したものです。1 つのグループに属する複数の状態を同時に表示することはできません。たとえば、CommonStates グループには、ユーザーがマウスなどの入力デバイスで行う操作に関係のある状態が含まれています。1 つのグループ内で一度に表示できる状態は 1 つだけですが、別々のグループに属する状態を同時に表示することはできます。 |
状態を 1 つ選択すると、その状態の変更の記録が開始されます。状態の記録を無効にするには、記録ボタン .png "Ee341364.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(JA-JP,Expression.30).png")
をクリックするか、[状態] パネルで [ベース] を選択します。
オブジェクトを Button コントロールに変換するには
Button コントロールにはパーツがないので、どのようなオブジェクトでも Button コントロールに変換できます。
まず、オブジェクトをグループにまとめてレイアウト パネルに配置します。そのレイアウト パネルを選択し、[ツール] メニューの [コントロールの作成] をクリックします。
表示されたダイアログ ボックスで [Button] を選択してテンプレートに名前を付け、テンプレートの保存場所を選択します。
保存場所については、「リソースの作成」を参照してください。
[OK] をクリックすると、Microsoft Expression Blend がテンプレート編集モードになり、[Button] コントロールを構成しているオブジェクトが表示されます。
元のオブジェクトのグループに [TextBlock] オブジェクト
.png "Ee341364.42165963-00f7-4a33-abcd-b0849edebada(JA-JP,Expression.30).png")
が含まれていた場合は、この TextBlock オブジェクトが [Button] コントロール テンプレートの ContentPresenter オブジェクト .png "Ee341364.51a0c06c-d801-4133-8caf-cf1856a8dfc4(JA-JP,Expression.30).png")
に変換されます。これで、[Button] オブジェクトにテキストが表示されるようになります。元のグループに [TextBlock] オブジェクトが含まれていなかった場合は、[ContentPresenter] オブジェクトが自動的にテンプレートに追加されます。このテンプレートを適用する [Button] コントロールの [コンテンツ] プロパティにテキストを表示する必要がない場合は、[ContentPresenter] オブジェクトを削除します。このモードで、テンプレートの変更を続けます。たとえば、オブジェクトの追加や変更を行ったり、[状態] パネルで状態を選択して、この状態のテンプレートの外観を変更したりできます。
必要に応じて、このテンプレートを使うことになる [Button] オブジェクトの次のプロパティと、オブジェクトのブラシ プロパティをバインドします。
Background
BorderBrush
Foreground
BorderThickness
詳細については、「オブジェクト プロパティをテンプレートに反映させる」を参照してください。
テンプレート編集モードを終了するには、アートボードの上端にある階層リンク バーの [Button] をクリックするか、[オブジェクトとタイムライン] パネルの [上へスコープ]
.png "Ee341364.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(JA-JP,Expression.30).png")
をクリックします。
新しく作成した Button テンプレートを他の [Button] オブジェクトに適用する方法については、リソースの適用と削除 を参照してください。
参照
Microsoft Silverlight の [Button] コントロールのプロパティとイベントの詳細については、MSDN の「Silverlight Control Gallery (Silverlight コントロール ギャラリー)」を参照してください。