次の方法で共有

Blend でさまざまな状態に応じてシステム コントロールの外観を変更する

  • [アーティクル]

コントロールはそのときの状態に応じて見た目が異なります。 たとえば、ボタンの上をマウス ポインターが移動するときボタンの色が少し変化します。 "MouseOver" は、ボタンの状態の一種です。 システム コントロールのさまざまな状態に合わせて、外観をカスタマイズできます。

次の手順ではボタンを使用していますが、Blend for Visual Studio のシステム コントロールや、Control クラスを継承するインポート済みの Microsoft Silverlight コントロールであれば、どのようなコントロールでもカスタマイズできます。

さまざまな状態に応じたボタンの外観を変更するには

  1. システム コントロール (Button コントロール JJ170746.05df1779-a68f-436b-b834-a91b7995a3ec(ja-jp,VS.120).png など) の再利用可能なテンプレートを作成します。

  2. テンプレート編集モードになっていない場合は、アートボードのコントロールを右クリックして [テンプレートの編集] をポイントし、[現在のテンプレートの編集] をクリックします。 また、オブジェクトを選択して、階層リンク バーの [テンプレート] をクリックすることもできます。

    JJ170746.5bb586ea-6adc-4672-b316-0fab8215ff8c(ja-jp,VS.120).png

  3. テンプレートの編集モードになっている場合は、ボタンの状態 (Normal や MouseOver など) が、[状態] パネルに表示されます。 状態は、状態グループ (CommonStates や FocusStates など) にまとめられています。

    JJ170746.7740762c-1a9d-490f-898e-2886ac1cf541(ja-jp,VS.120).png

    テンプレートのパーツは、[オブジェクトとタイムライン] パネルに表示されます。 これらのパーツの外観を、選択した状態に合わせて変更できます。

    JJ170746.c3a4acee-4285-4bcd-ac0d-ac6fbd26b306(ja-jp,VS.120).png

  4. [状態] パネルの [MouseOver] をクリックします。 アートボードの上部に赤い円が表示され、状態の記録がオンになったことが示されます。 これは、選択した状態のプロパティの変更がすべて記録されるという意味です。 [オブジェクトとタイムライン] パネルでは、展開ボタンのそばに赤い円が表示され、Base を選択したときとは異なるプロパティを持つテンプレートのパーツがあることが示されます。

    JJ170746.a95c671a-5639-40b9-83db-1e6b214330d5(ja-jp,VS.120).png

  5. MouseOver 状態になったときのボタンのサイズを変更するには、[オブジェクトとタイムライン] パネルの [Grid] をクリックします。

    ヒント

    Grid JJ170746.c76bbf09-1922-4f45-8d92-9c8ae64ca4a4(ja-jp,VS.120).png は、水平方向の配置、垂直方向の配置、および余白に従って子オブジェクトを整列させるレイアウト パネルです。レイアウト パネルの詳細については、「Blend でオブジェクトをレイアウト コンテナーに編成する」および「グリッド レイアウト パネルの使用」を参照してください。

  6. [プロパティ] パネルの [変換] で、[拡大縮小] タブ JJ170746.7a93944e-a7f5-4607-babd-768bb5f56185(ja-jp,VS.120).png をクリックします。 [X] および [Y] の値を、1.1 に変更します。

  7. Ctrl キーを押しながら S キーを押して作業内容を保存してから、F5 キーを押してアプリケーションをビルドおよびテストします。 ブラウザー ウィンドウにアプリケーションが開いたら、マウス ポインターをボタンの上に移動し、ボタンが拡大表示されるかどうかを確認します。

トラブルシューティング

  • 一部のテンプレート パーツには、テンプレート外部の値にバインドされるプロパティがあります。 たとえば、Background パーツの Fill プロパティは、ボタンの Background プロパティにテンプレート バインドされます。 これは、このテンプレートを使用するボタンを描画するときに、テンプレートでは、ボタン自体に設定した値が使用されることを意味します。 テンプレートのバインドを使用すると、カスタマイズされたコントロールをデザインすることができますが、アプリケーション内にコントロールを組み込むときに、何らかの変更が生じる場合があります。

    バインドされたプロパティには、テンプレート内で黄色い枠が付きます。 テンプレートにバインドされたプロパティを変更する場合は、まず、プロパティの横にある [詳細オプション] JJ170746.12e06962-5d8a-480d-a837-e06b84c545bb(ja-jp,VS.120).png をクリックしてから、[リセット] をクリックします。

    JJ170746.31f58be3-51bc-4806-af37-e32422465e8c(ja-jp,VS.120).png

  • システム コントロールのテンプレートに、カスタムの状態や状態グループを追加することはできません。 ただし、カスタム ユーザー コントロールを作成してから、カスタムの状態を定義し、ユーザーの操作によって状態が変わるようにコードを追加することはできます。

    詳細については、次のトピックを参照してください。

  • アプリケーションをブラウザーで表示するときに問題が発生した場合は、Silverlight ランタイムが正しくインストールされていない可能性があります。

    詳細については、「Blend 用の Silverlight ツールとランタイムのインストール」を参照してください。

次の手順

参照

処理手順

プロジェクトにおけるコントロールの描画

Blend で状態の切り替え時間を変更する

Blend でシステム コントロールのスタイルを処理するために再利用可能なテンプレートを作成する