次の方法で共有

試してみよう : カスタム プロパティを持つカスタム コントロールの作成

  • [アーティクル]

Microsoft Expression Blend には、アプリケーションで使用できるさまざまなシステム コントロールやスタイルが用意されています。これらのコントロールやスタイルが特定の要件に適合しない場合は、カスタム コントロールを作成できます。カスタム コントロールを作成するには、いずれかの System.Windows.Controls クラスから継承する Microsoft .NET クラスを作成します。

イメージを表示するためにイメージ ファイルのパスを保持する新しいプロパティを含むカスタム ボタン コントロールを作成する手順を次に示します。

カスタム プロパティを持たないユーザー コントロールをコードを使わずに作成する例については、「空のユーザー コントロールの作成」を参照してください。

カスタム コントロールの詳細とXAML とコードの例については、MSDN の「Windows Presentation Foundation」の「コントロールの作成の概要」および「DependencyProperty クラス」を参照してください。

カスタム コントロールを定義するには

  1. [プロジェクト] パネルで Window1.xaml ファイルを展開して、プロジェクトの分離コード ファイル (Window1.xaml.cs ) を表示します(プロジェクトを作成するときに言語として Microsoft Visual Basic を選択すると、分離コード ファイル名は Window1.xaml.vb になります)。分離コード ファイルをダブルクリックして開き、編集します。

  2. Window1.xaml.cs ファイルで、ファイルの最後にある閉じかっこ (}) の直前に、次のクラス定義のソース コードを貼り付けます (Visual Basic では、End Namespace の直前または最後の End Class の直後に、適切なコードを貼り付けます)。

    public class ImageButton : Button 
{ 
  public ImageSource Source 
  { 
    get { return base.GetValue(SourceProperty) as ImageSource; } 
    set { base.SetValue(SourceProperty, value); } 
  } 
  public static readonly DependencyProperty SourceProperty = 
    DependencyProperty.Register("Source", typeof(ImageSource), typeof(ImageButton), null); 
}

    Class ImageButton
  Inherits Button
  Public Property Source() As ImageSource
    Get
      Return CType(MyBase.GetValue(SourceProperty), ImageSource)
    End Get
    Set(ByVal value As ImageSource)
      MyBase.SetValue(SourceProperty, value)
    End Set
  End Property
  Public Shared ReadOnly SourceProperty As DependencyProperty = DependencyProperty.Register("Source", GetType(ImageSource), GetType(ImageButton), nothing)
End Class

  3. 変更した分離コード ファイルを保存して閉じます。

    Cc295235.alert_tip(JA-JP,Expression.30).gifヒント :

    ImageButton クラスは、依存関係プロパティのパターンを示したものです。外部的に、このクラスは、ImageSource 型の Source という名前の通常の共通言語ランタイム (CLR、つまり .NET) プロパティを公開します。また、SourceProperty という読み取り専用の依存関係プロパティ フィールドも登録して公開し、依存関係プロパティに関して Source プロパティ用に CLR アクセサーを実装します。依存関係プロパティで登録することで、WPF または Silverlight による多様なサービスを利用できるようになります。提供できるサービスには、スタイル設定、データ バインド、値の継承、既定値、アニメーションなどがあります。コントロール テンプレート内からプロパティ値にバインドするテンプレートのバインドという機能もあります。このチュートリアルでは、実行中のテンプレートのバインドについて説明します。
    Cc295235.alert_tip(JA-JP,Expression.30).gifヒント :

    カスタム コントロールのクラス定義のソース コードを、別のソース コード ファイルに保存することもできます。上記の 2 つの手順の代わりに、ImageButton.cs という新しいファイルを作成し、ソース コード、名前空間の宣言、およびドキュメントの分離コード ファイルの using ディレクティブの同じセットをこのファイルに貼り付け、新しいファイルをプロジェクトに追加することもできます ([プロジェクト ] メニューの [アイテムの追加] をクリックします)。

  4. 新しい [ImageButton] コントロールが [アセット] パネルに表示されるようにプロジェクトを構築する必要があります。Expression Blend の [プロジェクト] メニューで、[プロジェクトのビルド] をクリックします (または Ctrl + Shift + B キーを押します)。エラーが発生せずにビルドが完了することを確認します。

  5. Expression Blend での Window1.xaml の編集作業に戻ります。

  6. Expression Blend の左側に表示される [ツール] パネルで、[アセット] Cc295235.0d8b8d29-1af9-418f-8741-be3097d76eab(JA-JP,Expression.30).png ボタンをクリックします。

    [アセット] パネルが開き、ドキュメントに配置できるすべてのコントロール、パネル、および要素が表示されます。

  7. [プロジェクト] タブの一覧から、[ImageButton] コントロールを選択します。

    [ツール] パネルの [アセット] ボタンの下に、指定した [ImageButton] コントロールのアイコンが選択された状態で表示され、アートボードにこのコントロールを描画できるようになります。

    Cc295235.alert_note(JA-JP,Expression.30).gifメモ :

    カスタム コントロールを [アセット] パネルの [プロジェクト] カテゴリに表示するには、プロジェクトにソース コードを追加してビルドする (Ctrl + Shift + B キーを押します) 必要があります。

  8. [ImageButton] を描画するには、[ツール] パネルで [ImageButton] アイコンを選択した状態で、アートボードをクリックし、ドキュメント内に境界ボックスを描画します。

    [ImageButton] コントロールがアートボードにレンダリングされ、[ImageButton] "ImageButton" という [ImageButton] 要素が、[オブジェクトとタイムライン] の [LayoutRoot] の子要素として表示されます。

