공통 Silverlight 컨트롤의 스타일 지정 팁

아티클
10/11/2017

Ee371156.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(ko-kr,Expression.40).png

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

자세한 내용은 참조를 추가하여 사용자 지정 컨트롤 가져오기를 참조하십시오.

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

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

템플릿 바인딩

컨트롤은 템플릿의 개체가 바인딩될 수 있는 대상인 속성을 갖고 있습니다. 이것을 템플릿 바인딩 이라고 합니다. 템플릿의 파트를 컨트롤에 바인딩하면 템플릿에 대한 매개 변수를 효과적으로 만들 수 있습니다. 예를 들어 "이 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 ) 속성이 필요합니다. 컨트롤로 만들기를 사용하여 아트워크를 템플릿에 만드는 경우 Expression Blend는 템플릿에 ContentPresenter를 추가합니다. TextBlock 을 사용하여 콘텐츠를 표시한 경우 아크워크를 컨트롤에 만든 후 TextBlock을 삭제합니다. ContentPresenter는 이전에 TextBlock 에 표시된 콘텐츠를 표시합니다.

텍스트 표시

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

ContentControl로 만들기

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

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

TextBox로 만들기

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

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

시각적 상태

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

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

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

Normal 시각적 상태

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

Base 는 상태가 아님을 기억해야 합니다. 이런 이유로 Base 에서는 전환을 정의하거나 제어할 수 없습니다. 예를 들어 Base 는 상태가 아니므로 Base 에서 MouseOver 로의 전환을 정의할 수 없습니다. Base 는 상태가 적용되지 않은 기본 양식의 템플릿을 나타냅니다. 상태는 전환을 정의할 때에만 고려해야 합니다.

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

이 섹션의 내용

참조 항목

개념

컨트롤에 대해 다른 시각적 상태 정의
Silverlight 컨트롤 템플릿의 구성 요소 스타일 지정
템플릿을 지원하는 컨트롤 스타일
WPF 단순한 스타일에 대한 스타일 팁