ScrollViewer 컨트롤 스타일 지정 팁

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

ScrollViewer 템플릿의 파트

ScrollViewer 템플릿에는 다음과 같은 파트가 있습니다.

파트 이름	개체 형식
ScrollContentPresenter	ScrollContentPresenter
HorizontalScrollBar	ScrollBar
VerticalScrollBar	ScrollBar

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

ScrollViewer 팁

ScrollViewer 는 가로 ScrollBar 및 세로 ScrollBar 로 제어되는 스크롤 가능한 콘텐츠로 구성됩니다. ScrollBar 는 항상 표시하거나 숨기도록 설정하거나 필요한 경우에만 표시하도록 설정할 수 있습니다.

ScrollViewerPresenter 파트

ScrollContentPresenter 파트는 필수 요소이며, ScrollContentPresenter 는 스크롤 가능한 콘텐츠를 표시합니다.

HorizontalScrollBar 파트

HorizontalScrollBar 파트는 선택 사항이며, 이 파트의 Visibility 속성을 ComputedHorizontalScrollBarVisibility 로, Maximum 속성을 ScrollableWidth 로, Value 속성을 HorizontalOffset 으로, ViewportSize 속성을 ViewportWidth 로 템플릿 바인딩합니다.

VerticalScrollBar 파트

VerticalScrollBar 파트는 선택 사항이며, 이 파트의 Visibility 속성을 ComputedVerticalScrollBarVisibility 로, Maximum 속성을 ScrollableHeight 로, Value 속성을 VerticalOffset 으로, ViewportSize 속성을 ViewportHeight 로 템플릿 바인딩합니다.

템플릿 바인딩

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

ScrollViewer 컨트롤로 개체 변환

다음 그림은 디자이너가 만든 스크롤 뷰어의 전체 디자인(comp)입니다.

위 그림은 스크롤 뷰어가 아니라 스크롤 뷰어와 유사한 아트워크입니다.

이 예에서는 다음 절차의 2단계에서 XAML 코드를 사용합니다.

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

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

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

   <Grid x:Name="root" Height="146" Width="146">
      <Rectangle Fill="#FF333333" RadiusX="3" RadiusY="3" />
      <Rectangle x:Name="content" Stroke="Black" Width="200" Height="200">
         <Rectangle.Fill>
         <RadialGradientBrush>
            <GradientStop Color="White"/>
            <GradientStop Color="Black" Offset="1"/>
         </RadialGradientBrush>
         </Rectangle.Fill>
      </Rectangle>
      <Grid x:Name="verticalscrollbar" Width="17" Height="146" HorizontalAlignment="Right">
         <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>
   </Grid>
   

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

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

   이 단계에서 Expression Blend는 root 및 root 내부의 모든 항목을 제거하고 해당 위치에 새 ScrollViewer 를 둡니다. 다음으로 Expression Blend는 root 를 새 ScrollViewer 스타일의 템플릿으로 변환하고 새 스타일을 새 ScrollViewer 에 적용합니다.

5. 개체 및 타임라인 패널에서 ContentPresenter를 마우스 오른쪽 단추로 클릭하고 삭제를 클릭합니다.

6. 개체 및 타임라인 패널에서 root를 클릭합니다. 파트 패널에서 ScrollContentPresenter를 두 번 클릭합니다.

7. verticalscrollbar를 마우스 오른쪽 단추로 클릭하고 ScrollViewer의 파트로 만들기를 가리킨 다음 VerticalScrollBar를 클릭합니다. 확인을 클릭합니다.

   VerticalScrollBar 의 스타일을 지정하려면 ScrollBar 컨트롤 스타일 지정 팁을 참조하십시오.

8. 범위를 {0}(으)로 되돌립니다.를 클릭하여 ****ScrollViewerStyle1(ScrollViewer 템플릿)****로 돌아갑니다.

9. VerticalScrollBar 에서는 스크롤 가능한 영역의 뷰포트를 스크롤할 수 있어야 합니다. 이를 가능하게 하려면 속성 패널의 고급 옵션 메뉴에서 사용자 지정 식 옵션을 사용하면 됩니다. Visibility를 ****{TemplateBinding ComputedVerticalScrollBarVisibility}****로, Maximum을 ****{TemplateBinding ScrollableHeight}****로, Value를 ****{TemplateBinding VerticalOffset}****으로, ViewportSize를 ****{TemplateBinding ViewportHeight}****로 설정합니다.

   또는 개체 및 타임라인 패널에서 VerticalScrollBar를 선택하고 나누기 보기에서 <ScrollBar x:Name="VerticalScrollBar로 시작하는 코드 줄을 찾은 다음 방금 찾은 줄 끝에 다음 코드를 붙여 넣습니다.

   Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" 
   Maximum="{TemplateBinding ScrollableHeight}" 
   Value="{TemplateBinding VerticalOffset}" 
   ViewportSize="{TemplateBinding ViewportHeight}"
   

10. ScrollContentPresenter 및 VerticalScrollBar는 자체 열에서 서로 나란히 있어야 합니다. 개체 및 타임라인 패널에서 root를 클릭합니다. 다음 그림에서와 같이 아트보드에서 컨트롤 위의 파란색 테두리를 클릭한 다음 주황색 화살표를 스크롤 막대 바로 옆까지 끌어 옵니다.

    

11. 오른쪽 열에서는 별을 두 번 클릭합니다. 자동 아이콘이 나타납니다.

12. 개체 및 타임라인 패널에서 ScrollContentPresenter를 클릭합니다. 속성 패널의 레이아웃 범주에서 ColumnSpan 오른쪽에 있는 고급 옵션을 클릭한 다음 다시 설정을 클릭합니다.

13. 개체 및 타임라인 패널에서 VerticalScrollBar를 클릭합니다. 속성 패널의 레이아웃 범주에서 Margin 오른쪽에 있는 고급 옵션을 클릭한 다음 다시 설정을 클릭합니다.

14. content 라는 개체가 템플릿에 있으며, 이 개체는 146픽셀의 ScrollViewer 를 스크롤하는 200픽셀의 사각형입니다. 다음 단계에서는 템플릿에서 이 개체를 복사하여 ScrollViewer의 Content 속성에 붙여 넣습니다. 그려면 ScrollContentPresenter에 이 개체가 표시됩니다. 개체 및 타임라인 패널에서 content를 마우스 오른쪽 단추로 클릭하고 잘라내기를 클릭합니다.

15. 범위를 {0}(으)로 되돌립니다.를 클릭한 다음 Ctrl+V를 눌러 ScrollViewer의 Content 속성에 content를 붙여넣습니다.

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

    중요:
    7단계에 설명된 것과 같이 ScrollBar 컨트롤 스타일 지정 팁을 사용하여 ScrollBar 의 스타일을 지정하지 않은 경우 ListBox 가 예상대로 작동하지 않습니다.

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

참조

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

참조 항목

개념

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

Copyright ⓒ 2011 by Microsoft Corporation. All rights reserved.