カスタマイズ可能な外観を持つコントロールの作成

[アーティクル]
12/18/2024

Windows Presentation Foundation (WPF) を使用すると、外観をカスタマイズできるコントロールを作成できます。たとえば、新しい ControlTemplateを作成することで、プロパティの設定以外の CheckBox の外観を変更できます。次の図は、既定の ControlTemplate を使用する CheckBox と、カスタム ControlTemplateを使用する CheckBox を示しています。

既定のコントロールテンプレートを持つチェックボックス。既定のコントロールテンプレートを使用するチェックボックス

カスタムコントロールテンプレートを持つチェックボックス。カスタムコントロールテンプレートを使用するチェックボックス

コントロールの作成時にパーツと状態のモデルに従うと、コントロールの外観がカスタマイズ可能になります。 Blend for Visual Studio などのデザイナーツールではパーツモデルと状態モデルがサポートされているため、このモデルに従うと、これらの種類のアプリケーションでコントロールがカスタマイズできるようになります。このトピックでは、パーツと状態モデルと、独自のコントロールを作成するときにそれに従う方法について説明します。このトピックでは、カスタムコントロールの例である NumericUpDownを使用して、このモデルの理念を説明します。 NumericUpDown コントロールには数値が表示され、ユーザーはコントロールのボタンをクリックして増減できます。次の図は、このトピックで説明する NumericUpDown コントロールを示しています。

NumericUpDown カスタムコントロール。カスタム NumericUpDown コントロール

このトピックには、次のセクションが含まれています。

前提条件
パーツと状態モデルの
ControlTemplate でのコントロールのビジュアル構造と視覚的な動作の定義
ControlTemplate の一部をコードで使用する
制御コントラクトを提供する
完全な例

前提条件

このトピックでは、既存のコントロールの新しいを作成する方法、コントロールコントラクトの要素について理解していること、およびコントロールのテンプレートの作成で説明されている概念を理解していることを前提としています。

手記

外観をカスタマイズできるコントロールを作成するには、Control クラスまたは UserControl以外のサブクラスの 1 つを継承するコントロールを作成する必要があります。 UserControl から継承するコントロールは、すばやく作成できるコントロールですが、ControlTemplate を使用せず、外観をカスタマイズすることはできません。

部品と状態モデル

パーツと状態モデルでは、コントロールの視覚的構造と視覚的な動作を定義する方法を指定します。パーツと状態のモデルに従うには、次の操作を行う必要があります。

コントロールの ControlTemplate で視覚的な構造と視覚的な動作を定義します。
コントロールのロジックがコントロールテンプレートの一部と対話する場合は、特定のベストプラクティスに従います。
ControlTemplateに含める必要のあるものを指定するコントロールコントラクトを指定します。

コントロールの ControlTemplate で視覚的な構造と視覚的な動作を定義すると、アプリケーションの作成者は、コードを記述する代わりに新しい ControlTemplate を作成することで、コントロールの視覚的な構造と視覚的な動作を変更できます。アプリケーション作成者に対して、ControlTemplateで定義すべきFrameworkElementオブジェクトと状態を伝えるために、管理契約を指定する必要があります。コントロールが不完全な ControlTemplateを適切に処理できるように、ControlTemplate 内のパーツを操作するときは、いくつかのベストプラクティスに従う必要があります。これらの 3 つの原則に従うと、アプリケーション作成者は、WPF に付属するコントロールの場合と同じくらい簡単に、コントロールの ControlTemplate を作成できます。次のセクションでは、これらの推奨事項について詳しく説明します。

ControlTemplate でのコントロールのビジュアル構造とビジュアル動作の定義

パーツと状態モデルを使用してカスタムコントロールを作成する場合は、ロジックではなく、その ControlTemplate でコントロールの視覚的構造と視覚的な動作を定義します。コントロールの視覚的な構造は、コントロールを構成 FrameworkElement オブジェクトの複合です。視覚的な動作は、コントロールが特定の状態にある場合に表示される方法です。コントロールの視覚的な構造と視覚的な動作を指定する ControlTemplate の作成の詳細については、「コントロールのテンプレートを作成する」を参照してください。

NumericUpDown コントロールの例では、ビジュアル構造には 2 つの RepeatButton コントロールと TextBlockが含まれています。 NumericUpDown コントロールのコードにこれらのコントロールを追加すると、そのコンストラクター内で、たとえば、それらのコントロールの位置は変更できなくなります。コードでコントロールの視覚的構造と視覚的な動作を定義する代わりに、ControlTemplateで定義する必要があります。次に、アプリケーション開発者は、ボタンと TextBlock の位置をカスタマイズし、ControlTemplate を置き換えることができるため、Value が負の場合に発生する動作を指定します。

次の例は、NumericUpDown コントロールの視覚的な構造を示しています。これには、Valueを増やす RepeatButton、Valueを減らす RepeatButton、Valueを表示する TextBlock が含まれます。

