Blend에서 공용 Silverlight 컨트롤의 스타일 지정 팁

아티클
10/09/2014

JJ169940.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(ko-kr,VS.120).png

Blend for Visual Studio에서는 최적화된 사용자 작업 환경을 만드는 데 사용할 수 있는 Microsoft Silverlight 컨트롤을 제공합니다. 신뢰할 수 있는 출처에서 컨트롤을 다운로드할 수도 있습니다.

자세한 내용은 Import a custom control by adding a reference (Blend)을 참조하십시오.

기능적으로 요구에 맞지만 원하는 방식과 다르게 보이는 컨트롤을 찾은 경우, 그리고 해당 컨트롤이 템플릿을 지원하는 경우 모양을 변경할 컨트롤의 템플릿을 수정할 수 있습니다.

작업을 쉽게 수행하려면 먼저 아트보드에 모든 내용을 그리고, 그리기 도구를 사용하며, 아트 또는 기타 자산을 가져옴으로써 디자인에 초점을 맞출 수있습니다. 완료된 경우 컨트롤로 만들기 명령을 사용하여 개체를 임의 컨트롤의 템플릿으로 변환합니다.

템플릿 바인딩

컨트롤은 템플릿의 개체가 바인딩될 수 있는 대상인 속성을 갖고 있습니다. 이것을 템플릿 바인딩이라고 합니다. 템플릿의 파트를 컨트롤에 바인딩하면 템플릿에 대한 매개 변수를 효과적으로 만들 수 있습니다. 예를 들어 "이 Rectangle은 파란색이다."라고 말하는 대신 "이 Rectangle은 컨트롤의 Background와 같은 색이다."라고 말할 수 있습니다. 따라서 템플릿을 다른 Background 속성과 함께 컨트롤에 적용할 때 그 결과는 다른 색을 가진 템플릿이 됩니다.

속성을 템플릿 바인딩하려면 템플릿에서 개체를 선택하고 속성 패널에서 고급 옵션을 클릭한 다음 템플릿 바인딩에서 속성을 선택합니다.

OpacityMask, Font, FontSize, LayoutTransform 및 RenderTransform과 같은 일부 속성은 템플릿 바인딩하지 않아야 합니다. 이러한 속성은 템플릿의 개체에 자동으로 적용됩니다.

Content 및 Header 속성

몇가지 제어는 Content 속성 (예를들어, Button, CheckBox, RadioButton) 또는 Header 속성 (TabItem, MenuItem)을 포함하고 있습니다. Content및 Header 속성은 모든 종류의 콘텐츠를 표시할 때 사용할 수 있습니다.

모든 종류의 콘텐츠 표시

모든 종류의 콘텐츠(일반 텍스트가 아닌 콘텐츠)를 표시하려면 템플릿의 ContentPresenter와 함께 컨트롤의 Content(또는 Header) 속성으로 템플릿 바인딩되는 Content(또는 Header) 속성이 필요합니다. 컨트롤로 만들기를 사용하여 아트워크를 템플릿에 만드는 경우 Blend는 템플릿에 ContentPresenter를 추가합니다. TextBlock을 사용하여 콘텐츠를 표시한 경우 아크워크를 컨트롤에 만든 후 TextBlock을 삭제합니다. ContentPresenter는 이전에 TextBlock에 표시된 콘텐츠를 표시합니다.

텍스트 표시

텍스트만 표시하려는 경우 ContentPresenter 대신에 TextBlock을 사용할 수 있습니다. TextBlock을 템플릿에 넣은 다음 TextBlock의 Text 속성을 Button의 Content(또는 Header) 속성으로 템플릿 바인딩합니다. 컨트롤로 만들기를 사용하여 아트워크를 템플릿에 만들고 TextBlock을 사용하여 콘텐츠를 표시한 경우 Blend에서 템플릿에 추가한 ContentPresenter를 삭제합니다. 이 스타일이 적용된 컨트롤의 Content(또는 Header) 속성에 텍스트를 추가하면 TextBlock이 텍스트를 표시합니다.

