Bagikan melalui


Gambaran Umum Penyajian Grafis WPF

Topik ini memberikan gambaran umum tentang lapisan visual WPF. Ini berfokus pada peran kelas Visual untuk mendukung proses rendering dalam model WPF.

Peran Objek di Dalam Visual

Kelas Visual adalah abstraksi dasar dari mana setiap objek FrameworkElement berasal. Ini juga berfungsi sebagai titik masuk untuk menulis kontrol baru di WPF, dan dalam banyak hal dapat dianggap sebagai handle jendela (HWND) dalam model aplikasi Win32.

Objek Visual adalah objek WPF inti, yang peran utamanya adalah memberikan dukungan penyajian. Kontrol antarmuka pengguna, seperti Button dan TextBox, berasal dari kelas Visual, dan menggunakannya untuk mempertahankan data penyajian mereka. Objek Visual menyediakan dukungan untuk:

  • Tampilan output: Merender konten gambar visual yang dipertahankan dan diserialisasikan.

  • Transformasi: Melakukan transformasi pada visual.

  • Kliping: Menyediakan dukungan wilayah kliping untuk visual.

  • Pengujian hit: Menentukan apakah koordinat atau geometri terkandung dalam batas visual.

  • Perhitungan bingkai pembatas: Menentukan persegi panjang pembatas visual.

Namun, objek Visual tidak menyertakan dukungan untuk fitur non-penyajian, seperti:

  • Penanganan peristiwa

  • Tata letak

  • Gaya

  • Pengikatan data

  • Globalisasi

Visual diekspos sebagai kelas abstrak publik yang harus diturunkan oleh kelas anak. Ilustrasi berikut menunjukkan hierarki objek visual yang diekspos dalam WPF.

Diagram kelas yang berasal dari objek Visual

Kelas DrawingVisual

DrawingVisual adalah kelas gambar ringan yang digunakan untuk merender bentuk, gambar, atau teks. Kelas ini dianggap ringan karena tidak menyediakan tata letak atau penanganan peristiwa, yang meningkatkan performa runtimenya. Untuk alasan ini, gambar sangat ideal untuk latar belakang dan clip art. DrawingVisual dapat digunakan untuk membuat objek visual kustom. Untuk informasi selengkapnya, lihat Menggunakan Objek DrawingVisual.

Kelas Viewport3DVisual

Viewport3DVisual menyediakan jembatan antara objek 2D Visual dan Visual3D. Kelas Visual3D adalah kelas dasar untuk semua elemen visual 3D. Viewport3DVisual mengharuskan Anda menentukan nilai Camera dan nilai Viewport. Kamera memungkinkan Anda untuk melihat adegan. Viewport menetapkan posisi proyeksi dipetakan pada permukaan 2D. Untuk informasi selengkapnya tentang 3D di WPF, lihat Gambaran Umum Grafis 3D .

Kelas ContainerVisual

Kelas ContainerVisual digunakan sebagai kontainer untuk kumpulan objek Visual. Kelas DrawingVisual berasal dari kelas ContainerVisual, memungkinkannya berisi kumpulan objek visual.

Menggambar Konten di Objek Visual

Objek Visual menyimpan data rendernya sebagai daftar instruksi grafik vektor . Setiap item dalam daftar instruksi mewakili sekumpulan data grafis tingkat rendah dan sumber daya terkait dalam format serial. Ada empat jenis data render berbeda yang dapat berisi konten gambar.

Menggambar tipe isi Deskripsi
Grafik vektor Mewakili data grafik vektor, dan informasi Brush dan Pen terkait.
Gambar Mewakili gambar dalam wilayah yang ditentukan oleh Rect.
Simbol Mewakili gambar yang merender GlyphRun, yang merupakan urutan glyph dari sumber daya font tertentu. Ini adalah bagaimana teks diwakili.
Rekaman video Mewakili gambar yang merender video.

DrawingContext memungkinkan Anda mengisi Visual dengan konten visual. Saat Anda menggunakan perintah gambar objek DrawingContext, Anda benar-benar menyimpan sekumpulan data render yang nantinya akan digunakan oleh sistem grafis; Anda tidak menggambar ke layar secara real time.

