NuGet 패키지인 UI 컨트롤 만들기

Visual Studio 2017부터 NuGet 패키지에서 제공하는 UWP 및 WPF 컨트롤에 추가된 기능을 활용할 수 있습니다. 이 가이드는 ExtensionSDKasNuGetPackage 샘플을 사용하여 UWP 컨트롤의 컨텍스트에서 이러한 기능을 설명합니다. 달리 언급하지 않는 한 WPF 컨트롤에도 동일한 내용이 적용됩니다.

사전 요구 사항

  1. Visual Studio 2017
  2. UWP 패키지를 만드는 방법 이해

라이브러리 레이아웃 생성

참고

이 내용은 UWP 컨트롤에만 적용됩니다.

GenerateLibraryLayout 속성을 설정하면 프로젝트 빌드 출력이 nuspec의 개별 파일 항목 없이, 패키지할 준비가 된 레이아웃에 생성됩니다.

프로젝트 속성에서 빌드 탭으로 이동하여 “라이브러리 레이아웃 생성” 확인란을 선택합니다. 그러면 프로젝트 파일이 수정되고 현재 선택된 빌드 구성 및 플랫폼에 대해 GenerateLibraryLayout 플래그가 true로 설정됩니다.

또는 프로젝트 파일을 편집하여 첫 번째 무조건 속성 그룹에 <GenerateLibraryLayout>true</GenerateLibraryLayout>을 추가합니다. 그러면 빌드 구성 및 플랫폼에 상관없이 속성이 적용됩니다.

XAML 컨트롤에 도구 상자/자산 창 지원 추가

Visual Studio 및 Blend의 자산 창에 있는 XAML 디자이너의 도구 상자에 XAML 컨트롤을 표시하려면 패키지 프로젝트의 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’)입니다. UIFramework 특성은 컨트롤을 도구 상자에 표시하기 위해 Visual Studio 16.7 미리 보기 3 이상의 ToolboxItems 노드에 필요합니다.
  • blend_category: Blend 디자이너의 자산 창에서 컨트롤이 표시되어야 하는 그룹의 레이블입니다. BlendCategory는 컨트롤을 자산에 표시하기 위해 필요합니다.
  • type_full_name_n: ManagedPackage.MyCustomControl과 같은 네임스페이스를 포함하여 각 컨트롤의 정규화된 이름입니다. 점 양식은 관리 및 네이티브 형식에 사용됩니다.

고급 시나리오에서 단일 패키지에 여러 컨트롤 어셈블리가 포함되는 경우 <FileList> 내에 여러 <File> 요소가 포함될 수도 있습니다. 컨트롤을 별도 범주로 구성하려는 경우 단일 <File> 내에 여러 <ToolboxItems> 노드가 있을 수도 있습니다.

다음 예제에서 ManagedPackage.winmd에서 구현된 컨트롤은 "관리 패키지"라는 그룹의 Visual Studio 및 Blend에 표시되고 "MyCustomControl"은 해당 그룹에 표시됩니다. 이러한 이름은 모두 임의로 지정됩니다.

<FileList>
  <File Reference = "ManagedPackage.winmd">
    <ToolboxItems UIFramework="WPF" VSCategory="Managed Package" BlendCategory="Managed Package">
      <Item Type="ManagedPackage.MyCustomControl" />
    </ToolboxItems>
  </File>
</FileList>

An example control as it appear in Visual Studio

An example control as it appear in Blend

참고

도구 상자/자산 창에서 확인하려는 모든 컨트롤을 명시적으로 지정해야 합니다. Namespace.ControlName 형식으로 지정해야 합니다.

컨트롤에 사용자 지정 아이콘 추가

도구 상자/자산 창에서 사용자 지정 아이콘을 표시하려면 이미지를 프로젝트 또는 "Namespace.ControlName.extension"이라는 해당 design.dll 프로젝트에 추가하고 빌드 작업을 "포함 리소스"로 설정합니다. 또한 연결된 AssemblyInfo.cs가 ProvideMetadata 특성([assembly: ProvideMetadata(typeof(RegisterMetadata))])을 지정하는지 확인해야 합니다. 이 샘플을 참조합니다.

지원되는 형식은 .png, .jpg, .jpeg, .gif.bmp입니다. 권장 형식은 16픽셀 x 16픽셀의 BMP24입니다.

Tool box icon sample

분홍색 배경은 런타임에 바뀝니다. 아이콘은 Visual Studio 테마를 변경하고 배경색이 예상되면 다시 그려집니다. 자세한 내용은 Visual Studio용 이미지 및 아이콘을 참조하세요.

아래 예제에서 프로젝트에는 "ManagedPackage.MyCustomControl.png"라는 이미지 파일이 있습니다.

Setting a custom icon in a project

참고

네이티브 컨트롤의 경우 design.dll 프로젝트에서 리소스로 아이콘을 삽입해야 합니다.

특정 Windows 플랫폼 버전 지원

UWP 패키지에는 앱을 설치할 수 있는 OS 버전의 상한 및 하한 경계를 정의하는 TargetPlatformVersion(TPV) 및 TargetPlatformMinVersion(TPMinV)이 있습니다. 나아가 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의 경우 .NET Framework v4.6.1 이상을 대상으로 하는 프로젝트에서 WPF 컨트롤 패키지를 사용하는 예를 계속합니다.

\lib
  \net461
    \Design
      \MyControl.design.dll
    \your_assembly_name
      \Themes
        Generic.xaml

참고

기본적으로 컨트롤 속성은 속성 검사자의 기타 범주에 표시됩니다.

문자열 및 리소스 사용

패키지에 문자열 리소스(.resw)를 포함할 수 있으며 해당 리소스를 컨트롤 또는 사용 중인 UWP 프로젝트에서 사용할 수 있습니다. .resw 파일의 빌드 작업 속성을 PRIResource로 설정합니다.

예를 들어 ExtensionSDKasNuGetPackage 샘플에서 MyCustomControl.cs를 참조하세요.

참고

이 내용은 UWP 컨트롤에만 적용됩니다.

참조