ScrollBar 컨트롤 스타일 지정 팁

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

ScrollBar 템플릿의 구성 요소

ScrollBar 템플릿에는 두 집합의 파트가 있습니다. 한 집합은 세로 스크롤 막대에서 사용되며 다른 하나는 가로 스크롤 막대에서 사용됩니다. 스크롤 막대의 방향에 따라 파트 이름에는 "세로" 또는 "가로"라는 단어가 앞에 붙습니다.

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

ScrollBar 팁

Root 파트

이 구성 요소는 필수입니다. Root 파트에는 특정 방향으로 ScrollBar 를 구성하는 모든 요소가 포함되어 있습니다.

Root 파트를 만들려면 HorizontalRoot 또는 VerticalRoot 로 명명되고 자동, 자동, 자동, 배율, 자동으로 크기가 조정된 다섯 개의 열(가로 방향)이나 행(세로 방향)이 있는 모눈을 만듭니다.

Thumb 파트

이 구성 요소는 필수입니다. Thumb은 스크롤 막대에서 이동 가능한 요소입니다.

Thumb을 나타내는 개체를 Thumb 컨트롤( HorizontalThumb 또는 VerticalThumb )로 만들려면 Root 파트의 가운데 열/행에 Thumb 파트를 배치하고, Thumb에 맞게 열이나 행의 크기가 조정되도록 Thumb 파트의 Width 및 Height 속성을 설정합니다.

Thumb에 대한 Margin 속성은 설정하지 마십시오. 동일한 결과를 얻으려면 Thumb 템플릿에 대한 루트 개체의 여백을 설정합니다.

Track

Thumb이 이동하는 공간을 트랙이라고 하며 트랙은 파트가 아니며 선택 사항입니다.

트랙을 포함하려면 트랙을 나타내는 개체를 Root 파트에 배치합니다. 이때 개체가 다섯 개의 열이나 행 모두에 걸치도록 배치하거나 가운데 세 개 열이나 행에 걸치도록 배치합니다.

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

트랙을 따라 큰 폭으로 Thumb 이동

사용자가 Thumb 양쪽에서 트랙을 클릭하여 Thumb을 큰 폭으로 이동할 수 있게 하려면 Thumb 파트 양쪽에 있는 두 개 열이나 행에 RepeatButton 컨트롤을 배치하고 VerticalLargeDecrease 및 VerticalLargeIncrease 또는 HorizontalLargeDecrease 및 HorizontalLargeIncrease 로 이름을 지정합니다. RepeatButtons 가 작동하지만 보이지 않도록 하려면 Opacity 를 0으로 설정합니다. 또는 Opacity 가 0으로 설정된 단일 개체를 포함하는 템플릿을 RepeatButton 컨트롤에 적용합니다.

트랙을 따라 약간씩 Thumb 이동

사용자가 트랙 양쪽 끝에서 단추를 클릭하여 Thumb을 약간씩 이동할 수 있도록 하려면 이러한 단추를 나타내는 개체를 RepeatButton 컨트롤로 만들고 VerticalSmallDecrease 및 VerticalSmallIncrease 또는 HorizontalSmallDecrease 및 HorizontalSmallIncrease 로 이름을 지정합니다. 두 개의 끝 열이나 행에 개체를 배치합니다.

ScrollBar 컨트롤의 상태

ScrollBar 컨트롤 템플릿에 상태를 사용할 수도 있습니다. ScrollBar 컨트롤은 기본적으로 CommonStates 상태 그룹의 다음 세 상태 중 하나일 수 있습니다.

팁:
사용 가능한 상태를 보려면 ScrollBar 템플릿을 수정하는 동안 상태 패널을 엽니다.

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

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

템플릿 바인딩

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

개체를 ScrollBar 컨트롤로 변환

다음 그림은 VerticalThumb , VerticalSmallDecrease 및 VerticalSmallIncrease 파트의 MouseOver 및 Pressed 상태가 포함된 스크롤 막대의 전체 디자인(comp)입니다.

Normal

MouseOver

Pressed

Disabled

이 예에서는 다음 절차의 1단계(위 그림에 해당)에서 XAML 코드를 사용하여 ScrollBar 컨트롤 템플릿으로 사용자 지정 스크롤 막대를 만듭니다.

팁:
이 절차를 수행하면서 디자인 보기 및 코드 보기 모두에서 변경 내용을 확인하려면 나누기 보기를 클릭합니다.