カスタム コントロールのスタイルを変更するには

  1. すべての [ImageButton] 要素のコントロール テンプレートを作成するには、新しい [ImageButton] を右クリックし、[テンプレートの編集] をクリックして、[コピーして編集] をクリックします。

    [スタイル リソースの作成] ダイアログ ボックスが表示されます。

  2. [スタイル リソースの作成] ダイアログ ボックスの [リソース名 (キー)] フィールド (最初のラジオ ボタンの横にあるテキスト ボックス) に、「ImageButtonStyle」と入力します。

    リソース ディクショナリのテンプレートに名前が設定されます。これで、任意の ImageButton 要素に対してテンプレートとして設定できます。

    Cc295235.alert_note(JA-JP,Expression.30).gifメモ :

    コントロールに適用されるスタイルがコントロールの外観 (パーツ) と動作の両方を含むよう、コントロール テンプレートはスタイルの内部にラップされています。

  3. [定義元] フィールドで [このドキュメント] をオンにし、ドロップダウン リストで [Window: Window] が選択されていることを確認します。

    [定義先] フィールドは、新しいテンプレートを定義するリソース ディクショナリを示します。[Window: Window] を選択するのは、テンプレートがウィンドウ内のすべての ImageButton コントロールから見えるようにするためです。

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

    ここまでの操作で、すべての [ImageButton] 要素の既定のコントロール テンプレートがコピーされ、ImageButtonStyle という名前の新しい ControlTemplate として保存されました。新しいテンプレートがリソース ディクショナリに配置されています。このテンプレートは、[リソース] パネルの [Window] ノードで確認できます。

    新しいテンプレートを作成すると、Expression Blend は、新しいテンプレートを表示および編集できるモードになります。[オブジェクトとタイムライン] パネルにある新しい要素ツリーの上の "テンプレート" という語は、編集している現在のスコープを示します。テンプレートには、このテンプレートを使用する ImageButton の Content プロパティ値を自動的に表示する [ContentPresenter] 要素が含まれます。

    Cc295235.alert_tip(JA-JP,Expression.30).gifヒント :

    テンプレートの編集モードを終了してドキュメントのスコープに戻るには、要素ツリーの上の ImageButtonStyleの横にある [上へスコープ] Cc295235.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(JA-JP,Expression.30).png をクリックします。

    既存のテンプレートを編集するためにテンプレートの編集モードに戻るには、[オブジェクトとタイムライン] パネルでテンプレートを編集する要素 (この例では [ImageButton] "ImageButton" 要素) を右クリックし、[テンプレートの編集] をクリックして、[現在のテンプレートの編集] をクリックします。

  5. [オブジェクトとタイムライン] パネルで [ContentPresenter] オブジェクトを右クリックし、[グループ化設定] をポイントし、[Grid] をクリックします。

    [ContentPresenter] オブジェクトは、新しい [Grid] オブジェクトの子要素になります。Grid オブジェクトが存在しない場合、2 つ目の子要素をテンプレートに追加することはできません。クロム オブジェクトには 1 つの子要素しか含めることができないためです。

  6. [オブジェクトとタイムライン] パネルで [Grid] オブジェクトを選択した状態で、[プロパティ] パネルの [レイアウト] カテゴリにある [Width] プロパティと [Height] のプロパティを見つけます。各プロパティの横にある [詳細プロパティ オプション] Cc295235.12e06962-5d8a-480d-a837-e06b84c545bb(JA-JP,Expression.30).png をクリックし、[リセット] をクリックします。

  7. グリッドを 2 つの列に分割するには、[オブジェクトとタイムライン] パネルで [Grid] オブジェクトをダブルクリックしてアクティブにし、[ツール] パネルで [選択内容] ツール Cc295235.2ff91340-477e-4efa-a0f7-af20851e4daa(JA-JP,Expression.30).png を選択して、アートボードの [Grid] の上部にある濃い青のルーラーにマウス ポインターを移動します。オレンジ色の列ルーラーがマウス ポインターに従って移動します。このルーラーは、クリックしたときに新しい列デバイダを配置する場所を示します。

    クリックすると、[Grid] の途中で新しい列デバイダが作成されます。

    青の列デバイダが [Grid] 内に表示されます。

  8. [アセット] パネルの [コントロール] カテゴリから [イメージ] Cc295235.adb61060-da5f-4279-8c0d-3681bfeb145c(JA-JP,Expression.30).png を選択します ([すべて] サブカテゴリをクリックします)。[オブジェクトとタイムライン] パネルで [Grid] 要素がアクティブになっている状態で、[Grid] の右側の列に新しいイメージを描画します。

  9. [オブジェクトとタイムライン] パネルで [イメージ]要素を選択し、[プロパティ] パネルの [共通プロパティ] の下に移動します。[Source] プロパティの右にある [詳細プロパティ オプション] Cc295235.12e06962-5d8a-480d-a837-e06b84c545bb(JA-JP,Expression.30).png をクリックし、[テンプレートのバインド] をポイントして、[ソース] をクリックします。

    これで、イメージ の [Source] プロパティが、このテンプレートを使用する [ImageButton] の [Source] プロパティに対してテンプレート バインドされました。

  10. テンプレートの編集は完了しました。ルート要素のスコープに戻るには、[オブジェクトとタイムライン] パネルで [上へスコープ] をクリックします。

  11. [オブジェクトとタイムライン] パネルで [ImageButton ] を選択した状態で、[プロパティ] パネルの [その他] カテゴリにある [Source] プロパティを見つけます。このプロパティに、コンピューター上のイメージ ファイルのパスを設定します。

    イメージが [ImageButton] コントロールの右側に表示されます。

