스크롤 뷰어 컨트롤Scroll viewer controls

한 영역에 모두 표시할 수 없을 정도로 UI 콘텐츠가 너무 많은 경우 스크롤 뷰어 컨트롤을 사용합니다.When there is more UI content to show than you can fit in an area, use the scroll viewer control.

중요 API: ScrollViewer 클래스, ScrollBar 클래스Important APIs: ScrollViewer class, ScrollBar class

스크롤 뷰어를 사용하면 콘텐츠가 뷰포트(표시 영역)의 경계를 넘어 확장될 수 있습니다.Scroll viewers enable content to extend beyond the bounds of the viewport (visible area). 사용자는 마우스 또는 펜 커서를 사용하여 스크롤 뷰어의 스크롤 막대를 조작하거나 터치, 마우스 휠, 키보드 또는 게임 패드를 통해 스크롤 뷰어 표면을 조작하여 이 콘텐츠에 도달합니다.Users reach this content by manipulating the scroll viewer surface through touch, mousewheel, keyboard, or a gamepad, or by using the mouse or pen cursor to interact with the scroll viewer's scrollbar. 이 이미지는 스크롤 뷰어 컨트롤의 몇 가지 예를 보여 줍니다.This image shows several examples of scroll viewer controls.

표준 스크롤 막대 컨트롤을 보여 주는 스크린샷

스크롤 뷰어의 스크롤 막대는 다음 그림과 같이 상황에 따라 이동 표시기(왼쪽)와 기본 스크롤 막대(오른쪽)라는 두 가지 시각화를 사용합니다.Depending on the situation, the scroll viewer's scrollbar uses two different visualizations, shown in the following illustration: the panning indicator (left) and the traditional scrollbar (right).

표준 스크롤 막대 및 이동 표시기 컨트롤의 모양 샘플

스크롤 뷰어는 사용자의 입력 방식을 인식하고, 표시할 시각화를 결정하는 데 사용합니다.The scroll viewer is conscious of the user's input method and uses it to determine which visualization to display.

  • 스크롤 막대를 직접 조작하지 않고 터치 등으로 영역을 스크롤하는 경우 현재 스크롤 위치 표시와 함께 이동 표시기가 나타납니다.When the region is scrolled without manipulating the scrollbar directly, for example, by touch, the panning indicator appears, displaying the current scroll position.
  • 마우스나 펜 커서가 이동 표시기 위로 이동하면 이동 표시기가 기존 스크롤 막대로 변형됩니다.When the mouse or pen cursor moves over the panning indicator, it morphs into the traditional scrollbar. 스크롤 막대 위치 조정 컨트롤을 끌어 스크롤 영역을 조작합니다.Dragging the scrollbar thumb manipulates the scrolling region.

스크롤 막대의 기능

참고

스크롤 막대는 ScrollViewer 내의 콘텐츠 맨 위에 16px로 오버레이되어 표시됩니다.When the scrollbar is visible it is overlaid as 16px on top of the content inside your ScrollViewer. 훌륭한 UX 디자인을 만들려면 스크롤 막대가 오버레이되어 대화형 콘텐츠가 잘 보이지 않는 경우가 없도록 합니다.In order to ensure good UX design you will want to ensure that no interactive content is obscured by this overlay. 또한 UX가 겹치지 않도록 하려면 뷰포트의 가장자리에 스크롤 막대를 위한 16px 안쪽 여백을 남겨 둡니다.Additionally if you would prefer not to have UX overlap, leave 16px of padding on the edge of the viewport to allow for the scrollbar.

Examples

XAML Controls GalleryXAML Controls Gallery
XAML controls gallery

XAML 컨트롤 갤러리 앱이 설치된 경우 여기를 클릭하여 앱을 열고 ScrollViewer의 기능을 확인합니다.If you have the XAML Controls Gallery app installed, click here to open the app and see the ScrollViewer in action.

스크롤 뷰어 만들기Create a scroll viewer

페이지에 세로 스크롤을 추가하려면 스크롤 뷰어에 페이지 콘텐츠를 래핑하세요.To add vertical scrolling to your page, wrap the page content in a scroll viewer.

<Page
    x:Class="App1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1">

    <ScrollViewer>
        <StackPanel>
            <TextBlock Text="My Page Title" Style="{StaticResource TitleTextBlockStyle}"/>
            <!-- more page content -->
        </StackPanel>
    </ScrollViewer>
</Page>