Saat Anda membuat kontrol WPF, seperti Button, kontrol secara implisit menghasilkan data render untuk menggambar itu sendiri. Misalnya, mengatur properti Content dari Button menyebabkan kontrol menyimpan representasi penyajian glyph.

Visual menjelaskan kontennya sebagai satu atau beberapa objek Drawing yang terkandung dalam DrawingGroup. DrawingGroup juga menjelaskan masker opasitas, transformasi, efek bitmap, dan operasi lain yang diterapkan pada kontennya. operasi DrawingGroup diterapkan dalam urutan berikut saat konten dirender: OpacityMask, Opacity, BitmapEffect, ClipGeometry, GuidelineSet, lalu Transform.

Ilustrasi berikut menunjukkan urutan di mana operasi DrawingGroup diterapkan selama urutan penyajian.

urutan operasi DrawingGroup
Urutan operasi dari DrawingGroup

Untuk informasi selengkapnya, lihat Gambaran Umum Objek Gambar .

Menggambar Konten di Lapisan Visual

Anda tidak pernah langsung membuat instans DrawingContext; namun demikian, Anda dapat memperoleh konteks gambar dari metode-metode tertentu, seperti DrawingGroup.Open dan DrawingVisual.RenderOpen. Contoh berikut mengambil DrawingContext dari DrawingVisual dan menggunakannya untuk menggambar persegi panjang.

// Create a DrawingVisual that contains a rectangle.
private DrawingVisual CreateDrawingVisualRectangle()
{
    DrawingVisual drawingVisual = new DrawingVisual();

    // Retrieve the DrawingContext in order to create new drawing content.
    DrawingContext drawingContext = drawingVisual.RenderOpen();

    // Create a rectangle and draw it in the DrawingContext.
    Rect rect = new Rect(new System.Windows.Point(160, 100), new System.Windows.Size(320, 80));
    drawingContext.DrawRectangle(System.Windows.Media.Brushes.LightBlue, (System.Windows.Media.Pen)null, rect);

    // Persist the drawing content.
    drawingContext.Close();

    return drawingVisual;
}
' Create a DrawingVisual that contains a rectangle.
Private Function CreateDrawingVisualRectangle() As DrawingVisual
    Dim drawingVisual As New DrawingVisual()

    ' Retrieve the DrawingContext in order to create new drawing content.
    Dim drawingContext As DrawingContext = drawingVisual.RenderOpen()

    ' Create a rectangle and draw it in the DrawingContext.
    Dim rect As New Rect(New Point(160, 100), New Size(320, 80))
    drawingContext.DrawRectangle(Brushes.LightBlue, CType(Nothing, Pen), rect)

    ' Persist the drawing content.
    drawingContext.Close()

    Return drawingVisual
End Function

Menghitung Konten Gambar di Lapisan Visual

Selain kegunaannya yang lain, objek Drawing juga menyediakan model objek untuk menghitung konten Visual.

Nota

Saat Anda menguraikan isi dari visual, Anda mengambil objek-objek Drawing, bukanlah representasi mendasar dari data render sebagai daftar instruksi grafik vektor.

Contoh berikut menggunakan metode GetDrawing untuk mengambil nilai DrawingGroupVisual dan menghitungnya.

public void RetrieveDrawing(Visual v)
{
    DrawingGroup drawingGroup = VisualTreeHelper.GetDrawing(v);
    EnumDrawingGroup(drawingGroup);
}

// Enumerate the drawings in the DrawingGroup.
public void EnumDrawingGroup(DrawingGroup drawingGroup)
{
    DrawingCollection dc = drawingGroup.Children;

    // Enumerate the drawings in the DrawingCollection.
    foreach (Drawing drawing in dc)
    {
        // If the drawing is a DrawingGroup, call the function recursively.
        if (drawing is DrawingGroup group)
        {
            EnumDrawingGroup(group);
        }
        else if (drawing is GeometryDrawing)
        {
            // Perform action based on drawing type.
        }
        else if (drawing is ImageDrawing)
        {
            // Perform action based on drawing type.
        }
        else if (drawing is GlyphRunDrawing)
        {
            // Perform action based on drawing type.
        }
        else if (drawing is VideoDrawing)
        {
            // Perform action based on drawing type.
        }
    }
}

Cara Objek Visual Digunakan untuk Membangun Kontrol