ContentControl로 만들기

컨트롤로 만들기를 사용하여 TextBlock 개체를 포함하는 아트워크를 ContentControl(예: 버튼)에 대한 템플릿으로 변환할 때 Blend는 다음 작업을 수행합니다.

TextBlock 대신에 ContentPresenter를 템플릿에 넣습니다.
TextBlock의 레이아웃 속성을 ContentPresenter에 복사합니다.
TextBlock의 Typography 속성을 컨트롤의 스타일에 복사합니다.
TextBlock의 Text 속성을 컨트롤의 Content 속성 인스턴스에 복사합니다.

TextBox로 만들기

컨트롤로 만들기를 사용하여 TextBlock 개체를 포함하는 아트워크를 TextBox에 대한 템플릿으로 변환할 때 Blend는 다음 작업을 수행합니다.

ContentElement 파트를 나타내는 ScrollViewer를 TextBlock 대신에 템플릿에 넣습니다.
TextBlock의 레이아웃 속성을 ContentElement 파트에 복사합니다.
TextBlock의 Typography 속성을 TextBox 스타일에 복사합니다.
TextBlock의 Text 속성을 TextBox 컨트롤의 인스턴스에 복사합니다.

시각적 상태

상태 그룹의 시각적 상태는 상호 배타적입니다. 그러나 모든 그룹의 상태는 다른 모든 그룹의 상태와 독립적입니다. 이는 각 그룹의 한 상태가 충돌을 일으키지 않고 언제든지 적용될 수 있음을 의미합니다.

같은 그룹에서 두 가지 상태 이상에 속하는 개체 속성을 변경하는 것은 일반적인 사례입니다. 예를 들어 Rectangle의 Fill 속성을 MouseOver, Pressed 및 Disabled 상태에 대해 변경할 수 있습니다. 이 작업은 CommonStates 상태 그룹의 한 상태만이 동시에 적용되기 때문에 가능합니다. 그러나 개체 속성을 둘 이상의 상태 그룹에서 변경하면 상태 그룹의 독립적 특성이 깨지게 되며 둘 이상의 상태가 동시에 같은 개체 속성을 설정하려는 경우의 충돌이 발생합니다. Blend는 상태 충돌이 감지되면 경고 메시지를 표시합니다.

중요

각 상태 이름은 템플릿 내에서 고유해야 하며 상태 그룹 전체에 걸쳐서도 고유해야 합니다.

Normal 시각적 상태

각 상태 그룹에는 기본 상태가 있습니다. 예를 들어 CommonStates에는 Normal이 있으며 CheckedStates에는 Unchecked가 있습니다. 개체 속성을 수정할 때에는 기본 상태를 변경하지 않고 그대로 유지하는 것이 가장 좋습니다. 확인란을 예로 들면, 확인 표시 및 확인란 사각형은 Base에서 비어 있고(숨겨져 있고) Checked(확인 표시 상태) 및 Focused(확인란 사각형 상태)에서 표시됩니다.

Base는 상태가 아님을 기억해야 합니다. 이런 이유로 Base에서는 전환을 정의하거나 제어할 수 없습니다. 예를 들어, Base 가 상태가 아니기 떄문에 Base 를 MouseOver 로 바꾸어 정의할 수 없습니다. Base는 적용이 없는 상태의 기본 형태의 템플릿을 나타냅니다. 상태는 전환을 정의할 때에만 고려해야 합니다.

사용자 고유의 템플릿을 만들 때 각 상태 그룹에 Normal 상태를 정의해야 하며 컨트롤을 로드할 때에도 컨트롤 기본값이 Normal 상태가 되도록 해야 합니다. 컨트롤(예: Button)을 로드할 때 Normal 상태가 아닌 경우 전환(예: Normal 상태에서 MouseOver 상태로의 전환)이 실행되지 않습니다.