次の方法で共有

チュートリアル : デザイン時のプロパティ動作の変更

  • [アーティクル]

機能拡張を使用して WPF Designer for Visual Studio をカスタマイズするときに、カスタム コントロールを作成することがよくあります。 ユーザーが通常どおりにプロパティの値を設定できるようにすると同時に、コントロールのプロパティが実行時とデザイン時で異なる動作をするように設定する必要がある場合があります。 たとえば、ユーザーがコントロールの表示プロパティを false に設定できる場合でも、デザイン時にはそのコントロールを表示する必要があります。

このチュートリアルでは、カスタム Button コントロールを作成し、Background プロパティと Content プロパティの動作を変更します。 これを実現するには、DesignModeValueProvider を作成して、カスタム コントロールにアタッチします。 DesignModeValueProvider がユーザーによって加えられたプロパティの変更をキャプチャし、TranslatePropertyValue メソッドに独自のロジックを挿入すると、DesignModeValueProvider が新しい値をデザイナーに渡します。

重要

この方法を使用した場合、デザイナー内でのプロパティの動作が、XAML ビュー内のプロパティの値と一致しません。 XAML ビューには、デザイン時にユーザーが入力した値が表示されます。 XAML ビュー内の値は、プロパティの実行時の動作を表します。

このチュートリアルでは次のタスクを行います。

  • WPF カスタム コントロール ライブラリ プロジェクトを作成する。

  • カスタム DesignModeValueProvider を作成する。

  • カスタム ボタン コントロールを作成する。

  • DesignModeValueProvider をカスタム コントロールにアタッチする。

  • テスト アプリケーションを作成する。

  • カスタム コントロールをテストする。

注意

実際に画面に表示されるダイアログ ボックスとメニュー コマンドは、アクティブな設定またはエディションによっては、ヘルプの説明と異なる場合があります。 設定を変更するには、[ツール] メニューの [設定のインポートとエクスポート] をクリックします。 詳細については、「設定の操作」を参照してください。

必須コンポーネント

このチュートリアルを実行するには、次のコンポーネントが必要です。

  • Visual Studio 2010

WPF カスタム コントロール ライブラリ プロジェクトの作成

プロジェクトを作成するには

  1. Visual Basic または Visual C# で CustomButton という名前の新しい WPF カスタム コントロール ライブラリ プロジェクトを作成します。

    コード エディターで CustomControl1 のコードが開きます。

  2. 次のアセンブリへの参照を追加します。

    • Microsoft.Windows.Design.Extensibility

  3. ソリューション エクスプローラーで、コード ファイル名を CustomButton.cs または CustomButton.vb に変更します。

    このプロジェクト内のすべての参照について名前を変更するかどうかをたずねるメッセージ ボックスが開いたら、[はい] をクリックします。

  4. [ビルド] メニューの [ソリューションのビルド] をクリックします。

カスタム DesignModeValueProvider の作成

この手順では、カスタムの DesignModeValueProvider を作成します。 TranslatePropertyValue メソッドで、Button の Content プロパティを変更して、デザイナーに大文字で表示されるようにします。 Button の Background プロパティも変更して、デザイナーに既定のシステム カラーで表示されるようにします。 これらの変更は、デザイナーにのみ影響します。 実行時には、Content プロパティおよび Background プロパティは、ユーザーが設定した値で表示されます。

注意

この手順では、2 種類のプロパティを処理する 1 つの DesignModeValueProvider を作成します。 複数の DesignModeValueProvider オブジェクトを作成して、異なるプロパティを処理することもできます。

カスタム DesignModeValueProvider を作成するには

  1. CustomButtonDesignModeValueProvider.cs または CustomButtonDesignModeValueProvider.vb という名前の新しいクラスを、CustomButton プロジェクトに追加します。

    新しいクラスがコード エディターで開きます。

  2. 次の名前空間をファイルの先頭に追加します。 既に名前空間がある場合は、この名前空間に置き換えます。

    
Imports System
Imports System.Windows                  'SystemColors
Imports System.Windows.Media            'SolidColorBrush
Imports System.Windows.Controls         'Button
Imports Microsoft.Windows.Design.Model  'DesignModeValueProvider
Imports Microsoft.Windows.Design.Metadata


    
using System;
using System.Windows;                   //SystemColors
using System.Windows.Media;             //SolidColorBrush
using System.Windows.Controls;          //Button
using Microsoft.Windows.Design.Model;
using Microsoft.Windows.Design.Metadata;   //DesignModeValueProvider

  3. CustomButtonDesignModeValueProvider クラスを編集して、DesignModeValueProvider からの継承を指定します。

    
Public Class CustomButtonDesignModeValueProvider
    Inherits DesignModeValueProvider

End Class

    
class CustomButtonDesignModeValueProvider : DesignModeValueProvider
{
}

  4. クラスにコンストラクターを追加します。 コンストラクターで、キャプチャするプロパティを識別します。

    
Public Sub New()
    Properties.Add(GetType(Button), "Content")
    Properties.Add(GetType(Button), "Background")
End Sub

    
public CustomButtonDesignModeValueProvider()
{
    Properties.Add( typeof(Button), "Content");
    Properties.Add(typeof(Button), "Background");
}

  5. クラスの TranslatePropertyValue メソッドをオーバーライドします。 ここで、デザイン時のプロパティの新しい動作を指定します。

    