他のカスタム コントロールにスタイルを適用するには

  1. [アセット] パネルの [プロジェクト] カテゴリで、[ImageButton] コントロールを選択します。アートボードに新しい [ImageButton] コントロールを描画します。

  2. 描画した [ImageButton] を右クリックし、[テンプレートの編集] をクリックして、[リソースの適用] をクリックします。次に、[ImageButtonStyle] というスタイル名をクリックします。

    ImageButtonStyle が新しい [ImageButton] コントロールに適用されます。[プロパティ] パネルの [その他] カテゴリで [Source] プロパティを見つけて、コンピューター上のイメージ ファイルのパスを設定します。

    Cc295235.alert_note(JA-JP,Expression.30).gifメモ :

    代わりに、テンプレートを使用して既にスタイルが適用されている [ImageButton] をアートボードに追加することもできます。[アセット] パネルの [スタイル] カテゴリで [ImageButtonStyle] を選択した後、スタイルを適用した [ImageButton] をアートボードに描画します。

上級者向け : カスタム プロパティに説明を付ける

  1. 分離コード ファイル (Window1.xaml.cs) の先頭に、System.ComponentModel 名前空間への参照を追加します。

    以下で使用する説明属性とカテゴリ属性は、この名前空間で定義されています。

  2. クラス定義の前に、次の行 (太字) を貼り付けます。

    [Description("Represents a custom button control that responds to a Click event. Displays an image using a custom Source property if the Source property is bound to an Image in the template.")]
