Slider 컨트롤 스타일 지정 팁

Slider 컨트롤은 값 범위를 나타냅니다. 이 범위에서 현재 값은 Thumb라는 개체 형식의 위치로 표시됩니다.

모든 컨트롤과 마찬가지로 Slider 컨트롤도 기본 모양과 완전히 다르게 수정할 수 있습니다. Slider 컨트롤의 기본 모양은 다음과 같습니다.

원하는 Slider 컨트롤 속성 설정

속성 패널의 공용 속성에서 Orientation 속성을 설정하여 Slider 컨트롤의 방향을 가로 또는 세로로 지정할 수 있습니다. 또한 IsDirectionReversed 속성을 선택하여 숫자 방향을 반전할 수도 있습니다. Minimum 및 Maximum 속성을 설정하여 값 범위를 지정할 수 있습니다. Value 속성에 지정된 현재 값은 최소값과 최대값 사이의 값이어야 합니다. 공용 속성 범주에서는 LargeChange 및 SmallChange 같은 기타 속성도 설정할 수 있습니다.

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

• 개체 속성 설정 아트보드에서 Slider 개체를 그린 후에 개체의 이러한 속성을 직접 설정할 수 있습니다. 여러 Slider 컨트롤이 같은 값을 사용하도록 하려면 이러한 속성을 스타일에서 설정하면 됩니다.

• 스타일에서 속성 설정 이러한 속성을 Slider 개체의 스타일에서 설정하는 경우에는 해당 스타일을 사용하는 모든 Slider 개체가 해당 값을 사용합니다. 특정 개체의 값을 덮어쓸 수 있습니다.

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

Slider 컨트롤의 모양은 컨트롤의 상태에 따라 변경됩니다. 템플릿 편집 모드에서 상태 패널의 상태를 선택하여 각 상태의 모양을 수정할 수 있습니다.

자세한 내용은 다음 표에 나와 있는 상태 및 컨트롤에 대해 다른 시각적 상태 정의를 참조하십시오.

Slider 템플릿의 파트

Slider 컨트롤은 Slider 템플릿이라는 단일 템플릿을 사용합니다. 이 템플릿의 각 파트는 템플릿이 적용되는 Slider 개체의 모양 및 동작에 영향을 줍니다.

Slider 컨트롤의 모양을 설정하기 위해 다른 개체를 템플릿에 포함할 수도 있지만 다음 표에 나와 있는 파트와 해당 동작은 계약을 통해 연결되어 있습니다.

템플릿의 파트를 보려면 템플릿을 수정하면서 파트 패널을 엽니다.

Slider 컨트롤 상태

기본적으로 Slider 컨트롤은 CommonStates 상태 그룹에서 다음의 세 상태 중 하나일 수 있습니다. 이 상태는 Slider 템플릿을 수정할 때 상태 패널에서 볼 수 있습니다.

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

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

상태를 선택하면 상태 기록이 켜지고 해당 상태에 적용하는 모든 변경 내용이 기록됩니다. 상태 기록을 끄려면 기록 단추 를 클릭하거나 상태 패널에서 기준을 선택합니다. 서로 다른 두 상태가 활성화되어 있을 때 컨트롤 모양을 수정하려면 한 상태 그룹의 상태 미리 보기를 고정하고 다른 상태 그룹의 상태를 수정하면 됩니다.

개체를 Slider 컨트롤로 변환

Slider 컨트롤 템플릿을 수정하려면 다음 작업 중 하나를 수행합니다.

• 아트보드에 Slider를 그린 다음 기본 템플릿의 복사본을 만듭니다.

  자세한 내용은 템플릿 만들기 또는 수정을 참조하십시오.

• 개체를 그리거나 아트를 가져온 다음 컨트롤로 만들기 명령을 사용하여 Slider 컨트롤의 모양을 디자인합니다.

컨트롤로 만들기 명령을 사용하는 경우에는 다음 단계를 수행하여 Slider 템플릿에 필요한 모든 개체를 만드십시오.

