オブジェクトからのボタン作成

Microsoft Expression Blend の [ボタンの作成] 機能を使用し、イメージやシェイプなど、アートボードのオブジェクトからボタンを作成できます。[ボタンの作成] ツールは、スタイル リソースのオブジェクトをラップし、他のボタン オブジェクトに適用できるようにします。

ヒント :
Expression Blend のオブジェクトとは、アートボードに配置するすべての要素を指します。たとえば、レイアウト パネル、シェイプ、テキスト コントロール、イメージ、ボタン、コントロール テンプレートなどのユーザー インターフェイス (UI) デザイン要素が挙げられます。UI 要素をアートボードに配置すると、アプリケーションに要素のオブジェクト インスタンスが作成されます。

楕円からボタンを作成するには

1. プロジェクトが開かれていない場合は、新しいプロジェクトを開くか、または作成します。詳細については、「新しいドキュメントまたはプロジェクトの作成」を参照してください。

2. [ツールボックス] の [楕円]  ツールを使用して、アートボードに円を描画します。楕円を見やすくするには、[プロパティ] パネルの [ブラシ] にあるプロパティを修正して外観を変更します。詳細については、「オブジェクトの塗りつぶしまたはストロークへのブラシの適用」を参照してください。

3. [組み合わせ] パネルの [オブジェクトとタイムライン] で楕円を選択した状態で、[ツール] メニューの [ボタンの作成] をクリックし、楕円をボタンに変換します。[スタイル リソースの作成] ダイアログ ボックスが表示されます。

4. [リソース名 (キー)] で、最初のラジオ ボタンをクリックし (既定)、ボタン スタイルの識別に使用する名前を入力します。あるいは、[すべてに適用] オプションを選択し、アートボード上にあってまだ名前でスタイルを参照していないすべてのボタンにスタイルを適用します。

5. [定義元] で、いずれかのオプションをクリックし、ボタン スタイルを定義する場所を指定します。アプリケーションのドキュメントにボタン スタイルを使用できるようにするには、[アプリケーション] をクリックします。ボタン スタイルを現在のドキュメントにのみ使用できるようにするには、[このドキュメント] ([Window: Window]) をクリックします。アプリケーションのリソース ディクショナリにボタン スタイルを定義するには、[リソース ディクショナリ] をクリックします。

6. [OK] をクリックして [スタイル リソースの作成] ダイアログ ボックスを終了し、ボタン スタイルを作成します。

   [オブジェクトとタイムライン] では楕円オブジェクトがボタン オブジェクトに変換され、スタイルが新しいボタン スタイルに設定されることに注意してください。

   また、ボタン スタイルは、定義したノードの [リソース] タブに表示されます (たとえば、[Window] ノードなどに表示されます)。

   Expression Blend の [リソース] タブに表示される新しいボタン スタイル

   

先頭に戻る

ボタンのスタイルを変更するには

1. 作成したボタン スタイルを変更するには、[オブジェクトとタイムライン] で新しいボタン オブジェクトを右クリックし、[コントロール パーツ (テンプレート) の編集] をポイントして、[テンプレートの編集] をクリックします。

   アートボードはコントロール テンプレートの編集スコープに切り替わります。

   ヒント :

   コントロール テンプレートの編集スコープに移行するには、いくつかの方法があります。たとえば、[リソース] タブでボタンのスタイルを表示し、リソース名の横にある [リソースの編集] ボタンをクリックできます。これにより、スタイルの編集スコープに入ります。ここから、[オブジェクトとタイムライン] でスタイル オブジェクトを右クリックし、[コントロール パーツ (テンプレート) の編集] をポイントし、[テンプレートの編集] をクリックすることにより、コントロール テンプレートの編集スコープに移行できます。 コントロール テンプレートの編集スコープを終了するには、[オブジェクトとタイムライン] で [上へスコープ] ボタンをクリックします。スタイルの編集スコープからコントロール テンプレートの編集スコープに入った場合は、スタイルに戻ります。ドキュメントの編集モードに戻るには、[上へスコープ] ボタンをもう 1 回クリックします。

   ヒント :
   [ボタンの作成] ツールは、元のオブジェクト (楕円) を、コントロール テンプレートを含むスタイル リソースにラップします。スタイルは、スタイルを適用するオブジェクト (この場合、ボタン オブジェクト) に設定されるプロパティを定義します。コントロール テンプレートは、オブジェクトの状態、構造、および外観を定義します。

