Button 컨트롤 스타일 지정 팁

  • 아티클

Ee341364.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(KO-KR,Expression.30).png

Button 컨트롤은 마우스, 키보드 또는 기타 입력 장치를 통한 사용자 입력에 반응하고 Click 이벤트를 발생시키는 개체를 나타냅니다.

모든 컨트롤과 마찬가지로 기본 모양과 아주 다르게 Button 컨트롤의 모양을 수정할 수 있습니다. 기본적으로 Button 컨트롤의 모양은 다음과 같습니다.

Ee341364.c01e5314-5b29-4283-a483-b0a1cb3b59f6(KO-KR,Expression.30).png

Button 컨트롤의 주요 속성

Button 컨트롤은 콘덴츠 컨트롤로서 속성 패널의 공용 속성 아래에 있는 Content 속성을 설정하여 Button 컨트롤에 텍스트를 표시할 수 있습니다.

ClickMode 속성을 설정하여 클릭 이벤트가 발생한 시점, 마우스를 클릭하고 놓는 시점 또는 포인터가 Button 컨트롤을 가리키는 시점을 결정할 수 있습니다.

다음과 같은 방법으로 이러한 속성을 설정할 수 있습니다.

  • 개체의 속성 설정   아트보드에서 Button 개체를 그린 후 개체의 속성을 직접 설정할 수 있습니다. 몇 개의 Button 컨트롤에서 동일한 값을 사용하려면 스타일에서 이러한 속성을 설정합니다.

  • 스타일에서 속성 설정   Button 개체의 스타일 Ee341364.94fa7fc4-4f3e-4e84-9ba1-287f1b894371(KO-KR,Expression.30).png에서 속성을 설정하면 이 스타일을 사용하는 모든 Button 개체가 이 값을 사용합니다. 특정 개체의 값을 덮어쓸 수 있습니다.

    자세한 내용은 스타일 만들기를 참조하십시오.

Button 컨트롤은 컨트롤의 상태에 따라 모양이 변경됩니다. 사용자는 상태 패널에서 상태를 선택하여 템플릿 편집 모드에서 각 상태의 모양을 수정할 수 있습니다. 자세한 내용은 다음 표에 나열된 상태 및 컨트롤에 대해 다른 시각적 상태 정의를 참조하십시오.

Button 컨트롤을 클릭하거나, Button 개체 또는 Button 템플릿의 개체로 동작을 끌 때 발생하는 결과를 지정합니다. 자세한 내용은 개체에 동작 추가를 참조하십시오.

필요한 경우 이벤트 핸들러에 Click 이벤트를 연결할 수 있습니다. 자세한 내용은 이벤트에 응답하는 코드 작성를 참조하십시오.

Button 템플릿의 구성 요소

Button 컨트롤에는 구성 요소가 없습니다.

Button 컨트롤의 상태

기본적으로 Button 컨트롤은 CommonStates 상태 그룹에 있는 다음 네 가지 상태 중 하나일 수 있습니다. 이러한 상태는 Button 템플릿을 수정할 때 상태 패널에 표시됩니다.

상태 이름

설명

Normal

Button 컨트롤과의 상호 작용이 없을 때의 Button 컨트롤 모양

MouseOver

Button 컨트롤로 포인터를 이동했을 때의 Button 컨트롤 모양

Pressed

사용자가 클릭했을 때 또는 컨트롤에 포커스가 있고 Enter 또는 스페이스바를 눌렀을 때의 Button 컨트롤 모양

Disabled

IsEnabled 속성이 False로 설정되었을 때의 Button 컨트롤 모양

Button 컨트롤은 FocusStates 상태 그룹의 다음 두 가지 상태 중 하나일 수 있습니다.

상태 이름

설명

Unfocused

키보드 포커스가 없을 때의 Button 컨트롤 모양

Focused

키보드 포커스가 있을 때의 Button 컨트롤 모양 예를 들어 Button 컨트롤에 키보드 포커스가 놓일 때까지 사용자가 Tab 키를 눌러 응용 프로그램의 모든 개체를 순환할 수 있습니다.
Ee341364.alert_tip(KO-KR,Expression.30).gif팁:

상태 그룹에는 동일한 논리적 범주에 속하지만 동시에 표시할 수는 없는 시각적 상태들이 포함됩니다. 예를 들어 CommonStates 그룹에는 마우스 같은 입력 장치와 사용자 간의 상호 작용과 관련된 상태가 포함됩니다. 한 상태 그룹의 상태는 한 번에 하나만 표시할 수 있지만, 서로 다른 상태 그룹의 상태는 각각 하나씩 동시에 표시할 수 있습니다.

상태를 선택하고 상태 기록 기능이 켜져 있으면 해당 상태에 대한 모든 변경 내용이 기록됩니다. 상태 기록 기능을 끄려면 아트보드에서 기록 단추 Ee341364.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(KO-KR,Expression.30).png를 클릭하거나 상태 패널에서 Base를 선택합니다.

개체를 Button 컨트롤로 변환

Button 컨트롤에는 구성 요소가 없기 때문에 개체를 Button 컨트롤로 변환할 수 없습니다.

  1. 개체를 레이아웃 패널로 그룹화하여 레이아웃 패널을 선택한 다음 도구 메뉴에서 컨트롤로 만들기를 클릭합니다.

  2. 대화 상자가 나타나면 Button를 선택하고 템플릿의 이름을 지정한 다음 템플릿을 저장할 위치를 선택합니다.

    위치에 대한 자세한 내용은 리소스 만들기를 참조하십시오.

  3. 확인을 클릭하면 Microsoft Expression Blend에서 템플릿 편집 모드를 시작하고 Button 컨트롤을 구성하는 개체를 표시합니다.

  4. 원본 개체의 그룹에 TextBlock 개체 Ee341364.42165963-00f7-4a33-abcd-b0849edebada(KO-KR,Expression.30).png가 포함된 경우 TextBlock 개체가 Button 컨트롤 템플릿의 ContentPresenter 개체 Ee341364.51a0c06c-d801-4133-8caf-cf1856a8dfc4(KO-KR,Expression.30).png로 변환됩니다. 이렇게 하면 Button 개체에서 텍스트를 표시할 수 있습니다. 원본 개체에 TextBlock 개체가 포함되어 있지 않으면 ContentPresenter 개체가 템플릿에 자동으로 추가됩니다. 이 템플릿이 적용될 Button 개체의 콘텐츠 속성에 텍스트를 표시할 필요가 없는 경우 ContentPresenter 개체를 삭제할 수 있습니다.

  5. 이 모드에서는 템플릿 수정 작업을 계속할 수 있습니다. 예를 들어 개체를 추가 또는 수정하거나 상태 패널에서 상태를 선택하여 해당 상태에서 템플릿 모양을 수정할 수 있습니다.

  6. 템플릿에 있는 개체의 브러시 속성 중 일부를 템플릿을 사용할 Button 개체의 다음과 같은 속성에 바인딩하는 방법을 고려해 보십시오.

    • 배경

    • BorderBrush

    • Foreground

    • BorderThickness

    자세한 내용은 개체 속성을 템플릿으로 연장을 참조하십시오.

  7. 템플릿 편집 모드를 종료하려면 아트보드 위쪽의 이동 경로 탐색 막대에서 **[Button]**를 클릭하거나 개체 및 타임라인 패널에서 범위를 UserControl1(으)로 되돌립니다. Ee341364.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(KO-KR,Expression.30).png를 클릭합니다.

새 Button 템플릿을 다른 Button 개체에 적용하는 방법에 대한 자세한 내용은 리소스 적용 또는 제거를 참조하십시오.

참조

Microsoft Silverlight Button 컨트롤의 속성 및 이벤트에 대한 자세한 내용은 MSDN의 Silverlight Control Gallery(Silverlight 컨트롤 갤러리)를 참조하십시오.

참조

작업

기존 개체에서 컨트롤 만들기

개념

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

SimpleButton

템플릿을 지원하는 컨트롤의 스타일 지정