<ControlTemplate TargetType="src:NumericUpDown">
  <Grid  Margin="3" 
         Background="{TemplateBinding Background}">
    <Grid>
      <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
      </Grid.ColumnDefinitions>

      <Border BorderThickness="1" BorderBrush="Gray" 
              Margin="7,2,2,2" Grid.RowSpan="2" 
              Background="#E0FFFFFF"
              VerticalAlignment="Center" 
              HorizontalAlignment="Stretch">

        <!--Bind the TextBlock to the Value property-->
        <TextBlock Name="TextBlock"
                   Width="60" TextAlignment="Right" Padding="5"
                   Text="{Binding RelativeSource={RelativeSource FindAncestor, 
                     AncestorType={x:Type src:NumericUpDown}}, 
                     Path=Value}"/>
      </Border>

      <RepeatButton Content="Up" Margin="2,5,5,0"
        Name="UpButton"
        Grid.Column="1" Grid.Row="0"/>
      <RepeatButton Content="Down" Margin="2,0,5,5"
        Name="DownButton"
        Grid.Column="1" Grid.Row="1"/>

      <Rectangle Name="FocusVisual" Grid.ColumnSpan="2" Grid.RowSpan="2" 
        Stroke="Black" StrokeThickness="1"  
        Visibility="Collapsed"/>
    </Grid>

  </Grid>
</ControlTemplate>

NumericUpDown コントロールの視覚的な動作は、値が負の場合は赤いフォントになります。 Value が負の場合にコード内の TextBlock の Foreground を変更すると、NumericUpDown は常に赤色の負の値を表示します。 ControlTemplate でコントロールの視覚的な動作を指定するには、ControlTemplateに VisualState オブジェクトを追加します。次の例は、Positive 状態と Negative 状態の VisualState オブジェクトを示しています。 Positive と Negative は相互に排他的であるため (コントロールは常に 2 つのうちの 1 つになります)、この例では、VisualState オブジェクトを 1 つの VisualStateGroupに配置します。コントロールが Negative 状態になると、TextBlock の Foreground が赤に変わります。コントロールが Positive 状態になると、Foreground は元の値に戻ります。でのオブジェクトの定義については、「コントロールのテンプレートの作成」で詳しく説明します。

手記

ControlTemplateのルート FrameworkElement に VisualStateManager.VisualStateGroups 添付プロパティを設定してください。

<ControlTemplate TargetType="local:NumericUpDown">
  <Grid  Margin="3" 
         Background="{TemplateBinding Background}">

    <VisualStateManager.VisualStateGroups>
      <VisualStateGroup Name="ValueStates">

        <!--Make the Value property red when it is negative.-->
        <VisualState Name="Negative">
          <Storyboard>
            <ColorAnimation To="Red"
              Storyboard.TargetName="TextBlock" 
              Storyboard.TargetProperty="(Foreground).(Color)"/>
          </Storyboard>

        </VisualState>

        <!--Return the TextBlock's Foreground to its 
            original color.-->
        <VisualState Name="Positive"/>
      </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
  </Grid>
</ControlTemplate>

コードでの ControlTemplate の一部の使用

ControlTemplate 作成者は、意図的に、または誤って、FrameworkElement または VisualState オブジェクトを省略する場合がありますが、コントロールのロジックでは、これらの部分を適切に機能させる必要があります。パーツと状態モデルでは、FrameworkElement または VisualState オブジェクトが不足している ControlTemplate に対してコントロールの回復性を持たせる必要があることを指定します。 ControlTemplateに FrameworkElement、VisualState、または VisualStateGroup が存在しない場合、コントロールが例外をスローしたり、エラーを報告したりすることはありません。このセクションでは、FrameworkElement オブジェクトを操作し、状態を管理するための推奨プラクティスについて説明します。

見失ったFrameworkElementオブジェクトを予期する

ControlTemplateで FrameworkElement オブジェクトを定義する場合、コントロールのロジックがそれらのいくつかと対話する必要があるかもしれません。たとえば、NumericUpDown コントロールは、ボタンの Click イベントをサブスクライブして Value を増減し、TextBlock の Text プロパティを Valueに設定します。カスタム ControlTemplate が TextBlock またはボタンを省略した場合、コントロールの機能の一部が失われることは許容されますが、コントロールでエラーが発生しないことを確認する必要があります。たとえば、ControlTemplate に Valueを変更するボタンが含まれていない場合、NumericUpDown はその機能を失いますが、ControlTemplate を使用するアプリケーションは引き続き実行されます。

次のプラクティスでは、不足している FrameworkElement オブジェクトに対してコントロールが適切に応答するようにします。

コードで参照する必要がある各 FrameworkElement の x:Name 属性を設定します。
対話する必要がある各 FrameworkElement のプライベートプロパティを定義します。
FrameworkElement プロパティの set アクセサーにおいて、コントロールが処理するすべてのイベントに登録し、また登録解除します。
OnApplyTemplate メソッドの手順 2 で定義した FrameworkElement プロパティを設定します。これは、ControlTemplate 内の FrameworkElement がコントロールで使用可能になる最も早い時点です。 ControlTemplateから取得するには、FrameworkElement の x:Name を使用します。
メンバーにアクセスする前に、FrameworkElement が null でないことを確認します。 nullされている場合は、エラーを報告しないでください。

次の例は、前の一覧の推奨事項に従って、NumericUpDown コントロールが FrameworkElement オブジェクトと対話する方法を示しています。

ControlTemplateで NumericUpDown コントロールのビジュアル構造を定義する例では、Value 増加する RepeatButton の x:Name 属性が UpButtonに設定されています。次の例では、ControlTemplateで宣言されている RepeatButton を表す UpButtonElement というプロパティを宣言します。 set アクセサーは、UpDownElement が nullされていない場合は、最初にボタンの Click イベントのサブスクライブを解除し、プロパティを設定してから、Click イベントをサブスクライブします。他の RepeatButtonについては、DownButtonElementと呼ばれるプロパティも定義されていますが、ここでは示されていません。

