Blend で既存のオブジェクトからコントロールを作成する

[アーティクル]
10/09/2014

Blend for Visual Studio の [コントロールの作成] 機能を使用して、アートボードの任意のオブジェクトからコントロールテンプレートを作成できます。 [コントロールの作成] ツールは、再利用できるオブジェクトをスタイルリソースにまとめます。

ヒント

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

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

プロジェクトが開かれていない場合は、新しいプロジェクトを開くか、または作成します。

詳細については、「Blend における新しいプロジェクトの作成」を参照してください。
[ツール] パネルの [楕円] を使用して、アートボードに円を描画します。楕円を見やすくするには、[プロパティ] パネルの [ブラシ] にあるプロパティを修正して外観を変更します。

詳細については、「Blend でオブジェクトの塗りつぶしまたはストロークに単色ブラシやグラデーションブラシを適用する」を参照してください。
楕円を右クリックして、[グループ化設定] をポイントし、Grid などレイアウトコンテナーの名前をクリックします。
[オブジェクトとタイムライン] パネルでグリッドを選択した状態で、[ツール] メニューの [コントロールの作成] をクリックし、グリッドをボタンに変換します。

[コントロールの作成] ダイアログボックスが表示されます。
[コントロールの種類] で、[Button] コントロールなど、作成するコントロールの種類をクリックします。
[名前 (キー)] で、最初のオプションボタンをクリックし (既定)、ボタンスタイルの名前を入力します。あるいは、[すべてに適用] オプションを選択し、アートボード上にあってまだ名前でスタイルを参照していないすべてのボタンにスタイルを適用します。
[定義先] で、いずれかのオプションをクリックし、ボタンスタイルを定義する場所を指定します。アプリケーションのドキュメントにボタンスタイルを使用できるようにするには、[アプリケーション] をクリックします。ボタンスタイルを現在のドキュメントにのみ使用できるようにするには、[このドキュメント] ([Window: Window]) をクリックします。アプリケーションのリソースディクショナリにボタンスタイルを定義するには、[リソースディクショナリ] をクリックします。
[OK] をクリックして [スタイルリソースの作成] ダイアログボックスを終了し、ボタンスタイルを作成します。

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

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

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

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

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

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

ヒント

コントロールテンプレートの編集スコープに移行するには、いくつかの方法があります。たとえば、[リソース] タブでボタンのスタイルを表示し、リソース名の横にある [リソースの編集] ボタンをクリックできます。これにより、スタイルの編集スコープに入ります。ここから、[オブジェクトとタイムライン] パネルでスタイルオブジェクトを右クリックし、[テンプレートの編集] をポイントし、[現在のテンプレートの編集] をクリックすることにより、コントロールテンプレートの編集スコープに移行できます。

コントロールテンプレートの編集スコープを終了するには、[オブジェクトとタイムライン] パネルで [スコープを <オブジェクト名> に戻す] をクリックします。スタイルの編集スコープからコントロールテンプレートの編集スコープに入った場合は、スタイルに戻ります。ドキュメントの編集モードに戻るには、[スコープを <オブジェクト名> に戻す] ボタンをもう 1 回クリックします。

ヒント

[コントロールの作成] ツールは、元のオブジェクト (楕円) を、コントロールテンプレートを含むスタイルリソースにラップします。スタイルは、スタイルを適用するオブジェクト (この場合、ボタンオブジェクト) に設定されるプロパティを定義します。コントロールテンプレートは、オブジェクトの状態、構造、および外観を定義します。
コントロールテンプレートの内部には、元のオブジェクト (楕円) を含む 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>
```
[トリガー] パネルで、必要に応じてボタンの状態を定義します。たとえば、ユーザーがボタンの上にマウスを移動したときの状態のトリガー記録をアクティブにするには、IsMouseOver = True をクリックします。 [オブジェクトとタイムライン] パネルで楕円を選択し、[プロパティ] パネルの [外観] で、楕円の [Fill] プロパティを別の色に変更します。次の図に示すように、[ellipse.Fill] に対する新しいプロパティ変更は、[アクティブな際のプロパティ] の [トリガー] に追加されます。

注意

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

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

また、IsPressed イベントのイベントトリガーから新しいストーリーボードとトリガーを作成することで、より複雑なアニメーションを追加できます。

詳細については、「イベントに応答するコードを記述」を参照してください。
必要に応じてボタンの状態を定義した後、[オブジェクトとタイムライン] パネルの [スコープを <オブジェクト名> に戻す] をクリックして、ドキュメントの編集スコープに戻ります。
状態をテストするには、[プロジェクト] メニューの [プロジェクトの実行] をクリックし (または F5 キーを押し)、ボタンの状態が正しく機能することを確認します。たとえば、ボタンの上にポインターを移動すると、塗りつぶしの色が変更されます。

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

必要な編集スコープに移行していることを確認します。スタイルは、コントロールテンプレートのスコープ内など、任意のスコープのボタンに適用できます。
[ツール] パネルの Button を使用して、アートボードにボタンを描画します。
[オブジェクトとタイムライン] パネルで新しいボタンオブジェクトを右クリックし、[テンプレートの編集]、[リソースの適用] の順にポイントして、一覧からボタンスタイルを選択します。

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

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