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

  • 아티클

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

다음 절차에서는 단추를 사용하지만 Microsoft Expression Blend에 포함된 시스템 컨트롤이나 Control 클래스에서 상속되는 가져온 사용자 지정 Microsoft Silverlight 컨트롤을 사용자 지정할 수 있습니다.

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

  1. Button 컨트롤 Dd185522.05df1779-a68f-436b-b834-a91b7995a3ec(KO-KR,Expression.30).png과 같은 시스템 컨트롤에 대한 다시 사용 가능한 템플릿을 만듭니다.

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

    Dd185522.5bb586ea-6adc-4672-b316-0fab8215ff8c(KO-KR,Expression.30).png

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

    Dd185522.7740762c-1a9d-490f-898e-2886ac1cf541(KO-KR,Expression.30).png

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

    Dd185522.c3a4acee-4285-4bcd-ac0d-ac6fbd26b306(KO-KR,Expression.30).png

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

    Dd185522.a95c671a-5639-40b9-83db-1e6b214330d5(KO-KR,Expression.30).png

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

    Dd185522.alert_tip(KO-KR,Expression.30).gif팁:

    Grid Dd185522.c76bbf09-1922-4f45-8d92-9c8ae64ca4a4(KO-KR,Expression.30).png는 가로 맞춤, 세로 맞춤 및 여백에 따라 자식 개체를 정렬하는 레이아웃 패널입니다. 레이아웃 패널에 대한 자세한 내용은 개체 정렬 및 Grid 레이아웃 패널 사용을 참조하십시오.

  6. 속성 패널의 변형에서 비율 크기 조정Dd185522.7a93944e-a7f5-4607-babd-768bb5f56185(KO-KR,Expression.30).png 탭을 클릭합니다. X 및 Y 값을 1.1로 변경합니다.

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

문제 해결

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

    바인딩된 속성은 템플릿에서 노란색 경계 상자로 확인할 수 있습니다. 템플릿 바인딩된 속성을 변경하려면 먼저 속성 옆의 고급 속성 옵션Dd185522.12e06962-5d8a-480d-a837-e06b84c545bb(KO-KR,Expression.30).png을 클릭한 다음 다시 설정을 클릭합니다.

    Dd185522.31f58be3-51bc-4806-af37-e32422465e8c(KO-KR,Expression.30).png

  • 시스템 컨트롤의 템플릿에는 사용자 지정 상태 및 상태 그룹을 추가할 수 없습니다. 그러나 사용자 정의 컨트롤을 만들고 사용자 지정 상태를 정의한 다음 사용자 상호 작용을 기반으로 상태를 변경하는 코드를 추가할 수 있습니다.

    자세한 내용은 다음 항목을 참조하십시오.

  • 브라우저에서 응용 프로그램을 볼 때 문제가 발생하면 올바른 Silverlight 런타임을 설치하지 않은 경우일 수 있습니다.

    자세한 내용은 Silverlight 2 도구 및 런타임 설치을 참조하십시오.

다음 단계

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

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

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

참조

작업

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

상태 변경 간 전환 시간 수정

시스템 컨트롤의 스타일 지정을 위한 다시 사용 가능한 템플릿 만들기