private RepeatButton upButtonElement;

private RepeatButton UpButtonElement
{
    get
    {
        return upButtonElement;
    }

    set
    {
        if (upButtonElement != null)
        {
            upButtonElement.Click -=
                new RoutedEventHandler(upButtonElement_Click);
        }
        upButtonElement = value;

        if (upButtonElement != null)
        {
            upButtonElement.Click +=
                new RoutedEventHandler(upButtonElement_Click);
        }
    }
}

Private m_upButtonElement As RepeatButton

Private Property UpButtonElement() As RepeatButton
    Get
        Return m_upButtonElement
    End Get

    Set(ByVal value As RepeatButton)
        If m_upButtonElement IsNot Nothing Then
            RemoveHandler m_upButtonElement.Click, AddressOf upButtonElement_Click
        End If
        m_upButtonElement = value

        If m_upButtonElement IsNot Nothing Then
            AddHandler m_upButtonElement.Click, AddressOf upButtonElement_Click
        End If
    End Set
End Property

次の例は、NumericUpDown コントロールの OnApplyTemplate を示しています。この例では、GetTemplateChild メソッドを使用して、ControlTemplateから FrameworkElement オブジェクトを取得します。この例では、GetTemplateChild が指定した名前の FrameworkElement が予期した型ではない場合に対処する仕組みがあることに注意してください。指定された x:Name を持つが、型が間違っている要素を無視することもベストプラクティスです。

public override void OnApplyTemplate()
{
    UpButtonElement = GetTemplateChild("UpButton") as RepeatButton;
    DownButtonElement = GetTemplateChild("DownButton") as RepeatButton;
    //TextElement = GetTemplateChild("TextBlock") as TextBlock;

    UpdateStates(false);
}

Public Overloads Overrides Sub OnApplyTemplate()

    UpButtonElement = TryCast(GetTemplateChild("UpButton"), RepeatButton)
    DownButtonElement = TryCast(GetTemplateChild("DownButton"), RepeatButton)

    UpdateStates(False)
End Sub

前の例で示したプラクティスに従うことで、ControlTemplate に FrameworkElementが見つからない場合にコントロールが引き続き実行されるようにします。

VisualStateManager を使用して状態を管理する

VisualStateManager はコントロールの状態を追跡し、状態間の遷移に必要なロジックを実行します。 VisualState オブジェクトを ControlTemplateに追加するときは、オブジェクトを VisualStateGroup に追加し、VisualStateManager がそれらにアクセスできるように、VisualStateManager.VisualStateGroups 添付プロパティに VisualStateGroup を追加します。

次の例では、コントロールの Positive および Negative 状態に対応する VisualState オブジェクトを示す前の例を繰り返します。 NegativeVisualState の Storyboard は、TextBlock の Foreground を赤に変えます。 NumericUpDown コントロールが Negative 状態になると、Negative 状態のストーリーボードが開始されます。その後、コントロールが Positive 状態に戻ると、Negative 状態の Storyboard が停止します。 Negative の Storyboard が停止すると、Foreground は元の色に戻るため、PositiveVisualState に Storyboard を含める必要はありません。

<ControlTemplate TargetType="local:NumericUpDown">
  <Grid  Margin="3" 
         Background="{TemplateBinding Background}">

    <VisualStateManager.VisualStateGroups>
      <VisualStateGroup Name="ValueStates">

        <!--Make the Value property red when it is negative.-->
        <VisualState Name="Negative">
          <Storyboard>
            <ColorAnimation To="Red"
              Storyboard.TargetName="TextBlock" 
              Storyboard.TargetProperty="(Foreground).(Color)"/>
          </Storyboard>

        </VisualState>

        <!--Return the TextBlock's Foreground to its 
            original color.-->
        <VisualState Name="Positive"/>
      </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
  </Grid>
</ControlTemplate>

TextBlock には名前が付けられますが、コントロールのロジックが TextBlockを参照しないため、TextBlock は NumericUpDown のコントロールコントラクト内にありません。 ControlTemplate で参照される要素には名前がありますが、コントロールの新しい ControlTemplate がその要素を参照する必要がない可能性があるため、コントロールコントラクトの一部である必要はありません。たとえば、NumericUpDown の新しい ControlTemplate を作成するユーザーは、Foregroundを変更することによって、Value が負の値であることを示さないことを決定する場合があります。その場合、コードも ControlTemplate も名前で TextBlock を参照しません。

コントロールのロジックは、コントロールの状態を変更する役割を担います。次の例は、NumericUpDown コントロールが GoToState メソッドを呼び出して、Value が 0 以上の場合に Positive 状態に移行し、Value が 0 未満の場合の Negative 状態を示しています。

if (Value >= 0)
{
    VisualStateManager.GoToState(this, "Positive", useTransitions);
}
else
{
    VisualStateManager.GoToState(this, "Negative", useTransitions);
}

If Value >= 0 Then
    VisualStateManager.GoToState(Me, "Positive", useTransitions)
Else
    VisualStateManager.GoToState(Me, "Negative", useTransitions)
End If

GoToState メソッドは、ストーリーボードを適切に開始および停止するために必要なロジックを実行します。コントロールが GoToState を呼び出して状態を変更すると、VisualStateManager は次の処理を行います。

コントロールの VisualState に Storyboardがある場合は、ストーリーボードが開始されます。次に、コントロールの取得元の VisualState に Storyboardがある場合、ストーリーボードは終了します。
コントロールが既に指定された状態にある場合、GoToState は何も実行せず、trueを返します。
指定された状態が controlの ControlTemplate に存在しない場合、GoToState は何も実行せず、falseを返します。