1. Slider 컨트롤의 모양을 정의하려는 모든 개체를 모눈 레이아웃 패널로 그룹화합니다.

2. 새 Grid 개체를 선택하고 도구 메뉴에서 컨트롤로 만들기를 클릭합니다.

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

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

4. 확인을 클릭하고 나면 Microsoft Expression Blend가 템플릿 편집 모드로 전환되며 세로 Slider 컨트롤을 구성하는 개체가 표시됩니다.

5. Slider 컨트롤의 템플릿에는 Slider 개체 방향을 가로 또는 세로로 지정할 때 사용되는 파트가 포함되어 있습니다. 파트 패널의 모든 파트를 템플릿의 개체에 할당할 수도 있고, Slider 컨트롤의 특정 방향과 관련된 파트만 할당할 수도 있습니다. 개체 집합이 하나뿐인데 Slider 컨트롤의 두 방향에 대해 모두 템플릿을 디자인하려는 경우에는 개체를 복제하고 중복 집합을 다시 정렬하면 됩니다.

   팁:
   파트 패널의 세로 파트만 템플릿의 개체에 할당하는 경우, 템플릿이 적용된 Slider 개체를 가로로 표시하도록 설정하면 개체가 아트보드에서 사라집니다. Slider 개체의 방향을 변경하려면 아트보드 위쪽의 이동 경로 탐색 막대에서 [Slider]를 클릭하여 Slider 개체 편집 범위로 돌아온 다음 Orientation 속성을 Vertical로 설정하고 이동 경로 탐색 막대의 세 번째 단추를 사용해 템플릿 편집 모드로 돌아옵니다.

6. HorizontalTemplate 또는 VerticalTemplate 파트에 대해 개체를 만들려면 다음을 수행합니다.

   1. 행이나 열이 세 개인 모눈 레이아웃 패널을 그립니다. 세 열의 크기는 각각 자동, 자동 및 배율 크기 조정(*)으로 지정해야 합니다.

      자세한 내용은 행 또는 열 추가/제거 및 행 또는 열의 크기 조정 옵션 변경을 참조하십시오.

   2. 새 Grid 개체를 마우스 오른쪽 단추로 클릭하고 슬라이더의 파트로 만들기를 가리킨 다음 HorizontalTemplate 또는 VerticalTemplate을 클릭합니다.

7. Thumb 개체가 이동하는 공간을 트랙이라고 합니다. 트랙은 템플릿 파트가 아니므로 없어도 됩니다. 트랙을 표시할 개체를 하나 이상 HorizontalTemplate 또는 VerticalTemplate 개체에 배치합니다. 세 열 또는 행이 모두 포함되도록 해야 합니다.

   팁:
   개체 하나가 여러 열 또는 행에 걸쳐 표시되도록 하려면 해당 개체를 선택한 다음 속성 패널에서 RowSpan 또는 ColumnSpan 속성을 설정합니다.

8. Thumb 개체에는 고유한 템플릿이 있을 수 있으므로 다음 작업을 수행하여 사용하려는 개체를 Thumb 컨트롤로 변환해야 합니다.

   1. Thumb 개체를 나타낼 개체를 레이아웃 패널로 그룹화합니다.

   2. 새 레이아웃 패널을 HorizontalTemplate 또는 VerticalTemplate 개체의 중간 열 또는 행으로 이동합니다.

      팁:
      개체를 특정 열이나 행에 배치하려면 해당 개체를 선택한 다음 속성 패널에서 Column 또는 Row 속성을 설정합니다. 첫 번째 열 또는 행의 번호는 0입니다.

   3. 새 레이아웃 패널을 마우스 오른쪽 단추로 클릭하고 슬라이더의 파트로 만들기를 가리킨 다음 HorizontalThumb 또는 VerticalThumb을 클릭합니다.

   4. 파트로 만들기 대화 상자에서 템플릿을 저장할 위치를 선택합니다.

   5. 새 Thumb 개체의 템플릿 편집 모드에서 상태 패널의 상태를 선택해 해당 상태의 Thumb 개체 모양을 수정하는 등의 수정 작업을 계속할 수 있습니다. Thumb 개체에 여백을 지정하려면 루트 개체에 대해 Margin 속성을 설정합니다.

   6. 개체 및 타임라인 패널에서 상위 범위로 이동을 클릭하거나 아트보드 위쪽의 이동 경로 탐색 막대에서 VerticalThumb 또는 HorizontalThumb을 클릭하여 Slider 개체의 템플릿 편집 모드로 돌아옵니다.

   7. 새 Thumb 개체의 Width 및 Height 속성을 특정 값으로 설정해 중간 열 또는 행 크기가 Thumb 개체에 맞게 자동으로 조정되도록 합니다.

