バージョン

ボタンのスタイリング

この詳細なガイドは、スタイル ライブラリの作成、ボタンのスタイリング、そのスタイル ライブラリの保存というプロセスを説明します。 この手順ごとのチュートリアルが終わるまでに、Infragistics AppStylist for Windows Forms がどのように機能するかを正しく理解することができます。

この詳細なガイドを十分に活用するためには、ハードディスクに保存されている以下の画像が必要となります。 各画像をマウスの右ボタンでクリックして、ショートカット メニューから [コピー] を選択します。 これらの画像を好きな画像編集アプリケーションに貼り付けて（Microsoft® Paint は問題なく動作します）、以下の表の推奨されたファイル名を使用します。

画像 保存するファイル名
Button.png

Button.png
Button HotTracked.png

Button_HotTracked.png
Button Pressed.png

Button_Pressed.png

  1. 新しいスタイル ライブラリの作成

    1. [ファイル] メニューで、[新しいスタイル ライブラリ] をクリックします。 新しいスタイル ライブラリが作成されます。

Note

注: 新しいスタイルが WinButton コントロールのみに適用されるようにしたい場合には、WinButton をターゲットとした新しいスタイルセットを作成する必要があります。 特定のコンポーネントをターゲットとすることに関する詳細は、 特定のコンポーネント デバイスをスタイルを参照してください。 ただし、この詳細なガイドでは、デフォルトのスタイルセットを使用します。

  1. UltraButton に対してコンポーネント ロールの設定を設定します。

    1. スタイル エクスプローラで [ロール] タブをクリックします。

    2. Component Role Settings ノードを展開します。

    3. Infragistics Components ノードを展開します。

    4. UltraButton を選択します。

    5. [一般的なコンポーネントのプロパティ] で、UseFlatMode を True に設定し、UseOsThemes を False に設定します。

AppStyling Styling a Button 01.png

  1. ボタン UI ロールで [ノーマル] の状態に指定します。

    1. スタイル エクスプローラで、UI Roles ノードを展開します。

    2. Base ノードを展開します。

    3. ボタン UI ロールを選択します。

AppStyling Styling a Button 02.png

  1. ロール エディタで [一般の状態] タブの下の [ノーマル] 状態が選択されていることを確認します。

AppStyling Styling a Button 03.png

  1. ボタン UI ロールのノーマル状態をスタイルします。

    1. 背景の塗りつぶしと境界線の両方の色を [透明] に設定します。

AppStyling Styling a Button 04.png

  1. [背景] ペインで、[画像] をクリックして、ドロップダウン リストから [ファイル] を選択します。

  2. 3 つのボタン画像を保存した場所をナビゲートして Button.png を開きます。

Note

注: 表示されているキャンバスによって、ボタンの外観の変更をすぐに確認することができます。 変更を表示するための理想的なキャンバスは、 Editors キャンバスです。 キャンバス領域の一番上にある [Editors] タブをクリックして、Editors キャンバスに切り替えます。 キャンバスを表示する支援が必要な場合には、 「キャンバス」のトピックを参照してください。

  1. [背景] ペインで、[レイアウト モード] をクリックして、ドロップダウン リストから [引き伸ばし] を選択します。 [レイアウト モード] ボタンの下に [マージン] ボタンが表示します。

  2. [マージン] をクリックします。 [引き伸ばしマージン エディタ] が表示します。

AppStyling Styling a Button 05.png

  1. 左、上、右、下のマージンを5、4、5、4にそれぞれ設定します。

Note

注: マージンを試したい場合は、[プレビュー] タブをクリックします。 現在設定されている引き伸ばしマージンを使用して手動で画像を引き伸ばすことができます。

  1. [OK] をクリックします。

キャンバス上のいくつかのボタンが思ったとおりの外観にならない場合があります。 [スペルチェック ダイアログを表示] ボタンは、スライダ ボタンの付いた DropDownButton とは外観が異なります。 これは UltraButton コンポーネントのみに UseFlatMode を設定したが、ボタン UI ロールをスタイルしたためです。 ボタン UI ロールは UltraButton コンポーネントだけでなく、アプリケーションのすべてのボタンに影響を及ぼします。 その他のコンポーネントがボタン UI ロールを使用しているため、スタイル エクスプローラの [ロール] タブにある Component Role Settings ノードに戻り、[すべてのコンポーネント] を選択します。 UseFlatMode を True に、UseOsThemes を False に設定します。 アプリケーションのすべてのボタンが同じように表示されます。

  1. ボタン UI ロールの HotTracked 状態をスタイルします。

    1. プロパティ パネルで、[HotTracked] タブをクリックします。

AppStyling Styling a Button 06.png

  1. 手順 4 を実行しますが、Button_HotTracked.png 画像を Button.png 画像の代わりにします。

  1. ボタン UI ロールの Pressed 状態をスタイルします。

    1. プロパティ パネルで、[Pressed] タブをクリックします。

AppStyling Styling a Button 07.png

  1. 手順 4 を実行しますが、Button_Pressed.png 画像を Button.png 画像の代わりにします。

  1. スタイル ライブラリを保存します。

    1. [ファイル] メニューから、[スタイル ライブラリを保存…​] をクリックします。[スタイル ライブラリを保存] ダイアログ ボックスが表示します。

    2. ファイル名に Button.isl を使用します。

    3. [保存] をクリックします。

スタイル ライブラリがアプリケーションで使用される準備がこれで整いました。 スタイル ライブラリを使用するためには、アプリケーションの Main メソッドにコードを 1 行追加する必要があります。 スタイル ライブラリのロードに関する詳細は、Ultimate UI for Windows Forms ヘルプの「開発者向けガイド」の「スタイル ライブラリのロード」を参照してください。