VisualStateManager を使用するためのベストプラクティス

コントロールの状態を維持するには、次の操作を行うことをお勧めします。

プロパティを使用して状態を追跡します。
状態間を遷移するヘルパーメソッドを作成します。

NumericUpDown コントロールは、Value プロパティを使用して、Positive 状態か Negative 状態かを追跡します。 NumericUpDown コントロールでは、IsFocused プロパティを追跡する Focused と UnFocused の状態も定義します。コントロールのプロパティに自然に対応しない状態を使用する場合は、プライベートプロパティを定義して状態を追跡できます。

すべての状態を更新する 1 つのメソッドは、VisualStateManager の呼び出しを一元化し、コードを管理しやすくします。次の例は、NumericUpDown コントロールのヘルパーメソッドである UpdateStatesを示しています。 Value が 0 以上の場合、Control は Positive 状態になります。 Value が 0 未満の場合、コントロールは Negative 状態になります。 IsFocused が trueされると、コントロールは Focused 状態になります。それ以外の場合は、Unfocused 状態になります。コントロールは、状態の変化に関係なく、その状態を変更する必要があるときはいつでも UpdateStates を呼び出すことができます。

private void UpdateStates(bool useTransitions)
{
    if (Value >= 0)
    {
        VisualStateManager.GoToState(this, "Positive", useTransitions);
    }
    else
    {
        VisualStateManager.GoToState(this, "Negative", useTransitions);
    }

    if (IsFocused)
    {
        VisualStateManager.GoToState(this, "Focused", useTransitions);
    }
    else
    {
        VisualStateManager.GoToState(this, "Unfocused", useTransitions);
    }
}

Private Sub UpdateStates(ByVal useTransitions As Boolean)

    If Value >= 0 Then
        VisualStateManager.GoToState(Me, "Positive", useTransitions)
    Else
        VisualStateManager.GoToState(Me, "Negative", useTransitions)
    End If

    If IsFocused Then
        VisualStateManager.GoToState(Me, "Focused", useTransitions)
    Else
        VisualStateManager.GoToState(Me, "Unfocused", useTransitions)

    End If
End Sub

コントロールが既にその状態にあるときに GoToState に状態名を渡す場合、GoToState は何も行わないので、コントロールの現在の状態を確認する必要はありません。たとえば、Value ある負の数から別の負の数に変更された場合、Negative 状態のストーリーボードは中断されず、ユーザーにはコントロールの変更は表示されません。

