WPF ツールボックス コントロールを作成する

  • [アーティクル]

WPF (Windows Presentation Framework) ツールボックス コントロール テンプレートを使用すると、拡張機能のインストール時に自動的に ツールボックス に追加される WPF コントロールを作成できます。 このチュートリアルでは、テンプレートを使用して、他のユーザーに配布できる ツールボックス コントロールを作成する方法について説明します。

ツールボックス コントロールを作成する

WPF ツールボックス コントロールを使用して拡張機能を作成する

  1. MyToolboxControl という名前の VSIX プロジェクトを作成します。 VSIX プロジェクト テンプレートは、 [新しいプロジェクト] ダイアログで「vsix」と検索すると見つかります。

  2. プロジェクトが開いたら、 MyToolboxControlという名前の WPF ツールボックス コントロール 項目テンプレートを追加します。 ソリューション エクスプローラーで、プロジェクト ノードを右クリックして、 [追加]>[新しい項目]の順に選択します。 [新しい項目の追加] ダイアログで、 [Visual C#]>[拡張性] に移動して、 [WPF ツールボックス コントロール]を選択します。 ウィンドウの下部にある [名前] フィールドで、コマンド ファイル名を MyToolboxControl.cs に変更します。

    ソリューションには、 ツールボックスにコントロールを追加し、デプロイ用の VSIX マニフェストに Microsoft.VisualStudio.ToolboxControl アセット エントリを追加するユーザー コントロール ProvideToolboxControlAttribute RegistrationAttribute が含まれるようになりました。

コントロール UI を作成するには

  1. デザイナーで MyToolboxControl.xaml を開きます。

    デザイナーに、 Button コントロールを含む Grid コントロールが表示されます。

  2. グリッド レイアウトを配置します。 Grid コントロールを選択すると、グリッドの上端と左端に青色のコントロール バーが表示されます。 グリッドに行と列を追加するには、バーをクリックします。

  3. グリッドに子コントロールを追加します。 子コントロールは、 ツールボックス からグリッドのセクションにドラッグするか、XAML で Grid.Row および Grid.Column 属性を設定することによって配置できます。 次の例では、グリッドの一番上の行に 2 つのラベルを追加し、2 番目の行にボタンを追加します。

    <Grid>
    <Label Grid.Row="0" Grid.Column="0" Name="label1" />
    <Label Grid.Row="0" Grid.Column="1" Name="label2" />
    <Button Name="button1" Click="button1_Click" Grid.Row="1" Grid.ColumnSpan="2" />
</Grid>

コントロールの名前を変更する

既定では、コントロールは、 MyToolboxControl.MyToolboxControlという名前のグループの MyToolboxControl として ツールボックス に表示されます。 これらの名前は MyToolboxControl.xaml.cs ファイルで変更できます。

  1. コード ビューで MyToolboxControl.xaml.cs を開きます。

  2. MyToolboxControl クラスを見つけて、その名前を TestControl に変更します。 (これを行う最も早い方法は、クラスの名前を変更し、コンテキスト メニューから [名前の変更] を選択して、手順を完了することです。 ([名前の変更] コマンドの詳細については、 名前の変更のリファクタリング (C#)に関する記事を参照してください。)

  3. ProvideToolboxControl 属性に移動し、最初のパラメーターの値を「Test」に変更します。 これは、 ツールボックスのコントロールを含むグループの名前です。

    結果のコードは次のようになります。

    [ProvideToolboxControl("Test", true)]
public partial class TestControl : UserControl
{
    public TestControl()
    {
        InitializeComponent();
    }
}

ビルド、テスト、デプロイ

プロジェクトをデバッグするときに、Visual Studio の実験用インスタンスの ツールボックス にコントロールがインストールされている必要があります。

コントロールをビルドおよびテストするには

  1. プロジェクトをリビルドし、デバッグを開始します。

  2. Visual Studio の新しいインスタンスで、WPF アプリケーション プロジェクトを作成します。 XAML デザイナーが開いていることを確認します。

  3. [ツールボックス] で対象のコントロールを見つけて、デザイン画面にドラッグします。

  4. WPF アプリケーションのデバッグを開始します。

  5. コントロールが表示されることを確認します。

コントロールを配置するには

  1. テストされたプロジェクトをビルドすると、プロジェクトの *\bin\debug* フォルダーで .vsix ファイルを見つけることができます。

  2. .vsix ファイルをダブルクリックし、インストール手順に従うことによって、ローカル コンピューターにそれをインストールすることができます。 コントロールをアンインストールするには、 [ツール]>[拡張機能と更新プログラム] に移動し、コントロールの拡張機能を見つけて、 [アンインストール]をクリックします。

  3. .vsix ファイルをネットワークまたは Web サイトにアップロードします。

    ファイルを Visual Studio Marketplace Web サイトにアップロードした場合、他のユーザーは Visual Studio の [ツール]>[拡張機能と更新プログラム] を使用し、コントロールをオンラインで見つけてインストールすることができます。