다음을 통해 공유

CheckBox 컨트롤 스타일 지정 팁

  • 아티클

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

기본 제공 CheckBox 컨트롤 템플릿을 사용하여 사용자 지정 CheckBox 템플릿을 만들 수 있습니다. CheckBox 컨트롤의 기본 모양은 다음과 같습니다.

Ee371151.1b2a1e45-ffdd-4ac8-941a-d6625b797fd0(ko-kr,Expression.40).png

CheckBox 컨트롤 상태

기본적으로 CheckBox 컨트롤의 상태는 CommonStates 상태 그룹에서 다음 네 가지 상태 중 하나일 수 있으며 상태는 CheckBox 템플릿을 수정할 때 상태 패널에 나타납니다.

상태 이름 설명

Normal

CheckBox 컨트롤과의 상호 작용이 없을 때의 컨트롤 모양입니다.

MouseOver

CheckBox 컨트롤로 포인터를 이동했을 때의 컨트롤 모양입니다.

Pressed

사용자가 CheckBox 컨트롤을 클릭하거나 컨트롤에 포커스가 있을 때 사용자가 Enter 키 또는 스페이스바를 누르는 경우의 컨트롤 모양입니다.

Disabled

IsEnabled 속성이 False 로 설정되어 있을 때의 CheckBox 컨트롤 모양입니다.

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

상태 이름 설명

Unfocused

키보드 초점이 없을 때의 CheckBox 컨트롤 모양입니다.

Focused

키보드 포커스가 있을 때의 CheckBox 컨트롤 모양입니다. 예를 들어 CheckBox 컨트롤에 키보드 포커스가 놓일 때까지 사용자가 Tab 키를 눌러 응용 프로그램의 모든 개체를 순환할 수 있습니다.

CheckBox 컨트롤은 FocusSValidationStates 상태 그룹에서 다음 두 가지 상태 중 하나일 수 있습니다.

상태 이름 설명

Valid

CheckBox 컨트롤이 유효할 때의 컨트롤 모양입니다.

InvalidUnfocused

CheckBox 컨트롤이 유효하지 않으며 포커스가 없을 때의 컨트롤 모양입니다.

InvalidFocused

CheckBox 컨트롤이 유효하지 않으며 포커스가 있을 때의 컨트롤 모양입니다.

CheckBox 컨트롤은 CheckStates 상태 그룹에서 다음 세 가지 상태 중 하나일 수 있습니다.

상태 이름 설명

Unchecked

IsChecked 속성이 False 로 설정되어 있을 때의 CheckBox 컨트롤 모양입니다.

Checked

IsChecked 속성이 True 로 설정되어 있을 때의 CheckBox 컨트롤 모양입니다.

Indeterminate

IsThreeState 속성이 True 로 설정되고 IsChecked 속성이 Null 로 설정될 때의 CheckBox 컨트롤 모양입니다.

기본적으로 CheckBox 컨트롤이 선택된 상태의 모양은 다음과 같습니다.

Ee371151.df888d99-f032-4084-a93e-3de14ad1c19c(ko-kr,Expression.40).png

tip note팁:

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

상태를 선택하면 상태 기록이 켜지고 해당 상태에 적용하는 모든 변경 내용이 기록됩니다. 상태 기록을 끄려면 아트보드에서 기록 단추 Ee371151.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(ko-kr,Expression.40).png를 클릭하거나 상태 패널에서 기준을 선택합니다. 서로 다른 두 상태가 활성화되어 있을 때 컨트롤 모양을 수정하려면 한 상태 그룹의 상태 미리 보기를 고정하고 다른 상태 그룹의 상태를 수정하면 됩니다.

템플릿 바인딩

Background , BorderBrush , Foreground , BorderThickness 또는 Padding 속성을 템플릿 바인딩할 수 있습니다. 자세한 내용은 개체 속성을 템플릿으로 연장을 참조하십시오.

개체를 CheckBox 컨트롤로 변환

다음 그림은 Normal , MouseOver , Pressed , Disabled 및 Focused 상태가 포함된 확인란의 전체 디자인(comp)입니다.

Normal

Normal 상태의 CheckBox

MouseOver

MouseOver 상태의 CheckBox

Pressed

Pressed 상태의 CheckBox

Disabled

Disabled 상태의 CheckBox

Focused

Focused 상태의 CheckBox

[!참고]

위 그림은 CheckBox 컨트롤이 아니라 CheckBox 컨트롤로 변환할 수 있는 아트워크입니다.