VisualStateManager では、VisualStateGroup オブジェクトを使用して、GoToStateを呼び出すときに終了する状態を決定します。コントロールは、ControlTemplateで定義されている各VisualStateGroupごとに常に1つの状態にあり、同じVisualStateGroupから別の状態に移行する時のみ状態から離れます。たとえば、NumericUpDown コントロールの ControlTemplate は、1 つの VisualStateGroup 内の Positive オブジェクトと NegativeVisualState オブジェクト、および別の Focused オブジェクトと UnfocusedVisualState オブジェクトを定義します。 (このトピックの「完全な例」セクションで定義されている Focused と UnfocusedVisualState を確認できます。コントロールが Positive 状態から Negative 状態になった場合、またはその逆の場合、コントロールは Focused 状態または Unfocused 状態のままです。

コントロールの状態が変わる一般的な場所は 3 つあります。

ControlTemplate を Controlに適用する場合。
プロパティが変更されたとき。
イベントが発生した場合。

次の例では、このような場合に NumericUpDown コントロールの状態を更新する方法を示します。

ControlTemplate が適用されたときにコントロールが正しい状態になるように、OnApplyTemplate メソッドのコントロールの状態を更新する必要があります。次の例では、コントロールが適切な状態であることを確認するために、OnApplyTemplate で UpdateStates を呼び出します。たとえば、NumericUpDown コントロールを作成し、その Foreground を緑に設定し、Value を -5 に設定するとします。 ControlTemplate が NumericUpDown コントロールに適用されたときに UpdateStates を呼び出さない場合、コントロールは Negative 状態ではなく、値は赤ではなく緑色になります。コントロールを Negative 状態にするには、UpdateStates を呼び出す必要があります。

public override void OnApplyTemplate()
{
    UpButtonElement = GetTemplateChild("UpButton") as RepeatButton;
    DownButtonElement = GetTemplateChild("DownButton") as RepeatButton;
    //TextElement = GetTemplateChild("TextBlock") as TextBlock;

    UpdateStates(false);
}

Public Overloads Overrides Sub OnApplyTemplate()

    UpButtonElement = TryCast(GetTemplateChild("UpButton"), RepeatButton)
    DownButtonElement = TryCast(GetTemplateChild("DownButton"), RepeatButton)

    UpdateStates(False)
End Sub

多くの場合、プロパティが変更されたときにコントロールの状態を更新する必要があります。次の例は、ValueChangedCallback メソッド全体を示しています。 ValueChangedCallback は Value が変更されたときに呼び出され、Value が正から負または負から正に変更された場合には UpdateStates メソッドを呼び出します。 Value が変化しても、正または負のままである場合は、UpdateStates を呼び出すことができます。その場合、コントロールは状態を変更しないためです。

private static void ValueChangedCallback(DependencyObject obj,
    DependencyPropertyChangedEventArgs args)
{
    NumericUpDown ctl = (NumericUpDown)obj;
    int newValue = (int)args.NewValue;

    // Call UpdateStates because the Value might have caused the
    // control to change ValueStates.
    ctl.UpdateStates(true);

    // Call OnValueChanged to raise the ValueChanged event.
    ctl.OnValueChanged(
        new ValueChangedEventArgs(NumericUpDown.ValueChangedEvent,
            newValue));
}

Private Shared Sub ValueChangedCallback(ByVal obj As DependencyObject,
                                        ByVal args As DependencyPropertyChangedEventArgs)

    Dim ctl As NumericUpDown = DirectCast(obj, NumericUpDown)
    Dim newValue As Integer = CInt(args.NewValue)

    ' Call UpdateStates because the Value might have caused the
    ' control to change ValueStates.
    ctl.UpdateStates(True)

    ' Call OnValueChanged to raise the ValueChanged event.
    ctl.OnValueChanged(New ValueChangedEventArgs(NumericUpDown.ValueChangedEvent, newValue))
End Sub

また、イベントが発生したときに状態を更新することが必要になる場合もあります。次の例は、NumericUpDown が Control で UpdateStates 呼び出して、GotFocus イベントを処理することを示しています。

protected override void OnGotFocus(RoutedEventArgs e)
{
    base.OnGotFocus(e);
    UpdateStates(true);
}

Protected Overloads Overrides Sub OnGotFocus(ByVal e As RoutedEventArgs)
    MyBase.OnGotFocus(e)
    UpdateStates(True)
End Sub

VisualStateManager は、コントロールの状態を管理するのに役立ちます。 VisualStateManagerを使用すると、コントロールが状態間で正しく遷移することを確認できます。 VisualStateManagerを操作するためにこのセクションで説明されている推奨事項に従った場合、コントロールのコードは読みやすく保守可能なままになります。

制御コントラクトの提供

コントロールコントラクトを指定して、ControlTemplate 作成者がテンプレートに入力する内容を把握できるようにします。コントロールコントラクトには、次の 3 つの要素があります。

コントロールのロジックで使用されるビジュアル要素。
コントロールの状態と、それぞれが属するグループの状態。
コントロールに視覚的に影響を与えるパブリックプロパティ。

新しい ControlTemplate を作成するユーザーは、コントロールのロジックで使用されるオブジェクト FrameworkElement、各オブジェクトの種類、およびその名前を把握する必要があります。また、ControlTemplate 作成者は、コントロールが存在する可能性のある各状態の名前と、その状態 VisualStateGroup を把握する必要があります。

NumericUpDown の例に戻り、コントロールは、ControlTemplate が次の FrameworkElement オブジェクトを持つ必要があります。

RepeatButton は UpButtonに電話した。
RepeatButton、DownButton. と呼ばれる

コントロールの状態は次のとおりです。

ValueStatesVisualStateGroup
- Positive
- Negative
FocusStatesVisualStateGroup
- Focused
- Unfocused

コントロールが予期 FrameworkElement オブジェクトを指定するには、必要な要素の名前と型を指定する TemplatePartAttributeを使用します。コントロールの使用可能な状態を指定するには、TemplateVisualStateAttributeを使用します。この TemplateVisualStateAttributeは、状態の名前と、そのコントロールが属する VisualStateGroup を指定します。コントロールのクラス定義に TemplatePartAttribute と TemplateVisualStateAttribute を配置します。

コントロールの外観に影響を与えるパブリックプロパティも、コントロールコントラクトの一部です。

次の例では、NumericUpDown コントロールの FrameworkElement オブジェクトと状態を指定します。

[TemplatePart(Name = "UpButtonElement", Type = typeof(RepeatButton))]
[TemplatePart(Name = "DownButtonElement", Type = typeof(RepeatButton))]
[TemplateVisualState(Name = "Positive", GroupName = "ValueStates")]
[TemplateVisualState(Name = "Negative", GroupName = "ValueStates")]
[TemplateVisualState(Name = "Focused", GroupName = "FocusedStates")]
[TemplateVisualState(Name = "Unfocused", GroupName = "FocusedStates")]
public class NumericUpDown : Control
{
    public static readonly DependencyProperty BackgroundProperty;
    public static readonly DependencyProperty BorderBrushProperty;
    public static readonly DependencyProperty BorderThicknessProperty;
    public static readonly DependencyProperty FontFamilyProperty;
    public static readonly DependencyProperty FontSizeProperty;
    public static readonly DependencyProperty FontStretchProperty;
    public static readonly DependencyProperty FontStyleProperty;
    public static readonly DependencyProperty FontWeightProperty;
    public static readonly DependencyProperty ForegroundProperty;
    public static readonly DependencyProperty HorizontalContentAlignmentProperty;
    public static readonly DependencyProperty PaddingProperty;
    public static readonly DependencyProperty TextAlignmentProperty;
    public static readonly DependencyProperty TextDecorationsProperty;
    public static readonly DependencyProperty TextWrappingProperty;
    public static readonly DependencyProperty VerticalContentAlignmentProperty;

    public Brush Background { get; set; }
    public Brush BorderBrush { get; set; }
    public Thickness BorderThickness { get; set; }
    public FontFamily FontFamily { get; set; }
    public double FontSize { get; set; }
    public FontStretch FontStretch { get; set; }
    public FontStyle FontStyle { get; set; }
    public FontWeight FontWeight { get; set; }
    public Brush Foreground { get; set; }
    public HorizontalAlignment HorizontalContentAlignment { get; set; }
    public Thickness Padding { get; set; }
    public TextAlignment TextAlignment { get; set; }
    public TextDecorationCollection TextDecorations { get; set; }
    public TextWrapping TextWrapping { get; set; }
    public VerticalAlignment VerticalContentAlignment { get; set; }
}

<TemplatePart(Name:="UpButtonElement", Type:=GetType(RepeatButton))>
<TemplatePart(Name:="DownButtonElement", Type:=GetType(RepeatButton))>
<TemplateVisualState(Name:="Positive", GroupName:="ValueStates")>
<TemplateVisualState(Name:="Negative", GroupName:="ValueStates")>
<TemplateVisualState(Name:="Focused", GroupName:="FocusedStates")>
<TemplateVisualState(Name:="Unfocused", GroupName:="FocusedStates")>
Public Class NumericUpDown
    Inherits Control
    Public Shared ReadOnly TextAlignmentProperty As DependencyProperty
    Public Shared ReadOnly TextDecorationsProperty As DependencyProperty
    Public Shared ReadOnly TextWrappingProperty As DependencyProperty

    Public Property TextAlignment() As TextAlignment

    Public Property TextDecorations() As TextDecorationCollection

    Public Property TextWrapping() As TextWrapping
End Class

完全な例

次の例は、NumericUpDown コントロールの ControlTemplate 全体です。

<!--This is the contents of the themes/generic.xaml file.-->
<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:VSMCustomControl">


  <Style TargetType="{x:Type local:NumericUpDown}">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="local:NumericUpDown">
          <Grid  Margin="3" 
                Background="{TemplateBinding Background}">


            <VisualStateManager.VisualStateGroups>

              <VisualStateGroup Name="ValueStates">

                <!--Make the Value property red when it is negative.-->
                <VisualState Name="Negative">
                  <Storyboard>
                    <ColorAnimation To="Red"
                      Storyboard.TargetName="TextBlock" 
                      Storyboard.TargetProperty="(Foreground).(Color)"/>
                  </Storyboard>

                </VisualState>

                <!--Return the control to its initial state by
                    return the TextBlock's Foreground to its 
                    original color.-->
                <VisualState Name="Positive"/>
              </VisualStateGroup>

              <VisualStateGroup Name="FocusStates">

                <!--Add a focus rectangle to highlight the entire control
                    when it has focus.-->
                <VisualState Name="Focused">
                  <Storyboard>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisual" 
                                                   Storyboard.TargetProperty="Visibility" Duration="0">
                      <DiscreteObjectKeyFrame KeyTime="0">
                        <DiscreteObjectKeyFrame.Value>
                          <Visibility>Visible</Visibility>
                        </DiscreteObjectKeyFrame.Value>
                      </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>

                <!--Return the control to its initial state by
                    hiding the focus rectangle.-->
                <VisualState Name="Unfocused"/>
              </VisualStateGroup>

            </VisualStateManager.VisualStateGroups>

            <Grid>
              <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
              </Grid.RowDefinitions>
              <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
              </Grid.ColumnDefinitions>

              <Border BorderThickness="1" BorderBrush="Gray" 
                Margin="7,2,2,2" Grid.RowSpan="2" 
                Background="#E0FFFFFF"
                VerticalAlignment="Center" 
                HorizontalAlignment="Stretch">
                <!--Bind the TextBlock to the Value property-->
                <TextBlock Name="TextBlock"
                  Width="60" TextAlignment="Right" Padding="5"
                  Text="{Binding RelativeSource={RelativeSource FindAncestor, 
                                 AncestorType={x:Type local:NumericUpDown}}, 
                                 Path=Value}"/>
              </Border>

              <RepeatButton Content="Up" Margin="2,5,5,0"
                Name="UpButton"
                Grid.Column="1" Grid.Row="0"/>
              <RepeatButton Content="Down" Margin="2,0,5,5"
                Name="DownButton"
                Grid.Column="1" Grid.Row="1"/>

              <Rectangle Name="FocusVisual" Grid.ColumnSpan="2" Grid.RowSpan="2" 
                Stroke="Black" StrokeThickness="1"  
                Visibility="Collapsed"/>
            </Grid>

          </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>