Banyak objek dalam WPF terdiri dari objek visual lainnya, yang berarti objek tersebut dapat berisi berbagai hierarki objek turunan. Banyak elemen antarmuka pengguna di WPF, seperti kontrol, terdiri dari beberapa objek visual, mewakili berbagai jenis elemen penyajian. Misalnya, kontrol Button dapat berisi sejumlah objek lain, termasuk ClassicBorderDecorator, ContentPresenter, dan TextBlock.

Kode berikut menunjukkan kontrol Button yang ditentukan dalam markup.

<Button Click="OnClick">OK</Button>

Jika Anda menghitung objek visual yang terdiri dari kontrol Button default, Anda akan menemukan hierarki objek visual yang diilustrasikan di bawah ini:

Diagram hierarki pohon visual

Kontrol Button berisi elemen ClassicBorderDecorator, yang pada gilirannya, berisi elemen ContentPresenter. Elemen ClassicBorderDecorator bertanggung jawab untuk menggambar batas dan latar belakang untuk Button. Elemen ContentPresenter bertanggung jawab untuk menampilkan konten Button. Dalam hal ini, karena Anda menampilkan teks, elemen ContentPresenter berisi elemen TextBlock. Fakta bahwa kontrol Button menggunakan ContentPresenter berarti bahwa konten dapat diwakili oleh elemen lain, seperti Image atau geometri, seperti EllipseGeometry.

Templat Kontrol

Kunci untuk perluasan kontrol ke dalam hierarki kontrol adalah ControlTemplate. Templat kontrol menentukan hierarki visual default untuk kontrol. Saat Anda secara eksplisit mereferensikan kontrol, Anda secara implisit mereferensikan hierarki visualnya. Anda dapat mengambil alih nilai default untuk templat kontrol untuk membuat tampilan visual yang dikustomisasi untuk kontrol. Misalnya, Anda dapat memodifikasi nilai warna latar belakang kontrol Button sehingga menggunakan nilai warna gradien linier alih-alih nilai warna solid. Untuk informasi selengkapnya, lihat Gaya Tombol dan Templat.

Elemen antarmuka pengguna, seperti kontrol Button, berisi beberapa daftar instruksi grafik vektor yang menjelaskan seluruh definisi penyajian kontrol. Kode berikut menunjukkan kontrol Button yang ditentukan dalam markup.

<Button Click="OnClick">
  <Image Source="images\greenlight.jpg"></Image>
</Button>

Jika Anda menghitung objek visual dan daftar instruksi grafik vektor yang terdiri dari kontrol Button, Anda akan menemukan hierarki objek yang diilustrasikan di bawah ini:

Diagram pohon visual dan data pemrosesan

Kontrol Button berisi elemen ClassicBorderDecorator, yang pada gilirannya, berisi elemen ContentPresenter. Elemen ClassicBorderDecorator bertanggung jawab untuk menggambar semua elemen grafis diskrit yang membentuk batas dan latar belakang tombol. Elemen ContentPresenter bertanggung jawab untuk menampilkan konten Button. Dalam hal ini, karena Anda menampilkan gambar, elemen ContentPresenter berisi elemen Image.

Ada sejumlah poin yang perlu diperhatikan tentang hierarki objek visual dan daftar instruksi grafik vektor:

  • Pengurutan dalam hierarki mewakili urutan penyajian informasi gambar. Dari elemen visual akar, elemen anak dilalui, kiri ke kanan, atas ke bawah. Jika elemen memiliki elemen anak visual, mereka dilalui sebelum saudaranya.

  • Elemen node non-daun dalam hierarki, seperti ContentPresenter, digunakan untuk berisi elemen anak—elemen tersebut tidak berisi daftar instruksi.

  • Jika elemen visual berisi daftar instruksi vector graphics dan anak visual, daftar instruksi dalam elemen visual induk akan dirender terlebih dahulu sebelum gambar pada objek anak visual mana pun.

  • Item dalam daftar instruksi grafik vektor dirender dari kiri ke kanan.

Pohon Visual