1. 새 Microsoft Silverlight 프로젝트를 엽니다. 코드 보기에서 다음 코드를 찾은 다음 닫는 슬래시 표시(/)를 삭제합니다.

   <Grid x:Name="LayoutRoot" Background="White"/>
   

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

   <Grid x:Name="verticalscrollbar" Width="17" Height="146" >
      <Rectangle x:Name="track" Fill="#FF3D3D3D" StrokeThickness="0" />
      <Path x:Name="smalldecrease" Fill="Gray" Stretch="Fill" Width="7" Height="7" 
         Data="M200,312 L204,312 L200,305 z" Margin="0,5,0,0" VerticalAlignment="Top"/>
      <Rectangle x:Name="thumb" Fill="Gray" RadiusX="3" RadiusY="3" Height="61" Width="7" 
         Margin="0,24,0,0" VerticalAlignment="Top"/>
      <Path x:Name="smallincrease" Fill="Gray" Stretch="Fill" Width="7" Height="7" 
         Data="M200,305 L200,312 L204,305 z" Margin="0,0,0,5" 
         VerticalAlignment="Bottom" />
   </Grid>
   

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

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

   코드 보기에서 이전 단계에서 붙여 넣은 코드가 새 ScrollBar 컨트롤의 코드로 바뀌었습니다(<Grid x:Name="verticalscrollbar">로 시작하는 코드를 찾음). 또한 Microsoft Expression Blend는 verticalscrollbar 를 새 ScrollBar 스타일의 템플릿으로 변환하고 verticalscrollbar 에 해당 템플릿을 적용합니다(<Style x:Key="ScrollBarStyle1" TargetType="ScrollBar">를 찾음).

   팁:
   개체 및 타임라인 패널에서 UserControl이 Template으로 바뀌었습니다.

5. verticalscrollbar 를 템플릿 루트로 만들려면 개체 및 타임라인 패널에서 verticalscrollbar 를 마우스 오른쪽 단추로 클릭하고 ScrollBar의 파트로 만들기를 클릭한 다음 VerticalRoot를 클릭합니다. verticalscrollbar 의 이름이 VerticalRoot 로 바뀌었습니다.

6. Root 파트 모눈에 행을 추가하려면, 다음 그림에서와 같이 디자인 보기에서 컨트롤 왼쪽에 있는 파란색 눈금자를 클릭하여 새 행을 추가합니다.

   

   그림에서와 같이 행을 추가하면 적절한 행에 파트가 배치됩니다. Track 에는 5개의 RowSpan 이 있으며, smalldecrease 는 Row 0에, thumb 은 Row 2에, smallincrease 는 Row 의 4에 배치됩니다.

   [!참고]

   번호는 0에서부터 시작되며 행이 5개이므로 0에서 4까지로 지정됩니다.

   이제 아트워크 요소를 템플릿의 파트로 정의해야 합니다. 요소를 정의하면서 특정 속성에 값을 할당할 수도 있습니다.

7. 개체 및 타임라인 패널에서 smalldecrease 를 마우스 오른쪽 단추로 클릭하고 ScrollBar의 파트로 만들기를 클릭한 다음 VerticalSmallDecrease를 클릭합니다. 파트로 만들기 대화 상자에서 확인을 클릭합니다.

   smalldecrease 요소가 ScrollBar 컨트롤 템플릿의 VerticalSmallDecrease 파트인 RepeatButton 형식으로 만들어졌습니다.

8. 기본적으로 Expression Blend는 파트에 대해 ContentPresenter 를 만듭니다. 이 예에서는 ContentPresenter 를 사용하지 않으므로 개체 및 타임라인 패널에서 ContentPresenter를 마우스 오른쪽 단추로 클릭한 다음 삭제를 클릭하여 삭제해도 됩니다.

9. VerticalSmallDecrease 파트의 속성을 설정하려면 개체 및 타임라인 패널에서 smalldecrease 를 클릭한 다음 속성 패널을 엽니다. 레이아웃 범주에서 Width 및 Height를 7 로 설정합니다.

10. VerticalSmallDecrease 파트에 상태를 추가하려면 상태 패널에서 MouseOver를 클릭합니다. 속성 패널에서 Fill을 #FFCCCCCC 로 설정합니다. 상태 패널로 돌아간 다음 Base를 클릭하여 상태 기록을 종료합니다.

    [!참고]

    문서 창의 왼쪽 맨 위에서 기록 모드 표시기 를 클릭하여 상태 기록을 종료할 수도 있습니다.

    상태 패널에서 Pressed를 클릭합니다. 속성 패널에서 Fill을 #FFE5E5E5 로 설정합니다. 상태 패널로 돌아가 Base를 클릭합니다.

    상태 패널에서 Normal을 클릭하고 전환 추가를 클릭한 다음 Normal->MouseOver를 클릭합니다. 전환 지속 시간 상자에 .2 를 입력하고 Base를 클릭합니다.