</ResourceDictionary>

次の例は、NumericUpDownのロジックを示しています。

using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
using System.Windows.Input;
using System.Windows.Media;

namespace VSMCustomControl
{
    [TemplatePart(Name = "UpButtonElement", Type = typeof(RepeatButton))]
    [TemplatePart(Name = "DownButtonElement", Type = typeof(RepeatButton))]
    [TemplateVisualState(Name = "Positive", GroupName = "ValueStates")]
    [TemplateVisualState(Name = "Negative", GroupName = "ValueStates")]
    [TemplateVisualState(Name = "Focused", GroupName = "FocusedStates")]
    [TemplateVisualState(Name = "Unfocused", GroupName = "FocusedStates")]
    public class NumericUpDown : Control
    {
        public NumericUpDown()
        {
            DefaultStyleKey = typeof(NumericUpDown);
            this.IsTabStop = true;
        }

        public static readonly DependencyProperty ValueProperty =
            DependencyProperty.Register(
                "Value", typeof(int), typeof(NumericUpDown),
                new PropertyMetadata(
                    new PropertyChangedCallback(ValueChangedCallback)));

        public int Value
        {
            get
            {
                return (int)GetValue(ValueProperty);
            }

            set
            {
                SetValue(ValueProperty, value);
            }
        }