이 XAML은 수평 스크롤을 사용하도록 설정하고, 스크롤 뷰어에 이미지를 배치하며, 확대/축소를 사용하도록 설정하는 방법을 보여 줍니다.This XAML shows how to enable horizontal scrolling, place an image in a scroll viewer and enable zooming.

<ScrollViewer ZoomMode="Enabled" MaxZoomFactor="10"
              HorizontalScrollMode="Enabled" HorizontalScrollBarVisibility="Visible"
              Height="200" Width="200">
    <Image Source="Assets/Logo.png" Height="400" Width="400"/>
</ScrollViewer>

컨트롤 템플릿의 ScrollViewerScrollViewer in a control template

ScrollViewer 컨트롤은 다른 컨트롤의 복합 파트로 사용되는 것이 일반적입니다.It's typical for a ScrollViewer control to exist as a composite part of other controls. ScrollViewer 파트는 호스트 컨트롤의 레이아웃 공간이 확장된 콘텐츠 크기보다 더 작게 제한되는 경우에만 지원용 ScrollContentPresenter 클래스와 더불어 스크롤 막대와 함께 뷰포트를 표시합니다.A ScrollViewer part, along with the ScrollContentPresenter class for support, will display a viewport along with scrollbars only when the host control's layout space is being constrained smaller than the expanded content size. 종종 목록에도 이러한 경우가 발생하므로 ListViewGridView 템플릿에는 항상 ScrollViewer가 포함됩니다.This is often the case for lists, so ListView and GridView templates always include a ScrollViewer. TextBoxRichEditBox의 템플릿에도 ScrollViewer가 포함됩니다.TextBox and RichEditBox also include a ScrollViewer in their templates.

ScrollViewer 파트가 컨트롤에 있는 경우 대체로 호스트 컨트롤에 콘텐츠를 스크롤할 수 있게 하는 특정 입력 이벤트 및 조작에 대한 기본 제공 이벤트 처리가 있습니다.When a ScrollViewer part exists in a control, the host control often has built-in event handling for certain input events and manipulations that enable the content to scroll. 예를 들어 GridView가 살짝 밀기 제스처를 해석하고 이로 인해 콘텐츠가 가로로 스크롤됩니다.For example, a GridView interprets a swipe gesture and this causes the content to scroll horizontally. 호스트 컨트롤이 수신하는 입력 이벤트와 원시 조작은 컨트롤에 의해 처리된 것으로 간주되며 PointerPressed와 같은 하위 수준 이벤트가 발생하지 않고 부모 컨테이너로 버블링되지도 않습니다.The input events and raw manipulations that the host control receives are considered handled by the control, and lower-level events such as PointerPressed won't be raised and won't bubble to any parent containers either. 컨트롤 클래스 및 이벤트에 대한 OnEvent 가상 메서드를 재정의하거나 컨트롤을 다시 템플릿으로 작성하여 기본 제공 컨트롤 처리의 일부를 변경할 수 있습니다.You can change some of the built-in control handling by overriding a control class and the OnEvent virtual methods for events, or by retemplating the control. 하지만 두 경우 모두 일반적으로 컨트롤이 이벤트와 사용자의 입력 동작 및 제스처에 예상된 방식으로 반응하도록 하는 원래 기본 동작을 재현하는 것은 쉽지 않습니다.But in either case it's not trivial to reproduce the original default behavior, which is typically there so that the control reacts in expected ways to events and to a user's input actions and gestures. 따라서 해당 입력 이벤트를 반드시 발생해야 하는지 여부를 고려해야 합니다.So you should consider whether you really need that input event to fire. 컨트롤에 의해 처리되지 않는 다른 입력 이벤트 또는 제스처가 있는지 조사하고 앱 또는 컨트롤 조작 디자인에 사용하는 것이 좋습니다.You might want to investigate whether there are other input events or gestures that are not being handled by the control, and use those in your app or control interaction design.

ScrollViewer를 포함하는 컨트롤이 ScrollViewer 파트 내에 있는 일부 동작과 속성에 영향을 줄 수 있도록 ScrollViewer는 스타일에서 설정하고 템플릿 바인딩에 사용할 수 있는 많은 XAML 연결 속성을 정의합니다.To make it possible for controls that include a ScrollViewer to influence some of the behavior and properties that are from within the ScrollViewer part, ScrollViewer defines a number of XAML attached properties that can be set in styles and used in template bindings. 연결된 속성에 대한 자세한 내용은 연결된 속성 개요를 참조하세요.For more info about attached properties, see Attached properties overview.

