ScrollBar 컨트롤 스타일 지정 팁

ScrollBar 컨트롤은 값 범위를 나타내며 현재 값은 Thumb이라는 개체 형식의 위치로 식별됩니다. ScrollBar 개체는 일반적으로 ListBox나 ScrollViewer 같은 다른 컨트롤의 템플릿 내에서 사용되어 스크롤 기능을 제공합니다.

다른 모든 컨트롤과 마찬가지로 ScrollBar 컨트롤도 기본 모양과 다르게 보이도록 수정할 수 있습니다. 기본적으로 ScrollBar 컨트롤은 다음과 같이 보입니다.

ScrollBar 컨트롤의 주요 속성

속성 패널의 레이아웃에서 Orientation 속성을 설정하여 세로 또는 가로 ScrollBar 컨트롤을 만들 수 있습니다. 속성 패널의 공용 속성에서 Minimum 및 Maximum 속성을 설정하여 값 범위를 지정할 수 있습니다. Value 속성에 지정된 현재 값은 최소값과 최대값 사이에 있어야 합니다. 공용 속성 범주에는 LargeChange 및 SmallChange 같이 사용자가 설정할 수 있는 다른 속성도 있습니다.

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

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

• 스타일에 속성 설정 - ScrollBar 개체의 스타일 에 속성을 설정하면 해당 스타일을 사용하는 모든 ScrollBar 개체는 해당 속성 값을 사용합니다. 특정 개체의 값을 덮어쓸 수 있습니다.

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

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

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

ScrollBar 템플릿의 구성 요소

ScrollBar 컨트롤은 ScrollBar 템플릿이라는 한 개의 템플릿을 사용합니다. 템플릿의 각 구성 요소는 템플릿이 적용된 ScrollBar 개체의 모양과 동작을 제어하는 역할을 합니다.

이 템플릿에는 ScrollBar 컨트롤의 모양을 세밀하게 다듬는 다른 개체도 있을 수 있지만, 다음 표에 나오는 구성 요소는 정해진 동작에 연결되어 있습니다.

템플릿의 구성 요소를 보려면 템플릿을 수정하는 동안 구성 요소 패널을 엽니다.

구성 요소 이름	개체 형식	설명
VerticalRoot  HorizontalRoot	FrameworkElement	ScrollBar 컨트롤의 방향이 세로 또는 가로일 때의 해당 컨트롤의 모양을 정의하는 개체가 포함된 레이아웃 패널입니다. 이 구성 요소는 필수입니다.
VerticalSmallDecrease  HorizontalSmallDecrease	RepeatButton	개체를 클릭했을 때 ScrollBar의 Value 속성을 줄이는 개체입니다. Value 속성은 SmallChange 속성의 값만큼 증분 감소합니다.
VerticalLargeDecrease  HorizontalLargeDecrease	RepeatButton	개체를 클릭했을 때 ScrollBar의 Value 속성을 줄이는 개체입니다. Value 속성은 LargeChange 속성의 값만큼 증분 감소합니다. 이 구성 요소는 필수입니다. 팁: RepeatButton 개체에는 사용자가 설정할 수 있는 속성이 있지만 RepeatButton 개체를 구성하는 개체를 추가, 삭제 또는 수정하려는 경우에는 해당 템플릿을 열어야 합니다.
VerticalThumb  HorizontalThumb	Thumb	트랙에서 이 개체의 위치는 ScrollBar 컨트롤의 현재 값을 나타냅니다. 이 구성 요소는 필수입니다. 팁: Thumb 개체에는 사용자가 설정할 수 있는 속성이 있지만 Thumb 개체를 구성하는 개체를 추가, 삭제 또는 수정하려는 경우에는 해당 템플릿을 열어야 합니다.
VerticalLargeIncrease  HorizontalLargeIncrease	RepeatButton	개체를 클릭했을 때 ScrollBar의 Value 속성을 늘리는 개체입니다. Value 속성은 LargeChange 속성의 값만큼 증분 증가합니다. 이 구성 요소는 필수입니다.
VerticalSmallIncrease  HorizontalSmallIncrease	RepeatButton	ScrollBar 개체를 클릭하면 개체의 Value 속성을 늘리는 개체입니다. Value 속성은 SmallChange 속성의 값만큼 증분 증가합니다.

ScrollBar 컨트롤의 상태

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

상태를 선택하고 상태 기록 기능이 켜져 있으면 해당 상태에 대한 모든 변경 내용이 기록됩니다. 상태 기록 기능을 끄려면 기록 단추 를 클릭하거나 상태 패널에서 Base를 선택합니다.

개체를 ScrollBar 컨트롤로 변환

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

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

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

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

컨트롤로 만들기 명령을 사용하는 경우 다음 단계에 따라 ScrollBar 템플릿에 필요한 모든 개체를 만들어야 합니다.

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

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

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

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

4. ScrollBar 컨트롤의 템플릿에는 ScrollBar 개체의 방향이 세로 또는 가로일 때 사용되는 구성 요소가 포함되어 있습니다. 구성 요소 패널의 모든 구성 요소를 템플릿의 개체에 할당하거나 ScrollBar 컨트롤의 한 방향과 관련된 구성 요소만 할당할 수도 있습니다. 개체 집합이 하나 뿐이지만 ScrollBar 컨트롤의 두 방향에 대한 템플릿을 디자인하려는 경우에는 개체를 복제하여 다시 배열할 수 있습니다.

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