        private static void ValueChangedCallback(DependencyObject obj,
            DependencyPropertyChangedEventArgs args)
        {
            NumericUpDown ctl = (NumericUpDown)obj;
            int newValue = (int)args.NewValue;

            // Call UpdateStates because the Value might have caused the
            // control to change ValueStates.
            ctl.UpdateStates(true);

            // Call OnValueChanged to raise the ValueChanged event.
            ctl.OnValueChanged(
                new ValueChangedEventArgs(NumericUpDown.ValueChangedEvent,
                    newValue));
        }

        public static readonly RoutedEvent ValueChangedEvent =
            EventManager.RegisterRoutedEvent("ValueChanged", RoutingStrategy.Direct,
                          typeof(ValueChangedEventHandler), typeof(NumericUpDown));

        public event ValueChangedEventHandler ValueChanged
        {
            add { AddHandler(ValueChangedEvent, value); }
            remove { RemoveHandler(ValueChangedEvent, value); }
        }

        protected virtual void OnValueChanged(ValueChangedEventArgs e)
        {
            // Raise the ValueChanged event so applications can be alerted
            // when Value changes.
            RaiseEvent(e);
        }

        private void UpdateStates(bool useTransitions)
        {
            if (Value >= 0)
            {
                VisualStateManager.GoToState(this, "Positive", useTransitions);
            }
            else
            {
                VisualStateManager.GoToState(this, "Negative", useTransitions);
            }

            if (IsFocused)
            {
                VisualStateManager.GoToState(this, "Focused", useTransitions);
            }
            else
            {
                VisualStateManager.GoToState(this, "Unfocused", useTransitions);
            }
        }

        public override void OnApplyTemplate()
        {
            UpButtonElement = GetTemplateChild("UpButton") as RepeatButton;
            DownButtonElement = GetTemplateChild("DownButton") as RepeatButton;
            //TextElement = GetTemplateChild("TextBlock") as TextBlock;

            UpdateStates(false);
        }

        private RepeatButton downButtonElement;

        private RepeatButton DownButtonElement
        {
            get
            {
                return downButtonElement;
            }

            set
            {
                if (downButtonElement != null)
                {
                    downButtonElement.Click -=
                        new RoutedEventHandler(downButtonElement_Click);
                }
                downButtonElement = value;

                if (downButtonElement != null)
                {
                    downButtonElement.Click +=
                        new RoutedEventHandler(downButtonElement_Click);
                }
            }
        }

        void downButtonElement_Click(object sender, RoutedEventArgs e)
        {
            Value--;
        }

        private RepeatButton upButtonElement;

        private RepeatButton UpButtonElement
        {
            get
            {
                return upButtonElement;
            }

            set
            {
                if (upButtonElement != null)
                {
                    upButtonElement.Click -=
                        new RoutedEventHandler(upButtonElement_Click);
                }
                upButtonElement = value;

                if (upButtonElement != null)
                {
                    upButtonElement.Click +=
                        new RoutedEventHandler(upButtonElement_Click);
                }
            }
        }

        void upButtonElement_Click(object sender, RoutedEventArgs e)
        {
            Value++;
        }

        protected override void OnMouseLeftButtonDown(MouseButtonEventArgs e)
        {
            base.OnMouseLeftButtonDown(e);
            Focus();
        }


        protected override void OnGotFocus(RoutedEventArgs e)
        {
            base.OnGotFocus(e);
            UpdateStates(true);
        }

        protected override void OnLostFocus(RoutedEventArgs e)
        {
            base.OnLostFocus(e);
            UpdateStates(true);
        }
    }

    public delegate void ValueChangedEventHandler(object sender, ValueChangedEventArgs e);

    public class ValueChangedEventArgs : RoutedEventArgs
    {
        private int _value;

        public ValueChangedEventArgs(RoutedEvent id, int num)
        {
            _value = num;
            RoutedEvent = id;
        }

        public int Value
        {
            get { return _value; }
        }
    }
}

Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Controls.Primitives
Imports System.Windows.Input
Imports System.Windows.Media

<TemplatePart(Name:="UpButtonElement", Type:=GetType(RepeatButton))> _
<TemplatePart(Name:="DownButtonElement", Type:=GetType(RepeatButton))> _
<TemplateVisualState(Name:="Positive", GroupName:="ValueStates")> _
<TemplateVisualState(Name:="Negative", GroupName:="ValueStates")> _
<TemplateVisualState(Name:="Focused", GroupName:="FocusedStates")> _
<TemplateVisualState(Name:="Unfocused", GroupName:="FocusedStates")> _
Public Class NumericUpDown
    Inherits Control

    Public Sub New()
        DefaultStyleKeyProperty.OverrideMetadata(GetType(NumericUpDown), New FrameworkPropertyMetadata(GetType(NumericUpDown)))
        Me.IsTabStop = True
    End Sub

    Public Shared ReadOnly ValueProperty As DependencyProperty =
        DependencyProperty.Register("Value", GetType(Integer), GetType(NumericUpDown),
                          New PropertyMetadata(New PropertyChangedCallback(AddressOf ValueChangedCallback)))

    Public Property Value() As Integer

        Get
            Return CInt(GetValue(ValueProperty))
        End Get

        Set(ByVal value As Integer)

            SetValue(ValueProperty, value)
        End Set
    End Property

    Private Shared Sub ValueChangedCallback(ByVal obj As DependencyObject,
                                            ByVal args As DependencyPropertyChangedEventArgs)

        Dim ctl As NumericUpDown = DirectCast(obj, NumericUpDown)
        Dim newValue As Integer = CInt(args.NewValue)

        ' Call UpdateStates because the Value might have caused the
        ' control to change ValueStates.
        ctl.UpdateStates(True)

        ' Call OnValueChanged to raise the ValueChanged event.
        ctl.OnValueChanged(New ValueChangedEventArgs(NumericUpDown.ValueChangedEvent, newValue))
    End Sub

    Public Shared ReadOnly ValueChangedEvent As RoutedEvent =
        EventManager.RegisterRoutedEvent("ValueChanged", RoutingStrategy.Direct,
                                         GetType(ValueChangedEventHandler), GetType(NumericUpDown))

    Public Custom Event ValueChanged As ValueChangedEventHandler

        AddHandler(ByVal value As ValueChangedEventHandler)
            Me.AddHandler(ValueChangedEvent, value)
        End AddHandler

        RemoveHandler(ByVal value As ValueChangedEventHandler)
            Me.RemoveHandler(ValueChangedEvent, value)
        End RemoveHandler

        RaiseEvent(ByVal sender As Object, ByVal e As RoutedEventArgs)
            Me.RaiseEvent(e)
        End RaiseEvent

    End Event


    Protected Overridable Sub OnValueChanged(ByVal e As ValueChangedEventArgs)
        ' Raise the ValueChanged event so applications can be alerted
        ' when Value changes.
        MyBase.RaiseEvent(e)
    End Sub