Pohon visual berisi semua elemen visual yang digunakan dalam antarmuka pengguna aplikasi. Karena elemen visual berisi informasi gambar yang bertahan, Anda dapat menganggap pohon visual sebagai grafik adegan, yang berisi semua informasi penyajian yang diperlukan untuk menyusun output ke perangkat tampilan. Pohon ini adalah akumulasi dari semua elemen visual yang dibuat langsung oleh aplikasi, baik dalam kode atau dalam markup. Pohon visual juga berisi semua elemen visual yang dibuat oleh perluasan templat elemen seperti kontrol dan objek data.

Kode berikut menunjukkan elemen StackPanel yang ditentukan dalam markup.

<StackPanel>
  <Label>User name:</Label>
  <TextBox />
  <Button Click="OnClick">OK</Button>
</StackPanel>

Jika Anda menghitung objek visual yang terdiri dari elemen StackPanel dalam contoh markup, Anda akan menemukan hierarki objek visual yang diilustrasikan di bawah ini:

Diagram hierarki pohon visual kontrol StackPanel.

Urutan Penyajian

Pohon visual menentukan urutan penyajian objek visual dan gambar WPF. Urutan traversal dimulai dengan root visual, yang merupakan simpul teratas pada pohon visual. Anak-anak visual akar kemudian dilalui, kiri ke kanan. Jika visual memiliki anak, anak-anaknya dilalui sebelum saudara kandung visual. Ini berarti bahwa konten visual anak dirender di depan konten visual itu sendiri.

Diagram urutan penyajian pohon visual

Visual Dasar

visual akar adalah elemen paling atas dalam hierarki pohon visual. Di sebagian besar aplikasi, kelas dasar visual akar adalah Window atau NavigationWindow. Namun, jika Anda menghosting objek visual dalam aplikasi Win32, visual akar akan menjadi visual terbanyak yang Anda hosting di jendela Win32. Untuk informasi selengkapnya, lihat Tutorial : Menghosting Objek Visual dalam Aplikasi Win32.

Hubungan dengan Pohon Logis

Pohon logis dalam WPF mewakili elemen aplikasi pada waktu proses. Meskipun Anda tidak memanipulasi pohon ini secara langsung, tampilan aplikasi ini berguna untuk memahami warisan properti dan perutean peristiwa. Tidak seperti pohon visual, pohon logis dapat mewakili objek data non-visual, seperti ListItem. Dalam banyak kasus, pohon logis sangat mirip dengan definisi markup dari aplikasi. Kode berikut menunjukkan elemen DockPanel yang ditentukan dalam markup.

<DockPanel>
  <ListBox>
    <ListBoxItem>Dog</ListBoxItem>
    <ListBoxItem>Cat</ListBoxItem>
    <ListBoxItem>Fish</ListBoxItem>
  </ListBox>
  <Button Click="OnClick">OK</Button>
</DockPanel>

Jika Anda menghitung objek logis yang terdiri dari elemen DockPanel dalam contoh markup, Anda akan menemukan hierarki objek logis yang diilustrasikan di bawah ini:

diagram Pohon
Diagram pohon logis

Pohon visual dan pohon logis disinkronkan dengan serangkaian elemen aplikasi saat ini, mencerminkan penambahan, penghapusan, atau modifikasi elemen. Namun, pohon-pohon menyajikan tampilan aplikasi yang berbeda. Tidak seperti pohon visual, pohon logis tidak memperluas elemen ContentPresenter kontrol. Ini berarti tidak ada korespondensi satu-ke-satu langsung antara pohon logis dan pohon visual untuk sekumpulan objek yang sama. Bahkan, memanggil metode objek LogicalTreeHelper dan metode objek VisualTreeHelper menggunakan elemen yang sama dengan parameter menghasilkan hasil yang berbeda.

Untuk informasi selengkapnya tentang pohon logis, lihat Pohon di WPF.

Melihat Pohon Visual dengan XamlPad

Alat WPF, XamlPad, menyediakan opsi untuk melihat dan menjelajahi pohon visual yang sesuai dengan konten XAML yang saat ini ditentukan. Klik tombol Tampilkan Pohon Visual pada bilah menu untuk menampilkan pohon visual. Berikut ini menggambarkan perluasan konten XAML ke dalam simpul pohon visual di panel Visual Tree Explorer XamlPad:

panel Visual Tree Explorer di XamlPad

