Blend에서 Silverlight 컨트롤에 대한 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 속성을 템플릿 바인딩할 수 있습니다. 자세한 내용은 Blend에서 개체 속성을 템플릿으로 연장을 참조하십시오.
ScrollViewer 컨트롤로 개체 변환
다음 그림은 디자이너가 만든 스크롤 뷰어의 전체 디자인(comp)입니다.
위 그림은 스크롤 뷰어가 아니라 스크롤 뷰어와 유사한 아트워크입니다.
이 예에서는 다음 절차의 2단계에서 XAML 코드를 사용합니다.
새 Microsoft Silverlight 프로젝트를 엽니다. 코드 보기에서 다음 코드를 찾은 다음 닫는 슬래시 표시(/)를 삭제합니다.
<Grid x:Name="LayoutRoot" Background="White"/>
다음 코드를 복사하여 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>
붙여 넣은 코드 뒤에 닫는 Grid 태그(</Grid>)를 추가합니다.
개체 및 타임라인 패널에서 root를 마우스 오른쪽 단추로 클릭한 후 컨트롤로 만들기를 클릭합니다. 컨트롤로 만들기 대화 상자에서 ScrollViewer를 클릭한 다음 확인을 클릭합니다.
이 단계에서 Blend는 root 및 root 내부의 모든 항목을 제거하고 해당 위치에 새 ScrollViewer를 둡니다. 다음으로 Blend는 root를 새 ScrollViewer 스타일의 템플릿으로 변환하고 새 스타일을 새 ScrollViewer에 적용합니다.
개체 및 타임라인 패널에서 ContentPresenter를 마우스 오른쪽 단추로 클릭하고 삭제를 클릭합니다.
개체 및 타임라인 패널에서 root를 클릭합니다. 파트 패널에서 ScrollContentPresenter를 두 번 클릭합니다.
verticalscrollbar를 마우스 오른쪽 단추로 클릭하고 ScrollViewer의 파트로 만들기를 가리킨 다음 VerticalScrollBar를 클릭합니다. 확인을 클릭합니다.
VerticalScrollBar의 스타일을 지정하려면 Blend에서 Silverlight 컨트롤에 대한 ScrollBar 컨트롤 스타일 지정 팁을 참조하십시오.
범위 반환을 클릭하여 **ScrollViewerStyle1(ScrollViewer 템플릿)**로 돌아갑니다.
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}"
ScrollContentPresenter 및 VerticalScrollBar는 자체 열에서 서로 나란히 있어야 합니다. 개체 및 타임라인 패널에서 root를 클릭합니다. 다음 그림에서와 같이 아트보드에서 컨트롤 위의 파란색 테두리를 클릭한 다음 주황색 화살표를 스크롤 막대 바로 옆까지 끌어 옵니다.
오른쪽 열에서는 별을 두 번 클릭합니다. 자동 아이콘 이 나타납니다.
개체 및 타임라인 패널에서 ScrollContentPresenter를 클릭합니다. 속성 패널의 레이아웃 범주에서 ColumnSpan 오른쪽에 있는 고급 옵션을 클릭한 다음 다시 설정을 클릭합니다.
개체 및 타임라인 패널에서 VerticalScrollBar를 클릭합니다. 속성 패널의 레이아웃 범주에서 Margin 오른쪽에 있는 고급 옵션을 클릭한 다음 다시 설정을 클릭합니다.
content라는 개체가 템플릿에 있으며, 이 개체는 146픽셀의 ScrollViewer를 스크롤하는 200픽셀의 사각형입니다. 다음 단계에서는 템플릿에서 이 개체를 복사하여 ScrollViewer의 Content 속성에 붙여 넣습니다. 그려면 ScrollContentPresenter에 이 개체가 표시됩니다. 개체 및 타임라인 패널에서 content를 마우스 오른쪽 단추로 클릭하고 잘라내기를 클릭합니다.
범위 바ㄴ환를 클릭한 다음 Ctrl+V를 눌러 ScrollViewer의 Content 속성에 content를 붙여넣습니다.
프로젝트를 빌드(Ctrl+Shift+B)한 다음 F5 키를 눌러 프로젝트를 테스트합니다.
중요
7단계에 설명된 대로 Blend에서 Silverlight 컨트롤에 대한 ScrollBar 컨트롤 스타일 지정 팁을 사용하여 ScrollBar 의 스타일을 지정하지 않으면 ListBox 가 예상대로 작동하지 않습니다.
새 ComboBox 템플릿을 다른 ComboBox 개체에 적용하는 방법에 대한 자세한 내용은 Blend에서 리소스 적용 또는 제거를 참조하십시오.
참조
Silverlight ScrollViewer 컨트롤의 속성 및 이벤트에 대한 자세한 내용은 MSDN의 Silverlight 컨트롤 갤러리에서 확인할 수 있습니다.