#Region "NUDCode"
    Private Sub UpdateStates(ByVal useTransitions As Boolean)

        If Value >= 0 Then
            VisualStateManager.GoToState(Me, "Positive", useTransitions)
        Else
            VisualStateManager.GoToState(Me, "Negative", useTransitions)
        End If

        If IsFocused Then
            VisualStateManager.GoToState(Me, "Focused", useTransitions)
        Else
            VisualStateManager.GoToState(Me, "Unfocused", useTransitions)

        End If
    End Sub

    Public Overloads Overrides Sub OnApplyTemplate()

        UpButtonElement = TryCast(GetTemplateChild("UpButton"), RepeatButton)
        DownButtonElement = TryCast(GetTemplateChild("DownButton"), RepeatButton)

        UpdateStates(False)
    End Sub

    Private m_downButtonElement As RepeatButton

    Private Property DownButtonElement() As RepeatButton
        Get
            Return m_downButtonElement
        End Get

        Set(ByVal value As RepeatButton)

            If m_downButtonElement IsNot Nothing Then
                RemoveHandler m_downButtonElement.Click, AddressOf downButtonElement_Click
            End If
            m_downButtonElement = value

            If m_downButtonElement IsNot Nothing Then
                AddHandler m_downButtonElement.Click, AddressOf downButtonElement_Click
            End If
        End Set
    End Property

    Private Sub downButtonElement_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
        Value -= 1
    End Sub

    Private m_upButtonElement As RepeatButton

    Private Property UpButtonElement() As RepeatButton
        Get
            Return m_upButtonElement
        End Get

        Set(ByVal value As RepeatButton)
            If m_upButtonElement IsNot Nothing Then
                RemoveHandler m_upButtonElement.Click, AddressOf upButtonElement_Click
            End If
            m_upButtonElement = value

            If m_upButtonElement IsNot Nothing Then
                AddHandler m_upButtonElement.Click, AddressOf upButtonElement_Click
            End If
        End Set
    End Property

    Private Sub upButtonElement_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
        Value += 1
    End Sub

    Protected Overloads Overrides Sub OnMouseLeftButtonDown(ByVal e As MouseButtonEventArgs)
        MyBase.OnMouseLeftButtonDown(e)
        Focus()
    End Sub


    Protected Overloads Overrides Sub OnGotFocus(ByVal e As RoutedEventArgs)
        MyBase.OnGotFocus(e)
        UpdateStates(True)
    End Sub

    Protected Overloads Overrides Sub OnLostFocus(ByVal e As RoutedEventArgs)
        MyBase.OnLostFocus(e)
        UpdateStates(True)
    End Sub
#End Region
End Class


Public Delegate Sub ValueChangedEventHandler(ByVal sender As Object,
                                             ByVal e As ValueChangedEventArgs)

Public Class ValueChangedEventArgs
    Inherits RoutedEventArgs

    Public Sub New(ByVal id As RoutedEvent,
                   ByVal num As Integer)

        Value = num
        RoutedEvent = id
    End Sub

    Public ReadOnly Property Value() As Integer
End Class

次の方法で共有

カスタマイズ可能な外観を持つコントロールの作成

前提条件

部品と状態モデル

ControlTemplate でのコントロールのビジュアル構造とビジュアル動作の定義

コードでの ControlTemplate の一部の使用

見失ったFrameworkElementオブジェクトを予期する

VisualStateManager を使用して状態を管理する

VisualStateManager を使用するためのベストプラクティス

制御コントラクトの提供

完全な例

関連項目

その他のリソース

次の方法で共有

カスタマイズ可能な外観を持つコントロールの作成

前提 条件

部品と状態モデル

ControlTemplate でのコントロールのビジュアル構造とビジュアル動作の定義

コードでの ControlTemplate の一部の使用

見失ったFrameworkElementオブジェクトを予期する

VisualStateManager を使用して状態を管理する

VisualStateManager を使用するためのベスト プラクティス

制御コントラクトの提供

完全な例

関連項目

その他のリソース

前提条件

VisualStateManager を使用するためのベストプラクティス