다양한 상태의 시스템 컨트롤 모양 수정

컨트롤은 어떤 상태에 있느냐에 따라 다르게 보일 수 있습니다. 예를 들어 단추 위로 마우스 포인터를 가져갈 때 해당 단추의 색이 약간 바뀌는 경우를 들 수 있습니다. "MouseOver"는 단추의 상태 중 하나입니다. 다양한 상태의 시스템 컨트롤 모양을 사용자 지정할 수 있습니다.

다음 절차에서는 단추(Button)를 사용자 지정하는 방법을 보여 주고 있지만 Microsoft Expression Blend 2에 포함된 어떤 시스템 컨트롤 또는 Control 클래스를 상속하는, 가져온 항목인 어떤 사용자 지정 Silverlight 2 컨트롤이라도 사용자 지정할 수 있습니다.

다양한 상태의 단추 모양 수정

1. 시스템 컨트롤의 재사용 가능한 템플릿 만들기를 수행합니다(예: Button  컨트롤).

2. 아직 템플릿 편집 모드가 아니면 아트보드에서 컨트롤을 마우스 오른쪽 단추로 클릭하고 컨트롤 구성 요소(템플릿) 편집을 가리킨 다음 템플릿 편집을 클릭합니다. 필요에 따라 개체를 선택한 다음 이동 경로 탐색 막대에서 Template을 클릭할 수도 있습니다(선택 사항).

   

3. 템플릿 편집 모드인 동안에는 Normal 및 MouseOver 같은 단추 상태가 인터랙션 패널의 상태에 표시됩니다. 상태는 상태 그룹(예: CommonStates 및 FocusStates)에 포함되어 있습니다.

   

   템플릿의 구성 요소가 개체 및 타임라인에 표시됩니다. 이는 선택한 상태에 대해 수정할 수 있는 구성 요소의 모양입니다.

   

4. 상태에서 MouseOver를 클릭합니다. 빨간색 원이 아트보드 맨 위에 나타나 상태 기록 모드가 설정되어 있음을 알 수 있습니다. 즉, 변경한 모든 속성 내용이 선택한상태에 대해 기록됩니다. 개체 및 타임라인에서 Base 선택 시와 다르게 설정된 속성이 있는 템플릿의 구성 요소 옆에 확장기 단추를 둘러싼 빨간색 원이 나타나 속성 변경이 있음을 알려 줍니다.

   

5. MouseOver 상태일 때의 단추 크기를 변경하려면 개체 및 타임라인에서 **[Grid]**를 클릭합니다.

   팁:
   Grid 는 가로 맞춤, 세로 맞춤 및 여백에 따라 자식 개체를 정렬하는 레이아웃 패널입니다. 레이아웃 패널에 대한 자세한 내용은 레이아웃 개요 및 모눈 패널을 참조하십시오.

6. 속성 패널의 변형에서 비율 크기 조정  탭을 클릭합니다. X 및 Y 값을 1.1로 변경합니다.

7. 작업 내용을 저장(Ctrl+S)한 다음 F5 키를 눌러 응용 프로그램을 빌드하고 테스트합니다. 브라우저 창에서 응용 프로그램이 열리면 마우스 포인터를 단추 위로 가져가서 해당 단추가 확장되는지 확인합니다.

문제 해결

• 일부 템플릿 구성 요소의 속성은 템플릿 외부의 값에 바인딩됩니다. 예를 들어 Background 구성 요소의 Fill 속성은 단추(Button)의 Background 속성에 템플릿 바인딩됩니다. 즉, 이 템플릿을 사용하는 단추를 그리면 템플릿이 단추 자체에 설정한 값을 사용하게 됩니다. 템플릿 바인딩을 사용하면 사용자 지정된 컨트롤을 디자인하면서도 응용 프로그램에 컨트롤을 포함할 때 일부 내용을 변경하는 것이 가능합니다.

  바인딩된 속성은 템플릿에서 주황색 경계 상자로 확인할 수 있습니다. 템플릿 바인딩된 속성을 변경하려면 먼저 속성 옆의 고급 속성 옵션  단추를 클릭한 다음 다시 설정을 클릭합니다.

  

• 시스템 컨트롤의 템플릿에는 사용자 지정 상태 및 상태 그룹을 추가할 수 없습니다. 그러나 사용자 정의 컨트롤을 만들고 사용자 지정 상태를 정의한 다음 사용자 상호 작용을 기반으로 상태를 변경하는 코드를 추가할 수 있습니다. 자세한 내용은 Silverlight 2 프로젝트에서 새 사용자 정의 컨트롤 만들기, 사용자 정의 컨트롤의 다양한 시각적 상태 및 전환 시간 정의 및 사용자 상호 작용에 대한 응답으로 상태 변경을 참조하십시오.

• 브라우저에서 응용 프로그램을 볼 때 문제가 발생하면 올바른 Silverlight 2 런타임을 설치하지 않은 경우일 수 있습니다. 자세한 내용은 Silverlight 2 도구 및 런타임 설치를 참조하십시오.

다음 단계

• 마우스 포인터를 위로 가져갈 때 단추가 확장하는 데 걸리는 시간을 변경할 수 있습니다. 자세한 내용은 시스템 컨트롤의 상태 변경 간 전환 시간 수정을 참조하십시오.

• 단추 위로 마우스 포인터를 가져가면 단추가 회전하게 하는 것과 같은 애니메이션을 추가할 수 있습니다. 자세한 내용은 상태 변경 후 재생될 애니메이션 추가을 참조하십시오.

• 이 템플릿을 프로젝트의 다른 단추에 적용하거나 이미 지정된 템플릿이 있는 단추를 새로 그릴 수 있습니다. 자세한 내용은 스타일 리소스 적용을 참조하십시오.

참조

개념

Silverlight 2 프로젝트에서 컨트롤 그리기

시스템 컨트롤의 상태 변경 간 전환 시간 수정