11. 개체 및 타임라인 패널에서 Grid를 클릭합니다. 속성 패널의 브러시 범주에서 단색 브러시 를 클릭한 다음 Alpha 속성을 1 로 설정합니다.

12. 개체 및 타임라인 패널에서 범위를 {0}(으)로 되돌립니다. 를 클릭하거나 아트보드의 맨 위에 있는 이동 경로 탐색 막대에서 VerticalSmallDecrease를 클릭하여 ScrollBar 컨트롤 [ScrollBarStyle1(ScrollBar 템플릿)]에 대한 템플릿 편집 모드로 돌아갑니다.

    smallincrease 요소에 대해 7-12단계를 반복합니다.

13. thumb 을 템플릿 파트로 정의하려면 개체 및 타임라인 패널에서 thumb 을 마우스 오른쪽 단추로 클릭하고 ScrollBar의 파트로 만들기를 클릭한 다음 Vertical Thumb을 클릭합니다. 파트로 만들기 대화 상자에서 확인을 클릭합니다.

14. VerticalThumb 파트의 속성을 설정하려면 범위를 {0}(으)로 되돌립니다. 를 클릭하여 ScrollBar 컨트롤 [ScrollBarStyle1(ScrollBar 템플릿)]에 대한 편집 모드로 돌아간 다음 개체 및 타임라인 패널에서 VerticalThumb을 클릭합니다. 속성 패널의 레이아웃 범주에서 Width 및 Height를 7 로 설정합니다. Margin 값을 다음과 같이 설정합니다.

    • Left: 5

    • Right: 5

    • Top: 0

    • Bottom: 0

    고급 속성을 클릭한 다음 MinHeight를 7 로 설정합니다. 이렇게 하면 Thumb에 최소 높이 값이 할당되며 항상 표시됩니다.

15. thumb 파트에 상태를 추가하려면 아트보드의 맨 위에 있는 이동 경로 탐색 막대에서 Thumb을 클릭하여 Thumb 템플릿 [ThumbStyle1(ThumbTemplate)]으로 돌아갑니다. 상태 패널에서 MouseOver를 클릭합니다. 속성 패널에서 Fill을 #FFCCCCCC 로 설정합니다. 상태 패널로 돌아가 Base를 클릭합니다.

    상태 패널에서 Pressed를 클릭합니다. 속성 패널에서 Fill을 #FFE5E5E5 로 설정합니다. 상태 패널로 돌아가 Base를 클릭합니다.

    상태 패널에서 Normal을 클릭하고 전환 추가를 클릭한 다음 Normal->MouseOver를 클릭합니다. 전환 지속 시간 상자에 .2 를 입력하고 Base를 클릭합니다.

16. 개체 및 타임라인 패널에서 범위를 {0}(으)로 되돌립니다. 를 클릭하여 ****ScrollBarStyle1(ScrollBar 템플릿)****으로 돌아갑니다. 개체 및 타임라인 패널에서 VerticalRoot를 클릭합니다. 파트 패널에서 VerticalLargeDecrease를 두 번 클릭하여 파트를 만들고 이 파트를 VerticalRoot 의 자식 파트로 만듭니다. 속성 패널에서 Row를 1 로, Opacity를 0 으로 설정합니다.

17. 개체 및 타임라인 패널에서 VerticalRoot를 클릭합니다. 파트 패널에서 VerticalLargeIncrease를 두 번 클릭하여 파트를 만들고 이 파트를 VerticalRoot의 자식 파트로 만듭니다. 속성 패널에서 Row를 3 으로, Opacity를 0 으로 설정합니다.

18. 0, 1, 2, 4행의 경우 자동 아이콘 이 나타날 때까지 배율 아이콘 을 두 번 클릭합니다. 3행의 경우 배율 아이콘이 표시되는지 확인합니다. 이렇게 하면 행의 높이가 자동, 자동, 자동, 배율, 자동으로 설정됩니다. 자동 크기 조정된 각각의 행 구분선을 클릭한 다음 속성 패널에서 고급 속성 표시를 클릭합니다. MinHeight 값의 오른쪽에서 고급 옵션을 클릭하고 다시 설정을 클릭합니다.

    

19. 개체 및 타임라인 패널에서 VerticalRoot를 클릭합니다. 상태 패널에서 Disabled를 클릭합니다. 속성 패널에서 Opacity를 50 으로 설정합니다.

20. Ctrl+Shift+B를 클릭하여 프로젝트를 빌드합니다. 빌드가 완료되면 F5 키를 눌러 프로젝트를 실행한 후 스크롤 막대를 테스트합니다.

참조

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

참조 항목

작업

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

개념

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

Copyright ⓒ 2011 by Microsoft Corporation. All rights reserved.