Perhatikan bagaimana kontrol Label, TextBox, dan Button masing-masing menampilkan hierarki objek visual terpisah di panel Visual Tree Explorer XamlPad. Ini karena kontrol WPF memiliki ControlTemplate yang berisi pohon visual kontrol tersebut. Saat Anda secara eksplisit mereferensikan kontrol, Anda secara implisit mereferensikan hierarki visualnya.

Profil Visual Kinerja

WPF menyediakan serangkaian alat pembuatan profil performa yang memungkinkan Anda menganalisis perilaku run-time aplikasi Anda dan menentukan jenis pengoptimalan performa yang dapat Anda terapkan. Alat Visual Profiler menyediakan tampilan grafis data performa yang kaya dengan memetakan langsung ke pohon visual aplikasi. Dalam cuplikan layar ini, bagian Penggunaan CPU dari Visual Profiler memberi Anda perincian yang tepat tentang penggunaan layanan WPF objek, seperti penyajian dan tata letak.

tampilan keluaran Visual Profiler
Tampilan keluaran Visual Profiler

Perilaku Penyajian Visual

WPF memperkenalkan beberapa fitur yang memengaruhi perilaku penyajian objek visual: grafik mode dipertahankan, grafik vektor, dan grafik independen perangkat.

Grafik Mode Dipertahankan

Salah satu kunci untuk memahami peran objek Visual adalah memahami perbedaan antara mode langsung dan mode dipertahankan sistem-sistem grafis. Aplikasi Win32 standar berdasarkan GDI atau GDI+ menggunakan sistem grafis mode langsung. Ini berarti bahwa aplikasi bertanggung jawab untuk mengecat ulang bagian area klien yang tidak valid, karena tindakan seperti jendela yang diubah ukurannya, atau objek yang mengubah tampilan visualnya.

Diagram urutan penyajian Win32

Sebaliknya, WPF menggunakan sistem mode yang dipertahankan. Ini berarti objek aplikasi yang memiliki tampilan visual mendefinisikan sekumpulan data gambar berseri. Setelah data gambar didefinisikan, sistem bertanggung jawab setelah itu untuk menanggapi semua permintaan pengecatan ulang untuk merender objek aplikasi. Bahkan pada waktu berjalan, Anda dapat memodifikasi atau membuat objek aplikasi, dan masih mengandalkan sistem untuk menanggapi permintaan penggambaran. Kekuatan dalam sistem grafis mode tetap adalah bahwa data gambar selalu dipertahankan dalam bentuk yang diserialisasi oleh aplikasi, tetapi tanggung jawab untuk rendering diserahkan kepada sistem. Diagram berikut menunjukkan bagaimana aplikasi bergantung pada WPF untuk merespons permintaan penggambaran.

Diagram urutan penyajian WPF

Penggarapan Ulang Cerdas

Salah satu manfaat terbesar dalam menggunakan grafis mode yang dipertahankan adalah bahwa WPF dapat secara efisien mengoptimalkan apa yang perlu digambar ulang dalam aplikasi. Bahkan jika Anda memiliki adegan yang kompleks dengan berbagai tingkat keburaman, Anda umumnya tidak perlu menulis kode tujuan khusus untuk mengoptimalkan penggarapan ulang. Bandingkan ini dengan pemrograman Win32 di mana Anda dapat menghabiskan banyak upaya dalam mengoptimalkan aplikasi Anda dengan meminimalkan jumlah pemrograman ulang di wilayah pembaruan. Lihat Redrawing di Wilayah Pembaruan untuk contoh jenis kompleksitas yang terlibat dalam mengoptimalkan penggambaran ulang dalam aplikasi Win32.

Grafik Vektor

WPF menggunakan grafik vektor sebagai format data penyajiannya. Grafik vektor—yang mencakup font Grafik Vektor Yang Dapat Diskalakan (SVG), Metafil windows (.wmf), dan TrueType—menyimpan data penyajian dan mengirimkannya sebagai daftar instruksi yang menjelaskan cara membuat ulang gambar menggunakan primitif grafis. Misalnya, font TrueType adalah font kerangka yang menjelaskan sekumpulan baris, kurva, dan perintah, bukan array piksel. Salah satu manfaat utama grafik vektor adalah kemampuan untuk menskalakan ke ukuran dan resolusi apa pun.