5. VerticalRoot(또는 HorizontalRoot) 구성 요소에 대한 개체를 만들려면 다음 작업을 수행합니다.

   1. 다섯 개의 열이나 행이 있는 모눈 레이아웃 패널 을 그립니다. 다섯 개 열의 크기는 각각 Auto, Auto, Auto, * 및 Auto로 설정되어야 합니다.

      

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

   2. 새 Grid 개체를 마우스 오른쪽 단추로 클릭하고 ScrollBar의 구성 요소로 만들기를 가리킨 다음 VerticalRoot 또는 HorizontalRoot를 클릭합니다.

6. Thumb 개체가 이동하는 공간을 트랙이라고 합니다. 트랙은 템플릿의 구성 요소가 아니라 선택적 요소입니다. 트랙을 나타내는 데 사용할 개체를 VerticalRoot 또는 HorizontalRoot 개체에 배치합니다. 이때 개체가 다섯 개의 열이나 행 모두에 걸치도록 배치하거나 가운데의 세 개 열이나 행에만 걸치도록 배치합니다.

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

7. Thumb 개체에 고유의 템플릿이 있을 수 있기 때문에 다음 작업을 수행하여 사용할 개체를 Thumb 컨트롤로 변환해야 합니다.

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

   2. 새 레이아웃 패널을 VerticalRoot 또는 HorizontalRoot 개체의 가운데 행이나 열로 이동합니다.

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

   3. 새 레이아웃 패널을 마우스 오른쪽 단추로 클릭하고 ScrollBar의 구성 요소로 만들기를 가리킨 다음 VerticalThumb 또는 HorizontalThumb를 클릭합니다.

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

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

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

   7. Thumb 개체의 Width 및 Height 속성을 Auto로, MinHeight 또는 MinWidth 속성을 0보다 큰 값으로, Margin 속성을 0으로 설정합니다.

8. 사용자가 트랙의 한쪽 끝에서 단추를 클릭하여 Thumb 개체를 조금씩 이동할 수 있도록 하려면 다음 작업을 수행합니다.

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

   2. 레이아웃 패널을 VerticalRoot 개체의 첫 번째 행 또는 HorizontalRoot 개체의 첫 번째 열로 이동합니다.

   3. 레이아웃 패널을 마우스 오른쪽 단추로 클릭하고 ScrollBar의 구성 요소로 만들기를 가리킨 다음 VerticalSmallDecrease 또는 HorizontalSmallDecrease를 클릭합니다.

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

   5. 새 RepeatButton 개체에 대한 템플릿 편집 모드에 있는 동안에는 ContentPresenter 개체 삭제와 같은 수정 작업을 계속할 수 있습니다. RepeatButton 개체에 여백을 두려면 루트 개체에서 Margin 속성을 설정합니다.

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

   7. 속성 패널의 레이아웃에서 속성을 조정하여 원하는 위치에 RepeatButton을 표시합니다. 개체가 다른 개체 뒤에 숨겨져 있는 경우 개체를 다시 정렬할 수도 있습니다.

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

   8. VerticalSmallIncrease 또는 HorizontalSmallIncrease 개체에 대해서도 이 단계를 반복합니다. 이때는 개체를 VerticalRoot 개체의 마지막 행 또는 HorizontalRoot 개체의 마지막 열로 이동합니다.

9. 사용자가 Thumb 개체의 한쪽 끝에 있는 트랙을 클릭하여 큰 폭으로 이동할 수 있도록 하려면 다음 작업을 수행합니다.

   1. Thumb 개체의 한쪽에서 각 행이나 열에 RepeatButton 컨트롤을 그립니다.

   2. ScrollBar 개체의 값을 줄일 RepeatButton 개체를 마우스 오른쪽 단추로 클릭하고 ScrollBar의 구성 요소로 만들기를 가리킨 다음 VerticalLargeDecrease 또는 HorizontalLargeDecrease를 클릭합니다.

   3. ScrollBar 개체의 값을 늘릴 RepeatButton 개체를 마우스 오른쪽 단추로 클릭하고 ScrollBar의 구성 요소로 만들기를 가리킨 다음 VerticalLargeIncrease 또는 HorizontalLargeIncrease를 클릭합니다.

   4. RepeatButton 개체가 표시되지 않도록 하려면 Opacity 속성을 0으로 설정합니다.

      팁:
      VerticalSmallDecrease 또는 HorizontalSmallDecrease 개체에 대해 수행한 것과 마찬가지로 원하는 경우 기존 개체를 RepeatButton 컨트롤 템플릿으로 변환할 수 있습니다. 이때 변환된 RepeatButton 개체를 Thumb 개체의 한쪽에 있는 행이나 열로 이동해야 합니다.

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

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

    • 배경

    • BorderBrush

    • Foreground

    • BorderThickness

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

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

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

참조

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

참조

작업

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

개념

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

SimpleScrollBar

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