ScrollViewer XAML 연결 속성ScrollViewer XAML attached properties

ScrollViewer는 다음과 같은 XAML 연결 속성을 정의합니다.ScrollViewer defines the following XAML attached properties:

이러한 XAML 연결 속성은 ScrollViewer가 암시적이며(예: ScrollViewer가 ListView 또는 GridView의 기본 템플릿에 있는 경우) 템플릿 파트에 액세스하지 않고 컨트롤의 스크롤 동작에 영향을 주려는 경우에 사용됩니다.These XAML attached properties are intended for cases where the ScrollViewer is implicit, such as when the ScrollViewer exists in the default template for a ListView or GridView, and you want to be able to influence the scrolling behavior of the control without accessing template parts.

예를 들어 ListView의 기본 제공 스크롤 뷰어에 세로 스크롤 막대가 항상 표시되도록 하는 방법은 다음과 같습니다.For example, here's how to make the vertical scrollbars always visible for a ListView's built in scroll viewer.

<ListView ScrollViewer.VerticalScrollBarVisibility="Visible"/>

예제 코드와 같이 ScrollViewer가 XAML에서 명시적인 경우에는 연결된 속성 구문을 사용할 필요가 없습니다.For cases where a ScrollViewer is explicit in your XAML, as is shown in the example code, you don't need to use attached property syntax. 특성 구문을 사용하면 됩니다(예: <ScrollViewer VerticalScrollBarVisibility="Visible"/>).Just use attribute syntax, for example <ScrollViewer VerticalScrollBarVisibility="Visible"/>.

권장 사항 및 금지 사항Do's and don'ts

  • 가능하면 가로가 아닌 세로 스크롤로 디자인합니다.Whenever possible, design for vertical scrolling rather than horizontal.
  • 하나의 뷰포트 경계(세로 또는 가로)를 넘어가는 콘텐츠 영역에는 단일 축 이동을 사용합니다.Use one-axis panning for content regions that extend beyond one viewport boundary (vertical or horizontal). 두 뷰포트 경계(세로 또는 가로)를 모두 넘어가는 콘텐츠 영역에는 2축 이동을 사용합니다.Use two-axis panning for content regions that extend beyond both viewport boundaries (vertical and horizontal).
  • 목록 보기, 그리드 보기, 콤보 상자, 목록 상자, 텍스트 입력 상자 및 허브 컨트롤에서 기본 제공 스크롤 기능을 사용합니다.Use the built-in scroll functionality in the list view, grid view, combo box, list box, text input box, and hub controls. 이러한 컨트롤을 사용하면 항목이 너무 많아 한 번에 모두 표시할 수 없는 경우 사용자가 항목 목록을 가로질러 가로로 또는 세로로 스크롤할 수 있습니다.With those controls, if there are too many items to show all at once, the user is able to scroll either horizontally or vertically over the list of items.
  • 사용자가 화면에 맞게 크기 조정된 이미지가 아니라 전체 크기 이미지를 가로질러 이동 및 확대/축소할 수 있게 하려는 경우와 같이 사용자가 더 큰 영역에서 양방향으로 이동하고 확대/축소할 수도 있게 하려면 스크롤 뷰어 내부에 이미지를 배치합니다.If you want the user to pan in both directions around a larger area, and possibly to zoom, too, for example, if you want to allow the user to pan and zoom over a full-sized image (rather than an image sized to fit the screen) then place the image inside a scroll viewer.
  • 사용자가 긴 텍스트 줄을 스크롤할 경우 세로로만 스크롤하도록 스크롤 뷰어를 구성합니다.If the user will scroll through a long passage of text, configure the scroll viewer to scroll vertically only.
  • 스크롤 뷰어를 사용하여 개체를 하나만 포함합니다.Use a scroll viewer to contain one object only. 하나의 개체는 레이아웃 패널이 될 수 있고, 여기에는 고유한 개체가 제한 없이 포함됩니다.Note that the one object can be a layout panel, in turn containing any number of objects of its own.
  • 피벗의 스크롤 논리와 충돌하는 것을 방지하려면 스크롤 뷰어 내부에 Pivot 컨트롤을 배치하지 않습니다.Don't place a Pivot control inside a scroll viewer to avoid conflicts with pivot's scrolling logic.

샘플 코드 가져오기Get the sample code

개발자용(XAML)For developers (XAML)