Bagikan melalui

ScrollViewer

Kontrol ScrollViewer membuat wilayah yang dapat digulir di mana konten dapat digulir secara horizontal atau vertikal. Konten dalam antarmuka pengguna sering lebih besar dari area tampilan layar komputer, dan ScrollViewer menyediakan cara mudah untuk mengaktifkan pengguliran konten di aplikasi Windows Presentation Foundation (WPF).

Cuplikan layar kontainer penampil gulir, menunjukkan bilah gulir di WPF.

Kontrol ScrollViewer merangkum elemen horizontal dan vertikal ScrollBar serta sebuah kontainer konten (seperti elemen Panel) untuk menampilkan elemen lain yang terlihat di area yang dapat digulir. Anda dapat menggunakan elemen ScrollViewer sendiri tanpa elemen lainnya karena ini adalah kontrol komposit yang merangkum fungsi ScrollBar.

Kontrol pada ScrollViewer merespons perintah dari mouse dan keyboard, serta menetapkan berbagai metode untuk menggulir konten menurut jarak yang telah ditentukan sebelumnya. Anda dapat menggunakan ScrollChanged peristiwa untuk mendeteksi perubahan dalam status ScrollViewer .

Sebuah ScrollViewer hanya dapat memiliki satu anak, biasanya elemen Panel yang dapat menampung kumpulan elemen Children. Properti Content mendefinisikan satu-satunya anak dari ScrollViewer.

Pengguliran fisik vs. logis

Pengguliran fisik digunakan untuk menggulir konten dengan kenaikan fisik yang sudah ditentukan, biasanya dengan nilai yang dinyatakan dalam piksel. Pengguliran logis digunakan untuk menggulir ke item berikutnya di pohon logis. Pengguliran fisik adalah perilaku gulir default untuk sebagian besar Panel elemen. WPF mendukung kedua jenis pengguliran.

Antarmuka IScrollInfo

Antarmuka IScrollInfo mewakili area gulir utama dalam elemen kontrol ScrollViewer atau turunan. Antarmuka menetapkan properti dan metode pengguliran yang dapat diimplementasikan oleh elemen Panel yang memerlukan pengguliran berdasarkan unit logis, bukan berdasarkan peningkatan fisik. Mentransmisikan IScrollInfo instans ke turunan Panel dan kemudian menggunakan metode gulirnya memberikan cara yang berguna untuk menggulir ke unit logis berikutnya dalam koleksi anak, bukan dengan kenaikan piksel. Secara bawaan, elemen kontrol ScrollViewer mendukung pengguliran menurut unit fisik.

StackPanel dan VirtualizingStackPanel keduanya mengimplementasikan IScrollInfo dan secara asli mendukung pengguliran logis. Untuk kontrol tata letak yang secara asli mendukung pengguliran logis, Anda masih dapat mencapai pengguliran fisik dengan membungkus elemen host Panel dalam ScrollViewer dan mengatur properti CanContentScroll ke false.

Contoh kode berikut menunjukkan cara mentransmisikan instans IScrollInfo ke StackPanel dan menggunakan metode pengguliran konten (LineUp dan LineDown) yang ditentukan oleh antarmuka.

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

Example

Contoh berikut membuat ScrollViewer di jendela yang berisi beberapa teks dan persegi panjang. ScrollBar elemen hanya muncul ketika diperlukan. Saat Anda mengubah ukuran jendela, elemen ScrollBar akan muncul dan menghilang, dikarenakan nilai properti ComputedHorizontalScrollBarVisibility dan ComputedVerticalScrollBarVisibility yang telah diperbarui.


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

Topik panduan

Judul Description
Menangani Peristiwa ScrollChanged Pelajari cara menangani peristiwa ScrollChanged dalam kontrol ScrollViewer.
Gulir Konten dengan Menggunakan Antarmuka IScrollInfo Pelajari cara menggulir konten dengan menggunakan antarmuka IScrollInfo.
Menggunakan Metode Pengguliran Konten Dari ScrollViewer Pelajari cara menggunakan metode pengguliran konten ScrollViewer.

Gaya dan templat

Bagian ini menjelaskan gaya dan templat untuk ScrollViewer kontrol. Anda dapat memodifikasi default ControlTemplate untuk memberi kontrol tampilan yang unik. Untuk informasi selengkapnya, lihat Apa itu gaya dan templat? dan Cara membuat templat untuk kontrol.

Properti konten

Properti Content mendefinisikan satu-satunya anak dari ScrollViewer.

Bagian

Tabel berikut mencantumkan bagian-bagian yang diberi nama dari kontrol ScrollViewer.

Bagian Tipe Description
PART_HorizontalScrollBar ScrollBar ScrollBar digunakan untuk menggulir konten secara horizontal.
PART_ScrollContentPresenter ScrollContentPresenter Tempat penampung untuk konten di ScrollViewer.
PART_VerticalScrollBar ScrollBar yang ScrollBar digunakan untuk menggulir konten secara vertikal.

Keadaan visual

Tabel berikut mencantumkan status visual untuk ScrollViewer kontrol.

Nama VisualState Nama VisualStateGroup Description
FokusTidakValid Status Validasi Properti Validation.HasError terlampir adalah true dan kontrol memiliki fokus.
Tidak valid dan Tidak Difokuskan Status Validasi Properti Validation.HasError terlampir adalah true dan kontrol tidak memiliki fokus.
Sah Status Validasi Kontrol menggunakan Validation kelas dan properti terlampir Validation.HasError adalah false.

Pengaturan halaman dokumen

Untuk konten dokumen, alternatif untuk menggulir adalah memilih kontainer dokumen yang mendukung penomoran halaman. FlowDocument adalah untuk dokumen yang dirancang untuk dihosting dalam kontrol penampil, seperti FlowDocumentPageViewer, yang mendukung membagi konten menjadi beberapa halaman, menghindari keperluan menggulir. DocumentViewer menyediakan solusi untuk melihat konten FixedDocument, yang menggunakan pengguliran tradisional untuk menampilkan konten di luar bagian area tampilan.

Untuk informasi tambahan tentang format dokumen dan opsi presentasi, lihat Dokumen di WPF.

Lihat juga

  • Last updated on