다음을 통해 공유

ScrollViewer 개요

  • 아티클

사용자 인터페이스 내의 콘텐츠는 대개 컴퓨터 화면의 표시 영역보다 더 큽니다. ScrollViewer 컨트롤은 WPF(Windows Presentation Foundation) 애플리케이션에서 콘텐츠를 스크롤할 수 있도록 하는 편리한 방법을 제공합니다. 이 항목에서는 ScrollViewer 요소를 소개하고 몇 가지 사용 예제를 제공합니다.

ScrollViewer 컨트롤

WPF 애플리케이션에서 스크롤을 가능하게 하는 두 개의 미리 정의된 요소인 ScrollBar 및 ScrollViewer가 있습니다. 스크롤 가능한 영역에 다른 시각적 요소를 표시하기 위해 ScrollViewer 컨트롤은 가로 및 세로 ScrollBar 요소와 콘텐츠 컨테이너(예: Panel 요소)를 캡슐화합니다. 콘텐츠 스크롤에 ScrollBar 요소를 사용하려면 사용자 지정 개체를 빌드해야 합니다. 하지만 ScrollViewer 요소는 ScrollBar 기능을 캡슐화하는 복합 컨트롤이기 때문에 이 요소만 사용할 수 있습니다.

ScrollViewer 컨트롤은 마우스 및 키보드 명령 모두에 응답하고 미리 결정된 증분만큼 콘텐츠를 스크롤하는 데 사용되는 다양한 메서드를 정의합니다. ScrollChanged 이벤트를 사용하여 ScrollViewer 상태의 변경을 감지할 수 있습니다.

ScrollViewer는 자식 요소를 하나만 가질 수 있으며, 일반적으로 Children 요소 컬렉션을 호스트할 수 있는 Panel 요소입니다. Content 속성은 ScrollViewer의 유일한 자식 요소를 정의합니다.

물리적 스크롤과 논리적 스크롤 비교

실제 스크롤은 미리 결정된 실제 증분만큼(일반적으로 픽셀 단위로 선언된 값만큼) 콘텐츠를 스크롤하는 데 사용됩니다. 논리적 스크롤은 논리 트리에서 다음 항목으로 스크롤하는 데 사용됩니다. 물리적 스크롤은 대부분의 Panel 요소에 대한 기본 스크롤 동작입니다. WPF는 두 가지 스크롤 형식을 모두 지원합니다.

IScrollInfo 인터페이스

IScrollInfo 인터페이스는 ScrollViewer 또는 파생된 컨트롤 내의 기본 스크롤 영역을 나타냅니다. 이 인터페이스는 실제 증분이 아닌 논리적 단위만큼 스크롤해야 하는 Panel 요소를 통해 구현될 수 있는 스크롤 속성 및 메서드를 정의합니다. IScrollInfo의 인스턴스를 파생된 Panel로 캐스트하고 스크롤 메서드를 사용하는 것은 픽셀 증분만큼이 아닌 자식 컬렉션의 다음 논리적 단위로 스크롤하는 유용한 방법입니다. 기본적으로 ScrollViewer 컨트롤은 물리적 단위만큼 스크롤하는 작업을 지원합니다.

StackPanel 및 VirtualizingStackPanel은 모두 IScrollInfo를 구현하고 기본적으로 논리적 스크롤을 지원합니다. 기본적으로 논리적 스크롤을 지원하는 레이아웃 컨트롤의 경우 호스트 Panel 요소를 ScrollViewer로 래핑하고 CanContentScroll 속성을 false로 설정하여 물리적 스크롤을 구현할 수 있습니다.

다음 코드 예제에서는 IScrollInfo 인스턴스를 StackPanel로 캐스트하고 인터페이스에서 정의된 콘텐츠 스크롤 메서드(LineUp 및 LineDown)를 사용하는 방법을 보여줍니다.

private void spLineUp(object sender, RoutedEventArgs e)
{
    ((IScrollInfo)sp1).LineUp();
}
private void spLineDown(object sender, RoutedEventArgs e)
{
    ((IScrollInfo)sp1).LineDown();
}

Private Sub spLineUp(ByVal sender As Object, ByVal args As RoutedEventArgs)

    CType(sp1, IScrollInfo).LineUp()
End Sub
Private Sub spLineDown(ByVal sender As Object, ByVal args As RoutedEventArgs)

    CType(sp1, IScrollInfo).LineDown()
End Sub

ScrollViewer 요소 정의 및 사용

다음 예제에서는 텍스트와 사각형이 포함된 창에 ScrollViewer를 만듭니다. ScrollBar 요소는 필요할 때만 나타납니다. 창 크기를 조정하면 ComputedHorizontalScrollBarVisibility 및 ComputedVerticalScrollBarVisibility 속성의 업데이트된 값 때문에 ScrollBar 요소가 나타났다가 사라집니다.


// Create the application's main window
mainWindow = gcnew System::Windows::Window();
mainWindow->Title = "ScrollViewer Sample";

// Define a ScrollViewer
myScrollViewer = gcnew ScrollViewer();
myScrollViewer->HorizontalScrollBarVisibility = ScrollBarVisibility::Auto;