9. 사용자가 트랙 양쪽 끝에서 단추를 클릭해 Thumb 개체를 약간씩 이동할 수 있도록 하려면 다음 작업을 수행합니다.

   1. 감소 단추에 사용할 개체를 레이아웃 패널로 그룹화합니다.

   2. 새 레이아웃 패널을 HorizontalTemplate 개체의 첫 번째 열이나 VerticalTemplate 개체의 첫 번째 행으로 이동합니다.

   3. 레이아웃 패널을 마우스 오른쪽 단추로 클릭하고 슬라이더의 파트로 만들기를 가리킨 다음 HorizontalTrackLargeChangeDecreaseRepeatButton 또는 VerticalTrackLargeChangeDecreaseRepeatButton을 클릭합니다.

   4. 파트로 만들기 대화 상자에서 템플릿을 저장할 위치를 선택합니다.

   5. 새 RepeatButton 개체의 템플릿 편집 모드에서 ContentPresenter 개체를 삭제하는 등의 수정 작업을 계속할 수 있습니다. RepeatButton 개체에 여백을 지정하려면 루트 개체에 대해 Margin 속성을 설정합니다.

   6. 개체 및 타임라인 패널에서 상위 범위로 이동을 클릭하거나 아트보드 위쪽의 이동 경로 탐색 막대에서 HorizontalTrackLargeChangeDecreaseRepeatButton 또는 VerticalTrackLargeChangeDecreaseRepeatButton을 클릭하여 Slider 개체의 템플릿 편집 모드로 돌아옵니다.

   7. RepeatButton 개체가 필요할 때 표시되도록 속성 패널의 레이아웃 아래에 있는 속성을 조정합니다. 개체가 다른 개체 뒤에 숨겨지는 경우에는 개체 순서를 다시 지정할 수도 있습니다.

      자세한 내용은 개체의 레이어 지정 순서 변경을 참조하십시오.

   8. HorizontalTrackLargeChangeIncreaseRepeatButton 또는 VerticalTrackLargeChangeIncreaseRepeatButton 개체에 대해 이 단계를 반복하여 개체를 HorizontalTemplate 개체의 마지막 열이나 VerticalTemplate 개체의 마지막 행으로 이동합니다.

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

11. 템플릿에 있는 개체의 일부 브러시 속성을 템플릿을 사용할 Slider 개체의 다음 속성에 바인딩할 수 있습니다.

    • Background

    • BorderBrush

    • Foreground

    • BorderThickness

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

12. 템플릿 편집 모드를 종료하려면 아트보드 위쪽의 이동 경로 탐색 막대에서 **[Slider]**를 클릭하거나 개체 및 타임라인 패널에서 상위 범위로 이동을 클릭합니다.

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

참조

Microsoft Silverlight Slider 컨트롤의 속성 및 이벤트에 대한 자세한 내용은 MSDN의 Silverlight Control Gallery(Silverlight 컨트롤 갤러리)에서 확인할 수 있습니다.

참조

작업

개체를 사용자 입력 값 또는 기타 내부 값에 바인딩

개념

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

SimpleSlider

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