이 예에서는 다음 절차의 4단계에서 XAML 코드를 사용하며, 위 그림에서는 Normal 상태에 해당합니다.

  1. 새 Microsoft Silverlight 프로젝트를 엽니다. 브러시 범주에서 단색 브러시를 클릭합니다. 편집기의 16진수 값 상자에 #FF808080 을 입력합니다.

  2. 도구 패널에서 ****모눈 ****Ee371151.a87ee957-7fbf-4135-a6ab-6de7e63160aa(ko-kr,Expression.40).png을 두 번 클릭하여 아트보드에 새 컨테이너를 만듭니다. 속성 패널의 레이아웃 범주에서 너비 오른쪽에 있는 고급 옵션을 클릭한 다음 다시 설정을 클릭합니다. Height에 대해 이 작업을 반복합니다.

  3. 코드 보기에서 다음 코드를 찾은 다음 닫는 슬래시(/)를 삭제합니다.

    <Grid HorizontalAlignment="Left" VerticalAlignment="Top"/>

  4. 다음 코드를 복사하여 3단계에서 찾은 새 프로젝트의 코드 뒤에 붙여 넣습니다.

    <Grid>
   <Rectangle Stroke="#FF333333" Height="12" Width="12" HorizontalAlignment="Left" Fill="Transparent"/>
   <Path x:Name="check" Height="8" Width="8" Fill="White" Stretch="Fill" 
      Data="M14.8,6.2 C14.9,6.2 14.9,6.3 14.9,6.2 C14.9,6.3 14.9,6.3 14.8,6.5 
      C14.1,7.2 13.4,8.1 12.6,9.2 C11.8,10.4 11.1,11.7 10.6,13 
      C10.4,13.5 10.2,13.8 10.2,13.9 C10.1,14.1 9.8,14.1 9.4,14.1 
      C9.1,14.1 8.9,14.1 8.9,14 C8.8,14 8.7,13.8 8.5,13.5 
      C8.2,13 7.8,12.6 7.5,12.2 C7.3,12 7.2,11.9 7.2,11.8 
      C7.2,11.6 7.3,11.5 7.5,11.3 C7.7,11.2 7.9,11.1 8,11.1 
      C8.2,11.1 8.5,11.2 8.7,11.4 C9,11.6 9.3,12 9.6,12.5 
      C10,11.8 10.3,11.1 10.6,10.4 C11,9.7 11.4,9.11.8,8.5 
      C12.3,7.8 12.6,7.3 12.9,7 C13.1,6.8 13.3,6.6 13.4,6.5 
      C13.5,6.5 13.6,6.4 13.8,6.4 C14.3,6.3 14.6,6.2 14.8,6.2 z"
      HorizontalAlignment="Left" Margin="2,2,0,2"/>
   <TextBlock 
      Foreground="White" Text="Lorem" Margin="15,0,0,0" 
      VerticalAlignment="Center"/>
