NuGet パッケージとして UI コントロールを作成する
- [アーティクル]
-
-
Visual Studio 2017 以降では、NuGet パッケージで配信する UWP コントロールと WPF コントロール用の追加機能を活用できます。 このガイドでは、UWP コントロールのコンテキストから、ExtensionSDKasNuGetPackage サンプルを使用してこれらの機能を紹介します。 特に言及がない限り、WPF コントロールに対しても同じことが該当します。
- Visual Studio 2017
- UWP パッケージの作成方法
注意
これは、UWP コントロールにのみ該当します。
GenerateLibraryLayout
プロパティを設定すると、nuspec に個別のファイル エントリがなくても、パッケージ化の準備ができているレイアウトでプロジェクト ビルドの出力が生成されます。
プロジェクト プロパティから [ビルド] タブに移動し、[ライブラリ レイアウトの生成] チェック ボックスをオンにします。 これにより、プロジェクト ファイルが変更され、現在選択しているビルド構成とプラットフォームに対して GenerateLibraryLayout
フラグが true に設定されます。
または、プロジェクト ファイルを編集して、最初の無条件プロパティ グループに <GenerateLibraryLayout>true</GenerateLibraryLayout>
を追加します。 これにより、ビルド構成とプラットフォームに関係なく、プロパティが適用されます。
XAML コントロールが Visual Studio の XAML デザイナーのツールボックスと Blend の [資産] ウィンドウに表示されるようにするには、パッケージ プロジェクトの tools
フォルダーのルートに VisualStudioToolsManifest.xml
ファイルを作成します。 このファイルは、ツールボックスまたは [資産] ウィンドウにコントロールを表示する必要がない場合は必要ありません。
\build
\lib
\tools
VisualStudioToolsManifest.xml
ファイルの構造は、次のとおりです。
<FileList>
<File Reference = "your_package_file">
<ToolboxItems UIFramework="WPF" VSCategory="vs_category" BlendCategory="blend_category">
<Item Type="type_full_name_1" />
<!-- Any number of additional Items -->
<Item Type="type_full_name_2" />
<Item Type="type_full_name_3" />
</ToolboxItems>
</File>
</FileList>
それぞれの文字について以下に説明します。
- your_package_file:
ManagedPackage.winmd
などのコントロール ファイルの名前 ("ManagedPackage" はこの例で任意の名前を使用するだけで、それ以外の意味を持ちません)。
- vs_category: Visual Studio デザイナーのツールボックスにコントロールを表示するグループのラベル。
VSCategory
は、コントロールをツールボックスに表示するために必要です。
ui_framework: フレームワークの名前 ('WPF' など)。ツールボックスにコントロールを表示するには、Visual Studio 16.7 Preview 3 以降の ToolboxItems ノードに UIFramework
属性が必要です。
- blend_category: Blend デザイナーの [資産] ウィンドウにコントロールを表示するグループのラベル。
BlendCategory
は、コントロールを [資産] に表示するために必要です。
- type_full_name_n:
ManagedPackage.MyCustomControl
など、名前空間を含む、各コントロールの完全修飾名です。 マネージド コードとネイティブの両方の種類でドット形式が使用されることに注意してください。
より高度なシナリオでは、1 つのパッケージに複数のコントロール アセンブリが含まれているときに、複数の <File>
要素を <FileList>
に含めることもできます。 コントロールをカテゴリ別に整理する場合は、複数 <ToolboxItems>
ノードを 1 つの <File>
内に含めることもできます。
次の例では、ManagedPackage.winmd
内に実装されたコントロールが、Visual Studio と Blend で “Managed Package” という名前のグループに表示され、そのグループに “MyCustomControl” が表示されます。 これらのすべての名前は任意です。
<FileList>
<File Reference = "ManagedPackage.winmd">
<ToolboxItems UIFramework="WPF" VSCategory="Managed Package" BlendCategory="Managed Package">
<Item Type="ManagedPackage.MyCustomControl" />
</ToolboxItems>
</File>
</FileList>
注意
ツールボックス/資産ウィンドウに表示するには、すべてのコントロールを明示的に指定する必要があります。 Namespace.ControlName
形式で指定したことを確認してください。
ツールボックス/資産ウィンドウにカスタム アイコンを表示するには、プロジェクトに画像を追加するか、"Namespace.ControlName.extension" という名前の対応する design.dll
プロジェクトに画像を追加し、ビルド アクションを "埋め込みリソース" に設定します。 また、関連付けられている AssemblyInfo.cs
によって ProvideMetadata 属性 ([assembly: ProvideMetadata(typeof(RegisterMetadata))]
) が指定されていることを確認する必要があります。 このサンプルをご覧ください。
利用できる形式は .png
、.jpg
、.jpeg
、.gif
、.bmp
です。 推奨される形式は、16 × 16 ピクセルの BMP24 です。
ピンク色の背景は実行時に置き換わります。 アイコンの色は、Visual Studio のテーマが変更され、その背景色が予想されるときに変更されます。 詳細については、「Visual Studio のイメージとアイコン」を参照してください。
次の例では、プロジェクトには、"ManagedPackage.MyCustomControl.png" という名前の画像ファイルが含まれています。
注意
ネイティブ コントロールの場合は、design.dll
プロジェクトでリソースとしてアイコンを配置する必要があります。
UWP パッケージに含まれる TargetPlatformVersion (TPV) と TargetPlatformMinVersion (TPMinV) は、アプリケーションをインストールできる OS バージョンの上限と下限の境界を定義します。 TPV ではさらに、アプリがビルドされる SDK のバージョンを指定します。 UWP パッケージを作成するときにこれらのプロパティを考慮してください。アプリで定義されているプラットフォームのバージョンの範囲外の API を使用すると、ビルドが失敗したり、実行時にアプリが失敗したりします。
たとえば、コントロール パッケージの TPMinV を Windows 10 Anniversary Edition (10.0、ビルド 14393) に設定し、その下限に一致する UWP プロジェクトによってのみパッケージが使用されるようにしたとします。 UWP プロジェクトでパッケージを使用できるようにするには、次のフォルダー名を使用してコントロールをパッケージ化する必要があります。
\lib\uap10.0.14393\*
\ref\uap10.0.14393\*
NuGet では、使用するプロジェクトの TPMinV が自動的にチェックされ、Windows 10 Anniversary Edition (10.0、ビルド 14393) よりも低かった場合はインストールが失敗します。
WPF の場合、たとえば、.NET Framework v4.6.1 以上をターゲットとするプロジェクトにのみ WPF コントロールのパッケージが使用されるようにするとします。 これを強制するには、次のフォルダー名を使用してコントロールをパッケージ化する必要があります。
\lib\net461\*
\ref\net461\*
プロパティ インスペクターのどこにコントロールのプロパティが表示されるかを構成するには、カスタム装飾などを追加し、ターゲット プラットフォームに合わせて design.dll
ファイルを lib\uap10.0.14393\Design
フォルダー内に配置します。 また、[テンプレート>のコピーの編集] 機能が機能するようにするには、フォルダーに<your_assembly_name>\Themes
マージするリソース ディクショナリとすべてのリソース ディクショナリを含めるGeneric.xaml
必要があります (ここでも、実際のアセンブリ名を使用)。 (このファイルはコントロールの実行時の動作には影響しません)。その結果、フォルダー構造は次のようになります。
\lib
\uap10.0.14393
\Design
\MyControl.design.dll
\your_assembly_name
\Themes
Generic.xaml
WPF の場合は、WPF コントロールのパッケージが .NET Framework v4.6.1 以上をターゲットとするプロジェクトによって使用される例で続行します。
\lib
\net461
\Design
\MyControl.design.dll
\your_assembly_name
\Themes
Generic.xaml
注意
既定では、コントロールのプロパティは、プロパティ インスペクターの [その他] カテゴリの下に表示されます。
文字列リソース (.resw
) をパッケージに埋め込み、コントロールまたは使用中の UWP プロジェクトでそれを使用して、.resw
ファイルの [ビルド アクション] プロパティを PRIResource に設定することができます。
たとえば、ExtensionSDKasNuGetPackage サンプルの MyCustomControl.cs を参照してください。
注意
これは、UWP コントロールにのみ該当します。