// Add Layout control
myStackPanel = gcnew StackPanel();
myStackPanel->HorizontalAlignment = HorizontalAlignment::Left;
myStackPanel->VerticalAlignment = VerticalAlignment::Top;

TextBlock^ myTextBlock = gcnew TextBlock();
myTextBlock->TextWrapping = TextWrapping::Wrap;
myTextBlock->Margin = System::Windows::Thickness(0, 0, 0, 20);
myTextBlock->Text = "Scrolling is enabled when it is necessary. Resize the Window, making it larger and smaller.";

Rectangle^ myRectangle = gcnew Rectangle();
myRectangle->Fill = Brushes::Red;
myRectangle->Width = 500;
myRectangle->Height = 500;

// Add child elements to the parent StackPanel
myStackPanel->Children->Add(myTextBlock);
myStackPanel->Children->Add(myRectangle);

// Add the StackPanel as the lone child of the ScrollViewer
myScrollViewer->Content = myStackPanel;

// Add the ScrollViewer as the Content of the parent Window object
mainWindow->Content = myScrollViewer;
mainWindow->Show();



// Create the application's main window
mainWindow = new Window ();
mainWindow.Title = "ScrollViewer Sample";

// Define a ScrollViewer
myScrollViewer = new ScrollViewer();
myScrollViewer.HorizontalScrollBarVisibility = ScrollBarVisibility.Auto;

// Add Layout control
myStackPanel = new StackPanel();
myStackPanel.HorizontalAlignment = HorizontalAlignment.Left;
myStackPanel.VerticalAlignment = VerticalAlignment.Top;

TextBlock myTextBlock = new TextBlock();
myTextBlock.TextWrapping = TextWrapping.Wrap;
myTextBlock.Margin = new Thickness(0, 0, 0, 20);
myTextBlock.Text = "Scrolling is enabled when it is necessary. Resize the Window, making it larger and smaller.";

Rectangle myRectangle = new Rectangle();
myRectangle.Fill = Brushes.Red;
myRectangle.Width = 500;
myRectangle.Height = 500;

// Add child elements to the parent StackPanel
myStackPanel.Children.Add(myTextBlock);
myStackPanel.Children.Add(myRectangle);

// Add the StackPanel as the lone child of the ScrollViewer
myScrollViewer.Content = myStackPanel;

// Add the ScrollViewer as the Content of the parent Window object
mainWindow.Content = myScrollViewer;
mainWindow.Show ();



'Define a ScrollViewer.
Dim myScrollViewer As New ScrollViewer
myScrollViewer.HorizontalScrollBarVisibility = ScrollBarVisibility.Auto

'Add Layout control.
Dim myStackPanel As New StackPanel
myStackPanel.HorizontalAlignment = System.Windows.HorizontalAlignment.Left
myStackPanel.VerticalAlignment = System.Windows.VerticalAlignment.Top

Dim myTextBlock As New TextBlock
myTextBlock.TextWrapping = TextWrapping.Wrap
myTextBlock.Margin = New Thickness(0, 0, 0, 20)
myTextBlock.Text = "Scrolling is enabled when it is necessary. Resize the Window, making it larger and smaller."

Dim myRectangle As New Rectangle
myRectangle.Fill = Brushes.Red
myRectangle.Width = 500
myRectangle.Height = 500

'Add child elements to the parent StackPanel.
myStackPanel.Children.Add(myTextBlock)
myStackPanel.Children.Add(myRectangle)

'Add the StackPanel as the lone child of the ScrollViewer
myScrollViewer.Content = myStackPanel

'Add the ScrollViewer as the Content of the parent Window object
Me.Content = myScrollViewer

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      WindowTitle="ScrollViewer Sample">
  <ScrollViewer HorizontalScrollBarVisibility="Auto">
    <StackPanel VerticalAlignment="Top" HorizontalAlignment="Left">
      <TextBlock TextWrapping="Wrap" Margin="0,0,0,20">Scrolling is enabled when it is necessary. 
      Resize the window, making it larger and smaller.</TextBlock>
      <Rectangle Fill="Red" Width="500" Height="500"></Rectangle>
    </StackPanel>
  </ScrollViewer>
</Page>

ScrollViewer 스타일 지정

Windows Presentation Foundation의 모든 컨트롤처럼 컨트롤의 기본 렌더링 동작을 변경하기 위해 ScrollViewer의 스타일을 지정할 수 있습니다. 컨트롤 스타일 지정에 대한 자세한 내용은 스타일 지정 및 템플릿을 참조하세요.

문서 페이지 매김

문서 콘텐츠의 경우 스크롤 대신 페이지 매김을 지원하는 문서 컨테이너를 선택할 수 있습니다. FlowDocument는 스크롤할 필요가 없도록 여러 페이지에 걸쳐 콘텐츠 페이지 매김을 지원하는 FlowDocumentPageViewer와 같은 보기 컨트롤 내에 호스트되도록 디자인된 문서에 사용됩니다. DocumentViewer는 기존 스크롤을 사용하여 표시 영역 외부에 콘텐츠를 표시하는 FixedDocument 콘텐츠를 보기 위한 솔루션을 제공합니다.

문서 서식 및 프레젠테이션 옵션에 대한 자세한 내용은 WPF의 문서를 참조하세요.

참고 항목