Tidak seperti grafik vektor, grafik bitmap menyimpan data penyajian sebagai representasi piksel demi piksel dari gambar, yang telah dirender sebelumnya untuk resolusi tertentu. Salah satu perbedaan utama antara format grafik bitmap dan vektor adalah keakuratan gambar sumber asli. Misalnya, ketika ukuran gambar sumber dimodifikasi, sistem grafik bitmap membentangkan gambar, sedangkan sistem grafis vektor menskalakan gambar, mempertahankan keakuratan gambar.

Ilustrasi berikut menunjukkan gambar sumber yang telah diubah ukurannya sebesar 300%. Perhatikan distorsi yang muncul ketika gambar sumber direntangkan sebagai gambar grafis bitmap daripada diskalakan sebagai gambar grafis vektor.

Perbedaan antara grafik raster dan vektor

Markup berikut menunjukkan dua elemen Path yang ditentukan. Elemen kedua menggunakan ScaleTransform untuk mengubah ukuran instruksi gambar elemen pertama sebesar 300%. Perhatikan bahwa instruksi menggambar dalam elemen Path tetap tidak berubah.

<Path
  Data="M10,100 C 60,0 100,200 150,100 z"
  Fill="{StaticResource linearGradientBackground}"
  Stroke="Black"
  StrokeThickness="2" />

<Path
  Data="M10,100 C 60,0 100,200 150,100 z"
  Fill="{StaticResource linearGradientBackground}"
  Stroke="Black"
  StrokeThickness="2" >
  <Path.RenderTransform>
    <ScaleTransform ScaleX="3.0" ScaleY="3.0" />
  </Path.RenderTransform>
</Path>

Tentang Resolusi dan Grafik Device-Independent

Ada dua faktor sistem yang menentukan ukuran teks dan grafik di layar Anda: resolusi dan DPI. Resolusi menjelaskan jumlah piksel yang muncul di layar. Ketika resolusi semakin tinggi, piksel menjadi lebih kecil, menyebabkan grafik dan teks tampak lebih kecil. Grafik yang ditampilkan pada monitor yang diatur ke 1024 x 768 akan tampak jauh lebih kecil ketika resolusi diubah menjadi 1600 x 1200.

Pengaturan sistem lainnya, DPI, menjelaskan ukuran inci layar dalam piksel. Sebagian besar sistem Windows memiliki DPI 96, yang berarti inci layar adalah 96 piksel. Meningkatkan pengaturan DPI membuat inci layar lebih besar; mengurangi DPI membuat inci layar lebih kecil. Ini berarti bahwa inci layar tidak berukuran sama dengan inci dunia nyata; pada sebagian besar sistem, itu mungkin tidak. Saat Anda meningkatkan DPI, grafik dan teks yang memperhatikan DPI menjadi lebih besar karena Anda telah meningkatkan ukuran area layar. Meningkatkan DPI dapat membuat teks lebih mudah dibaca, terutama pada resolusi tinggi.

Tidak semua aplikasi sadar DPI: beberapa menggunakan piksel perangkat keras sebagai unit pengukuran utama; mengubah DPI sistem tidak berpengaruh pada aplikasi ini. Banyak aplikasi lain menggunakan unit sadar DPI untuk menggambarkan ukuran font, tetapi menggunakan piksel untuk menjelaskan yang lain. Membuat DPI terlalu kecil atau terlalu besar dapat menyebabkan masalah tata letak untuk aplikasi ini, karena teks aplikasi menskalakan dengan pengaturan DPI sistem, tetapi UI aplikasi tidak. Masalah ini telah dihilangkan untuk aplikasi yang dikembangkan menggunakan WPF.

WPF mendukung penskalaan otomatis dengan menggunakan piksel independen perangkat sebagai unit pengukuran utamanya, alih-alih piksel perangkat keras; grafis dan skala teks dengan benar tanpa pekerjaan tambahan dari pengembang aplikasi. Ilustrasi berikut menunjukkan contoh bagaimana teks dan grafik WPF muncul di pengaturan DPI yang berbeda.

Grafik dan teks pada pengaturan DPI yang berbeda
Grafik dan teks pada pengaturan DPI yang berbeda

Kelas VisualTreeHelper

