ScrollViewer 컨트롤 스타일 지정 팁

Ee341456.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(KO-KR,Expression.30).png

ScrollViewer 컨트롤은 스크롤 가능한 보기 영역을 표시하는 개체를 나타냅니다. 보기 영역에는 모든 개체를 배치할 수 있습니다. 예를 들어 ListBox의 템플릿에 항목 목록을 표시하는 ItemsPresenter가 포함되는 ScrollViewer 컨트롤이 있을 수 있습니다.

다른 컨트롤과 마찬가지로 ScrollViewer 컨트롤의 모양을 기본이 아닌 다른 모양으로 수정할 수 있습니다. 기본적으로 ScrollViewer 컨트롤의 모양은 다음과 같습니다.

Ee341456.0fb6390c-a631-4f14-8f23-be3723f99405(KO-KR,Expression.30).png

ScrollViewer 컨트롤의 중요 속성

ScrollViewer 컨트롤에서 ScrollBar 개체를 숨기거나 표시하려면 속성 패널의 레이아웃 범주 아래에 있는 고급 속성 표시 Ee341456.de239c9d-42ce-4f5e-83b9-5f9924c0431f(KO-KR,Expression.30).png를 클릭하여 표시되는 HorizontalScrollBarVisibilityVerticalScrollBarVisibility 속성을 설정합니다.

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

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

  • 스타일에 속성 설정 ScrollViewer 개체의 스타일 Ee341456.94fa7fc4-4f3e-4e84-9ba1-287f1b894371(KO-KR,Expression.30).png에 이런 속성을 설정하면 이 스타일을 사용하는 모든 ScrollViewer 개체는 같은 값을 사용합니다. 특정 개체의 경우 값을 덮어쓸 수 있습니다.

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

항목을 ScrollViewer 컨트롤에 표시하려면 개체 및 타임라인 아래에서 이 컨트롤을 선택하여 활성 컨테이너로 설정한 다음 새 개체를 그리거나 기존 개체를 ScrollViewer 컨트롤로 이동합니다.

ScrollViewer 컨트롤에 데이터 컬렉션의 항목을 표시하려면 대신 ListBox 컨트롤을 사용하는 것이 좋습니다.

자세한 내용은 개체를 데이터에 바인딩예제 데이터 만들기를 참조하십시오.

ScrollViewer 템플릿의 파트

ScrollViewer 컨트롤은 ScrollViewer 템플릿이라는 하나의 템플릿을 사용하여 모양을 정의합니다. 이 템플릿의 각 파트는 템플릿이 적용되는 ScrollViewer 개체의 모양과 동작에 영향을 끼칩니다.

템플릿 내에는 ScrollViewer 컨트롤의 모양을 지정하는 다른 개체가 있을 수 있지만 다음 표에 나열된 파트들은 계약상 컨트롤의 동작에 연결되어 있습니다.

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

Ee341456.6b56bb85-3531-440a-8432-7bb0d1e99d83(KO-KR,Expression.30).png

파트 이름

개체 형식

설명

ScrollContentPresenter

ScrollContentPresenter

ScrollViewer 컨트롤의 콘텐츠를 표시하는 개체입니다.

이 파트는 필수 요소입니다.

HorizontalScrollBar

ScrollBar

ScrollBar 개체는 ScrollViewer 컨트롤의 아래쪽에 나타납니다.

VerticalScrollBar

ScrollBar

ScrollBar 개체는 ScrollViewer 컨트롤의 오른쪽에 나타납니다.

ScrollViewer 컨트롤의 상태

기본적으로 ScrollViewer 컨트롤에는 정의된 상태가 없습니다. 사용자 고유의 상태를 만들거나 ListBox 컨트롤과 같은 템플릿에 ScrollViewer 컨트롤이 포함되는 컨트롤의 상태를 사용할 수 있습니다.

자세한 내용은 사용자 정의 컨트롤의 다양한 시각적 상태 및 전환 시간 정의ListBox 컨트롤 스타일 지정 팁를 참조하십시오.