public class ImageButton : Button

    <Description("Represents a custom button control that responds to a Click event. Displays an image using a custom Source property if the Source property is bound to an Image in the template.")> _
Class ImageButton

  3. カスタム プロパティ定義の前に、次の行 (太字) を貼り付けます。

    [Description("The image displayed in the button if there is an Image control in the template whose Source property is template-bound to the ImageButton Source property."), Category("Common Properties")] 
    public ImageSource Source

    <Description("The image displayed in the button if there is an Image control in the template whose Source property is template-bound to the ImageButton Source property."), Category("Common Properties")> _ 
    Public Property Source() As ImageSource

    Category 属性は、[プロパティ] パネルでプロパティを表示する場所を構成します。

  4. Ctrl + Shift + B キーを押して、プロジェクトをリビルドします。

    [ImageButton] の [Source] プロパティが [プロパティ] パネルの [共通プロパティ] カテゴリに表示されるようになり、[アセット] パネルのプロパティおよびコントロールの上にマウス ポインターを移動すると、ツールヒントに説明が表示されます。

上級者向け : 既定のイメージを表示するコントロールを構成する

コントロールをアートボードに描画するとき、したがってデザイン モードのときにプロパティを既定値に設定するコードを、カスタム コントロールのコンストラクターに追加できます。次の手順を使用して設定するプロパティは、アートボードでの表示に対してのみ適用され、アプリケーションの実行時の表示には適用されません。コンテンツがデータベースや Web サービスから取得される場合など、デザイン モードのときにはコントロールのコンテンツを利用できず、アプリケーションの実行時には利用できる場合に役に立ちます。この場合、アートボード上の [ImageButton] の [Source] プロパティは、明示的に設定されるまでは、プロジェクトのイメージ ファイルの名前に設定されます。

  1. 分離コード ファイル (Window1.xaml.cs) で、プロパティ定義の後に、次のコード行 (太字) を貼り付けます。

    Cc295235.alert_note(JA-JP,Expression.30).gifメモ :

    次のコードのファイル名 (Sunset.jpg) を、実際のプロジェクトでのイメージ ファイルの名前に変更してください。プロジェクトにイメージ ファイルを追加するには、[プロジェクト] パネルでプロジェクト名を右クリックし、[既存のアイテムを追加] をクリックします。

    		 
    public static readonly DependencyProperty SourceProperty = DependencyProperty.Register("Source", typeof(ImageSource), typeof(ImageButton));

// Constructor:  
public ImageButton()  
{  
   if (DesignerProperties.GetIsInDesignMode(this))  
   {  
      this.Source = new BitmapImage(new Uri("Sunset.jpg", UriKind.Relative));  
   }  
}  
Public Shared ReadOnly SourceProperty As DependencyProperty = DependencyProperty.Register("Source", GetType(ImageSource), GetType(ImageButton))

Public Sub New()  
    If DesignerProperties.GetIsInDesignMode(Me) Then  
        Me.Source = New BitmapImage(New Uri("Sunset.jpg", UriKind.Relative))  
    End If  
End Sub  

  2. Ctrl + Shift + B キーを押して、プロジェクトをリビルドします。

    作成したスタイルを使用するアートボードに [ImageButton] を追加すると、ボタンに既定のイメージが表示されるようになります。

    Cc295235.alert_note(JA-JP,Expression.30).gifメモ :

    デザイン モードでは、[Source] プロパティに他の値を設定することはできません。