Kelas VisualTreeHelper adalah kelas pembantu statis yang menyediakan fungsionalitas tingkat rendah untuk pemrograman di tingkat objek visual, yang berguna dalam skenario yang sangat spesifik, seperti mengembangkan kontrol kustom berkinerja tinggi. Dalam kebanyakan kasus, objek kerangka kerja WPF tingkat lebih tinggi, seperti Canvas dan TextBlock, menawarkan fleksibilitas dan kemudahan penggunaan yang lebih besar.

Pengujian Tabrakan

Kelas VisualTreeHelper menyediakan metode untuk pengujian hit pada objek visual ketika dukungan pengujian hit default tidak memenuhi kebutuhan Anda. Anda dapat menggunakan metode HitTest di kelas VisualTreeHelper untuk menentukan apakah geometri atau nilai koordinat titik berada dalam batas objek tertentu, seperti elemen kontrol atau grafik. Misalnya, Anda dapat menggunakan pengujian hit untuk menentukan apakah klik mouse di dalam persegi panjang pembatas suatu objek jatuh di dalam geometri lingkaran. Anda juga dapat memilih untuk mengganti implementasi default dari pengujian hit untuk melakukan perhitungan pengujian hit kustom Anda sendiri.

Untuk informasi selengkapnya tentang pengujian hit, lihat Hit Testing di Visual Layer.

Menghitung Pohon Visual

Kelas VisualTreeHelper menyediakan fungsionalitas untuk menghitung anggota pohon visual. Untuk mengambil induk, panggil metode GetParent. Untuk mengambil anak, atau turunan langsung, dari objek visual, panggil metode GetChild. Metode ini mengembalikan anak bernomor Visual dari induknya pada indeks yang ditentukan.

Contoh berikut menunjukkan cara menghitung semua turunan objek visual, yang merupakan teknik yang mungkin ingin Anda gunakan jika Anda tertarik untuk menserialisasikan semua informasi penyajian hierarki objek visual.

// Enumerate all the descendants of the visual object.
static public void EnumVisual(Visual myVisual)
{
    for (int i = 0; i < VisualTreeHelper.GetChildrenCount(myVisual); i++)
    {
        // Retrieve child visual at specified index value.
        Visual childVisual = (Visual)VisualTreeHelper.GetChild(myVisual, i);

        // Do processing of the child visual object.

        // Enumerate children of the child visual object.
        EnumVisual(childVisual);
    }
}
' Enumerate all the descendants of the visual object.
Public Shared Sub EnumVisual(ByVal myVisual As Visual)
    For i As Integer = 0 To VisualTreeHelper.GetChildrenCount(myVisual) - 1
        ' Retrieve child visual at specified index value.
        Dim childVisual As Visual = CType(VisualTreeHelper.GetChild(myVisual, i), Visual)

        ' Do processing of the child visual object.

        ' Enumerate children of the child visual object.
        EnumVisual(childVisual)
    Next i
End Sub

Dalam kebanyakan kasus, pohon logis adalah representasi elemen yang lebih berguna dalam aplikasi WPF. Meskipun Anda tidak memodifikasi pohon logis secara langsung, tampilan aplikasi ini berguna untuk memahami warisan properti dan perutean peristiwa. Tidak seperti pohon visual, pohon logis dapat mewakili objek data non-visual, seperti ListItem. Untuk informasi selengkapnya tentang pohon logis, lihat Pohon di WPF.

Kelas VisualTreeHelper menyediakan metode untuk mengembalikan persegi panjang batas objek visual. Anda dapat mengembalikan persegi panjang pembatas objek visual dengan memanggil GetContentBounds. Anda dapat mengembalikan persegi panjang pembatas semua turunan objek visual, termasuk objek visual itu sendiri, dengan memanggil GetDescendantBounds. Kode berikut menunjukkan bagaimana Anda akan menghitung persegi panjang pembatas objek visual dan semua turunannya.

// Return the bounding rectangle of the parent visual object and all of its descendants.
Rect rectBounds = VisualTreeHelper.GetDescendantBounds(parentVisual);
' Return the bounding rectangle of the parent visual object and all of its descendants.
Dim rectBounds As Rect = VisualTreeHelper.GetDescendantBounds(parentVisual)

Lihat juga