Public Overrides Function TranslatePropertyValue( _
    ByVal item As ModelItem, _
    ByVal identifier As PropertyIdentifier, _
    ByVal value As Object) As Object

    If identifier.DeclaringType Is GetType(Button) And _
       identifier.Name = "Content" Then

        Return value.ToString().ToUpper()
    End If

    If identifier.DeclaringType Is GetType(Button) And _
       identifier.Name = "Background" Then

        Return New SolidColorBrush(SystemColors.ControlColor)
    End If

    Return MyBase.TranslatePropertyValue(item, identifier, value)
End Function

    
public override object TranslatePropertyValue(ModelItem item, PropertyIdentifier identifier, object value)
{
    if (identifier.DeclaringType == typeof( Button ) &&
        identifier.Name == "Content" )
    {
        return ((string)value).ToUpper();
    }

    if (identifier.DeclaringType == typeof(Button) &&
        identifier.Name == "Background")
    {
        return new SolidColorBrush(SystemColors.ControlColor);
    }

    return base.TranslatePropertyValue(item, identifier, value);
}

  6. [ビルド] メニューの [ソリューションのビルド] をクリックします。

カスタム ボタン コントロールの作成

この手順では、カスタム コントロールを作成します。 Button を継承するだけで追加のカスタム機能は持たない、単純なカスタム コントロールを作成します。

カスタム ボタン コントロールを作成するには

  1. CustomButton クラスをコード エディターで開きます。

  2. 次の名前空間をファイルの先頭に追加します。 既に名前空間がある場合は、この名前空間に置き換えます。

    
Imports System.Windows.Controls             'Button
Imports Microsoft.Windows.Design.Features   'Feature

    
using System.Windows.Controls;              //Button
using Microsoft.Windows.Design.Features;    //Feature

  3. 既存のクラスを次のクラスに置き換えます。

    
Public Class CustomButton
    Inherits Button

    Shared Sub New()

    End Sub
End Class

    
public class CustomButton : Button
{
    static CustomButton()
    {
    }
}

  4. [ビルド] メニューの [ソリューションのビルド] をクリックします。

カスタム コントロールへの DesignModeValueProvider のアタッチ

この手順では、FeatureAttribute 属性を使用して、カスタム コントロールに DesignModeValueProvider をアタッチします。

注意

提供するカスタムのデザイン時メタデータを使用して、カスタム コントロールに DesignModeValueProvider をアタッチすることもできます。 詳細については、「デザイン時メタデータの提供」を参照してください。

カスタム コントロールに DesignModeValueProvider をアタッチするには

  1. コード エディターで、CustomButton クラスの宣言を検索します。 結果は次のようになります。

    
Public Class CustomButton
    Inherits Button

    
public class CustomButton : Button

  2. クラス宣言に Feature 属性を追加し、DesignModeValueProvider を指定します。

    <Feature(GetType(CustomButtonDesignModeValueProvider))> _
Public Class CustomButton
    Inherits Button

    [Feature(typeof(CustomButtonDesignModeValueProvider))]
public class CustomButton : Button

  3. [ビルド] メニューの [ソリューションのビルド] をクリックします。

テスト アプリケーションの作成

テスト アプリケーションを作成するには

  1. CustomButtonTestApplication という名前の WPF アプリケーション プロジェクトをソリューションに追加します。

    WPF デザイナーで MainWindow.xaml が開きます。

  2. ソリューション エクスプローラーで、プロジェクトを右クリックし、[スタートアップ プロジェクトに設定] をクリックします。

  3. [プロジェクト] メニューの [参照の追加] をクリックし、[プロジェクト] タブを使用して、CustomButton プロジェクトへの参照を追加します。

  4. [ビルド] メニューの [ソリューションのビルド] をクリックします。

カスタム コントロールのテスト

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

  1. MainWindow.xaml の XAML ビューで、既存の XAML を次の XAML に置き換えます。

    <Window x:Class="CustomButtonTestApplication.MainWindow"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:cb="clr-namespace:CustomButton;assembly=CustomButton"
    Title="MainWindow" Height="300" Width="300">
    <Grid>
        <cb:CustomButton Height="75" Width="100">Button1</cb:CustomButton>
    </Grid>
</Window>

  2. デザイン ビューでボタンを選択します。 必要に応じて、デザイナーの最上部の情報バーをクリックしてビューを再度読み込みます。

  3. [プロパティ] ウィンドウの Background プロパティを選択します。

  4. 「Red」と入力し、Enter キーを押します。

    XAML はコード Background="Red" で更新されますが、デザイン ビューではボタンの色は変わりません。

  5. [プロパティ] ウィンドウの Content プロパティを選択します。

  6. 「Hello World」と入力し、Enter キーを押します。

    XAML はコンテンツ Hello World で更新されますが、デザイン ビューではボタンは "HELLO WORLD" というテキストを表示します。

  7. [デバッグ] メニューの [デバッグ開始] をクリックします。

    アプリケーションが起動し、ウィンドウが表示されます。 実行時のボタンは赤色で、"Hello World" というテキストが表示されます。

  8. ウィンドウを閉じます。

参照

処理手順

方法 : プロパティの動作をデザイン時に変更する

方法 : カスタム コントロールがデザイン時のものか実行時のものかを判断する

その他の技術情報

デザイン時の動作と実行時の動作

WPF デザイナーの機能拡張について

WPF デザイナーの機能拡張

デザイン時メタデータの提供