ScrollViewer 컨트롤로 개체 변환

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

  • 아트보드에서 ScrollViewer 컨트롤 Ee341456.bf689d92-3c74-4218-815c-e98c930ac189(KO-KR,Expression.30).png을 그린 다음 기본 템플릿의 사본을 만듭니다.

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

  • 개체를 그리고 아트를 가져와 ScrollViewer 컨트롤의 모양을 디자인한 다음 컨트롤로 만들기 명령을 사용합니다.

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

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

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

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

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

  4. 확인을 클릭하면 Microsoft Expression Blend는 템플릿 편집 모드를 시작한 다음 수직 ScrollViewer 컨트롤을 구성하는 개체를 표시합니다. 이 모드에서 템플릿을 계속 수정할 수 있습니다. 예를 들어 특정 상태의 템플릿 모양을 수정하기 위해 상태 패널에서 상태를 선택하거나 개체를 추가 및 수정할 수 있습니다.

  5. 템플릿에 만들어진 ContentPresenter 개체를 삭제합니다.

  6. 템플릿의 ScrollContentPresenter 파트에 지정되는 개체를 추가하려면 파트 패널에서 ScrollContentPresenter를 두 번 클릭합니다. 새 ScrollContentPresenter 개체를 원하는 위치로 이동합니다.

    Ee341456.alert_tip(KO-KR,Expression.30).gif팁:

    또는 ScrollContentPresenter 개체를 추가하고 ScrollContentPresenter로 이름을 바꾼 다음 여러 개체를 ScrollViewer 컨트롤로 변환할 수 있습니다. 컨트롤로 만들기 명령이 여러 개체를 컨트롤로 변환할 때 이름과 형식이 템플릿 파트와 동일한 개체는 자동으로 해당 파트로 변환됩니다. 사용된 개체가 없는 경우 파트는 파트 패널에서 Ee341456.64d085f2-3d49-4b74-8070-4d7dae18dc28(KO-KR,Expression.30).png 아이콘 옆에 표시되어 사용 중이 아님을 나타냅니다.

    자세한 내용은 템플릿 파트를 개체에 할당합니다.을 참조하십시오.

  7. 템플릿의 HorizontalScrollBar 및 VerticalScrollBar 파트에 대해 사용할 아트나 다른 개체가 없는 경우 다음 작업을 수행합니다.

    1. 각 개체 집합을 레이아웃 패널로 그룹화합니다.

    2. 새 레이아웃 패널 중 하나를 마우스 오른쪽 단추로 클릭하고 ScrollViewer 파트로 만들기를 가리킨 다음 HorizontalScrollBar 또는 VerticalScrollBar를 클릭합니다.

      이렇게 하면 사용자의 개체가 ScrollBar 개체로 바뀌며 사용자의 개체를 사용하여 ScrollBar 개체에 적용될 스타일과 템플릿이 만들어집니다.

    3. 파트로 만들기 대화 상자에 만들어질 ScrollBar 스타일의 이름을 입력하고 이 스타일이 저장될 위치를 선택한 다음 확인을 클릭합니다.

    4. 새 ScrollBar 개체가 템플릿 편집 모드인 경우 개체를 계속 수정할 수 있습니다.

      자세한 내용은 ScrollBar 컨트롤 스타일 지정 팁을 참조하십시오.

    ScrollViewer에 대한 템플릿 편집 모드로 다시 돌아가려면 개체 및 타임라인 패널에서 상위 범위로 이동 Ee341456.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(KO-KR,Expression.30).png을 클릭하거나 아트보드의 맨 위에 있는 이동 경로 탐색 막대에서 HorizontalScrollBar 또는 VerticalScrollBar를 클릭합니다.

  8. 템플릿을 최종적으로 사용할 ScrollViewer 개체의 속성에 템플릿의 다음 개체 속성을 템플릿 바인딩하는 것이 좋습니다.

    • Visibility 이 속성을 Visible 속성에 템플릿 바인딩합니다.

    • Maximum 이 속성을 Width 속성(HorizontalScrollBar 개체) 또는 Height 속성(VerticalScrollBar 개체)에 템플릿 바인딩합니다.

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

  9. 템플릿에서 일부 브러시 속성을 바인딩합니다.

    • 배경

    • BorderBrush

    • BorderThickness

  10. 템플릿 편집 모드를 종료하려면 아트보드 맨 위에 있는 이동 경로 탐색 막대에서 **[ScrollViewer]**를 클릭하거나 개체 및 타임라인 패널에서 상위 범위로 이동 Ee341456.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(KO-KR,Expression.30).png을 클릭합니다.

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

참조

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

참조

개념

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

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

SimpleScrollBar