</Grid>

  5. 붙여 넣은 코드 뒤에 닫는 Grid 태그(</Grid>)를 추가합니다.

  6. 개체 및 타임라인 패널에서 Grid를 마우스 오른쪽 단추로 클릭한 후 컨트롤로 만들기를 클릭합니다. 컨트롤로 만들기 대화 상자에서 CheckBox를 클릭한 다음 확인을 클릭합니다.

    코드 보기에서 이전 단계에서 붙여 넣은 코드가 새 CheckBox 컨트롤의 코드로 바뀌었습니다. 또한 Expression Blend는 CheckBox 컨트롤을 새 CheckBox 스타일의 템플릿으로 변환하고 CheckBox 에 해당 템플릿을 적용합니다.

    comp의 TextBlock 에는 흰색 전경이 있습니다. comp의 TextBlock 에는 Lorem 텍스트도 포함되어 있습니다. 또한 위 코드의 TextBlock 은 원래 TextBlock 과 속성이 동일한 ContentPresenter 로 바뀌었습니다.

  7. Button 컨트롤에 MouseOver 상태를 추가하려면 다음을 수행합니다.

    1. 개체 및 타임라인 패널에서 Rectangle을 클릭합니다.

    2. 상태 패널에서 MouseOver를 클릭합니다.

    3. 속성 패널에서 Fill을 선택하고 Alpha 속성을 25 로 설정합니다.

      Rectangle의 이름이 rectangle로 바뀌었습니다.

    4. 상태 패널로 돌아간 다음 Base를 클릭하여 상태 기록을 종료합니다.

  8. Pressed 상태에 동일한 속성을 적용하려면 상태 패널에서 MouseOver를 마우스 오른쪽 단추로 클릭하고 상태 복사 위치를 클릭한 다음 Pressed를 클릭합니다.

  9. 확인란이 Pressed 상태일 경우 CheckBox 템플릿을 오프셋하려면 다음을 수행합니다.

    1. 상태 패널에서 Pressed를 클릭합니다.

    2. 개체 및 타임라인 패널에서 Grid를 클릭합니다.

    3. 속성 패널의 변형 범주에 있는 좌표 이동 탭에서 X 및 Y를 1 로 설정합니다.

      개체 및 타임라인 패널에서 Grid 이름이 grid로 바뀌었습니다.

    4. 상태 패널로 돌아간 다음 Base를 클릭하여 상태 기록을 종료합니다.

  10. 상태 패널에서 Disabled를 선택합니다. 개체 및 타임라인 패널에서 grid를 선택합니다. 속성 패널에서 Opacity를 50 으로 설정합니다. 상태 패널로 돌아간 다음 Base를 클릭하여 상태 기록을 종료합니다.

  11. CheckBox 컨트롤에 대화형 작업을 추가하려면 다음을 수행합니다.

    1. 상태 패널에서 Normal을 클릭하고 전환 추가를 클릭한 다음 Normal->MouseOver를 클릭합니다.

    2. 전환 지속 시간 상자에 .2 를 입력합니다.

    3. Base를 클릭하여 상태 기록을 종료합니다.

    이제 CheckBox 위에 포인터를 놓으면 Normal 에서 MouseOver 로 상태를 전환하는 데 2초가 걸립니다. 다른 모든 전환은 즉시 이루어집니다.

  12. 개체 및 타임라인 패널에서 check를 클릭합니다. 속성 패널의 모양 범주에서 Opacity를 0 으로 설정합니다. 상태 패널에서 Checked를 클릭한 다음 속성 패널에서 Opacity를 100 으로 설정합니다. Base를 클릭하여 상태 기록을 종료합니다.

  13. comp에는 Focused 상태인 연한 파란색의 모서리가 둥근 직사각형이 있으며, 이 상태는 XAML에서 Normal 상태로 표시되지 않습니다.

    사각형을 만들려면 Focused 상태를 선택한 상태에서 새 Rectangle 개체를 추가합니다. 이를 "상태에서 그리기"라고 하며, 즉 개체를 그린 상태로만 새 개체가 표시됩니다.

    Focused 상태의 사각형을 만들려면 상태 패널에서 Focused를 클릭한 다음 도구 패널의 사각형 도구를 두 번 클릭하여 새 Rectangle 개체를 만듭니다.

  14. 다음 단계에서는 새 사각형의 속성을 설정합니다. 속성은 Focused 상태가 아닌 Base 상태에서 변경해야 합니다. 그러나 사각형은 현재 투명하게 표시되어 Base 에서 볼 수 없습니다. 사각형의 표시 상태를 유지하려면 ****기록 모드 표시기 ****Ee371151.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(ko-kr,Expression.40).png를 클릭합니다. 개체 및 타임라인 패널에는 새 사각형(rectangle1)이 계속 선택되어 있습니다.

    속성 패널에서 rectangle1에 대한 다음 속성을 설정합니다.

    • Fill   브러시 범주에서 브러시 없음을 클릭합니다.

    • Stroke   브러시 범주에서 단색 브러시를 클릭합니다. 편집기에서 색을 #FF00C0FF 로 설정합니다.

    • RadiusX   모양 범주에서 RadiusX를 2 로 설정합니다.

    • RadiusY   모양 범주에서 RadiusY를 2 로 설정합니다.

    • Margin   레이아웃 범주에서 Margin을 다음과 같이 설정합니다.

      • Left    -2

      • Right    -2

      • Top    0

      • Bottom    0

  15. 범위를 {0}(으)로 되돌립니다.Ee371151.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(ko-kr,Expression.40).png를 클릭합니다. 개체 및 타임라인 패널에서 CheckBox를 선택하고 Ctrl+C를 눌러 복사합니다. Ctrl+V를 네 번 눌러 컨테이너에 CheckBox 컨트롤을 네 개 더 붙여 넣습니다. 선택 도구 Ee371151.2ff91340-477e-4efa-a0f7-af20851e4daa(ko-kr,Expression.40).png를 사용하여 열에 대한 확인란을 조정합니다. 개체 및 타임라인 패널에서 CheckBox 개체 중 하나를 선택하고 속성 패널의 공용 속성 범주에서 IsEnabled 상자의 선택을 취소합니다.

  16. 프로젝트를 빌드(Ctrl+Shift+B)한 다음 F5 키를 눌러 프로젝트를 테스트합니다.

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

참조

Microsoft Silverlight  CheckBox 컨트롤의 속성 및 이벤트에 대한 자세한 내용은 MSDN의 Silverlight 컨트롤 갤러리 Ee371151.xtlink_newWindow(ko-kr,Expression.40).png를 참조하십시오.

참조 항목

개념

공통 Silverlight 컨트롤의 스타일 지정 팁
SimpleCheckBox
템플릿을 지원하는 컨트롤 스타일

Copyright ⓒ 2011 by Microsoft Corporation. All rights reserved.