2. コントロール テンプレートの内部には、元のオブジェクト (楕円) を含む Grid パネル、およびボタン オブジェクトのコンテンツを表示する ContentPresenter 要素があります。Grid パネル内にオブジェクトを配置すると、他の要素の追加や配置が簡単になります。

   新しいボタン スタイルのコントロール テンプレートの構造

   

   リソースの Extensible Application Markup Language (XAML) を確認すると、スタイルとコントロール テンプレートを関連付ける方法がわかります。たとえば、ボタン スタイルの構造は次のようになります。

     <Window.Resources>
       <Style x:Key="ButtonStyle1" ...>
         <Setter Property="Template">
           <Setter.Value>
             <ControlTemplate TargetType="{x:Type Button}">
               <Grid>
                 <Ellipse>
                   ...
                 </Ellipse>
                 <ContentPresenter .../>
               </Grid>
               <ControlTemplate.Triggers>
                 ...
               </ControlTemplate.Triggers>
             </ControlTemplate>
           </Setter.Value>
         </Setter>
       </Style>
     </Window.Resources>
   

3. [組み合わせ] パネルの [トリガ] で、必要に応じてボタンの状態を定義します。たとえば、ユーザーがボタンの上にマウスを移動したときの状態のトリガ記録をアクティブにするには、IsMouseOver = True をクリックします。[オブジェクトとタイムライン] の下の楕円を選択し、[プロパティ] パネルの [外観] で、楕円の Fill プロパティを別の色に変更します。次の図に示すように、ellipse.Fill に対する新しいプロパティ変更は、[アクティブな際のプロパティ] の [トリガ] の下に追加されます。

   メモ :
   [アクティブな際のプロパティ] が表示されない場合は、[トリガ] ウィンドウのサイズを調整する必要があります。サイズを調整するには、ウィンドウの境界とウィンドウ内の境界をクリックしてからドラッグします。

   ポインタをボタンの上に移動したときの楕円の Fill プロパティを変更した [トリガ] パネル

   

4. ボタンにアニメーションを追加することもできます。たとえば、[トリガ] パネルの IsPressed = True をクリックすると、ユーザーがボタンをクリックしたときの状態のトリガ記録がアクティブになります。[オブジェクトとタイムライン] で楕円を選択した状態で、Shift キーと Alt キーを押しながら、楕円の角をドラッグします (Shift キーと Alt キーを組み合わせると、オブジェクトの中心点が維持されます)。

   また、IsPressed イベントのイベント トリガから新しいストーリーボードとトリガを作成することで、より複雑なアニメーションを追加できます。詳細については、「トリガとユーザー インタラクティブ機能」を参照してください。

5. 必要に応じてボタンの状態を定義した後、[オブジェクトとタイムライン] の下にある [上へスコープ] ボタン をクリックして、ドキュメントの編集スコープに戻ります。

6. 状態をテストするには、[プロジェクト] メニューの [プロジェクトのテスト] をクリックし (または F5 キーを押し)、ボタンの状態が正しく機能することを確認します。たとえば、ボタンの上にポインタを移動すると、塗りつぶしの色が変更されます。

先頭に戻る

ボタンのスタイルをボタンに適用するには

1. 必要な編集スコープに移行していることを確認します。スタイルは、コントロール テンプレートのスコープ内など、任意のスコープのボタンに適用できます。

2. [ツールボックス] の [ボタン]  コントロールを使用して、アートボードにボタンを描画します。

3. [オブジェクトとタイムライン] で新しいボタン オブジェクトを右クリックし、[コントロール パーツ (テンプレート) の編集] をポイントして、[リソースの適用] をポイントします。次に、一覧からボタン スタイルを選択します。

   [オブジェクト] メニューの [スタイルの編集] コマンドと [コントロール パーツ (テンプレート) の編集] コマンドを使用して、スタイル リソースを適用することもできます。

   右クリック操作による、ボタン オブジェクトへのボタン スタイルの適用

   

先頭に戻る

ボタンのスタイルを削除または変更するには

• ボタン スタイルはリソースであるため、その他のリソースと同様に扱うことができます。スタイル リソースの削除または変更の詳細については、「リソース」の方法に関するトピックを参照してください。

先頭に戻る

関連項目

概念

既存のオブジェクトからのコントロールの作成