Compartir a través de

Información general sobre ScrollViewer

  • Artículo

El contenido en una interfaz de usuario suele ser mayor que el área de presentación de la pantalla del equipo. El control ScrollViewer proporciona una manera cómoda de permitir el desplazamiento del contenido de las aplicaciones Windows Presentation Foundation (WPF). Este tema introduce el elemento ScrollViewer y proporciona varios ejemplos de utilización.

Control ScrollViewer

Hay dos elementos predefinidos que permiten el desplazamiento en aplicaciones WPF: ScrollBar y ScrollViewer. El control ScrollViewer encapsula elementos ScrollBar horizontales y verticales y un contenedor de contenido (como un elemento Panel) para mostrar otros elementos visibles en un área desplazable. Puede compilar un objeto personalizado para usar el elemento ScrollBar para desplazar contenido. Pero, puede usar el elemento ScrollViewer por sí solo porque es un control compuesto que encapsula la funcionalidad ScrollBar.

El control ScrollViewer responde a los comandos del mouse y del teclado, y define varios métodos con los que se va a desplazar el contenido mediante incrementos predeterminados. Puede usar el evento ScrollChanged para detectar un cambio en un estado ScrollViewer.

Un ScrollViewer solo puede tener un elemento secundario, normalmente un elemento Panel que puede hospedar una colección Children de elementos. La propiedad Content define el único elemento secundario de ScrollViewer.

Desplazamiento físico frente a lógico

El desplazamiento físico se utiliza para desplazar el contenido mediante incrementos físicos predeterminados, normalmente por un valor que se declara en píxeles. El desplazamiento lógico se utiliza para desplazarse al elemento siguiente del árbol lógico. El desplazamiento físico es el comportamiento de desplazamiento predeterminado para la mayoría de elementos Panel. WPF admite ambos tipos de desplazamiento.

Interfaz IScrollInfo

La interfaz IScrollInfo representa la región de desplazamiento principal dentro de ScrollViewer o un control derivado. La interfaz define el desplazamiento de propiedades y métodos que se pueden implementar mediante elementos Panel que requieren el desplazamiento por unidad lógica, en lugar de por un incremento físico. Convertir una instancia de IScrollInfo en un elemento Panel derivado y, después, usar sus métodos de desplazamiento proporciona una manera útil para desplazarse a la siguiente unidad lógica de una colección secundaria, en lugar de hacerlo por incrementos en píxeles. De forma predeterminada, el control ScrollViewer admite el desplazamiento por unidades físicas.

StackPanel y VirtualizingStackPanel implementan IScrollInfo y admiten el desplazamiento lógico de forma nativa. Para controles de diseño que admiten el desplazamiento lógico de forma nativa, puede conseguir el desplazamiento físico al encapsular el elemento anfitrión Panel en ScrollViewer y establecer la propiedad CanContentScroll en false.

En el ejemplo siguiente se demuestra cómo convertir una instancia de IScrollInfo en StackPanel y usar métodos de desplazamiento de contenido (LineUp y LineDown) definidos por la interfaz.

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

Definir y utilizar un elemento ScrollViewer

En el ejemplo siguiente se crea un elemento ScrollViewer en una ventana que contiene texto y un rectángulo. Los elementos ScrollBar aparecen solo cuando son necesarios. Cuando cambia el tamaño de la ventana, los elementos ScrollBar aparecen y desaparecen, debido a los valores actualizados de las propiedades ComputedHorizontalScrollBarVisibility y ComputedVerticalScrollBarVisibility.


// 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>

Aplicar estilos a ScrollViewer

Al igual que todos los controles de Windows Presentation Foundation, se pueden aplicar estilos a la propiedad ScrollViewer para cambiar el comportamiento de representación predeterminado del control. Para obtener información adicional sobre los estilos de control, consulte Aplicar estilos y plantillas.

Paginar documentos

Para el contenido del documento, una alternativa al desplazamiento es elegir un contenedor de documentos que admita la paginación. La clase FlowDocument se usa para los documentos que están diseñados para ser hospedados en un control de visualización, como FlowDocumentPageViewer, que permite paginar el contenido en varias páginas, evitando la necesidad de desplazarse. DocumentViewer proporciona una solución para la visualización del contenido FixedDocument, que usa el desplazamiento tradicional para mostrar contenido fuera del territorio del área de visualización.

Para más información sobre los formatos de documentos y opciones de presentación, consulte Documents in WPF (Documentos en WPF).

Vea también