Dalam urutan apa Panel paling efisien dalam hal waktu dan kinerja render?

Ada banyak waktu ketika lebih dari satu panel akan cocok untuk tata letak yang saya inginkan, namun saya tahu ada perbedaan waktu render untuk jenis panel yang berbeda.

Sebagai contoh, MSDN menyatakan itu

Yang relatif sederhana Panel, seperti Canvas, dapat memiliki kinerja yang jauh lebih baik daripada yang lebih kompleks Panel, seperti Grid.

Jadi dalam hal waktu dan kinerja render, dalam urutan apa panel WPF yang paling efisien?

Panel WPF:

• Canvas
• DockPanel
• Grid
• UniformGrid
• StackPanel
• WrapPanel
• VirtualizingPanel / VirtualizingStackPanel

Saya cukup yakin saya melihat daftar ini di suatu tempat online, tetapi saya tidak dapat menemukannya sekarang.

Jawaban ideal yang saya cari akan memberi saya daftar panel dengan urutan yang paling cepat. Saya mengerti jumlah anak adalah faktor besar dalam seberapa efisien panelnya, jadi untuk pertanyaan ini, anggap setiap panel hanya memiliki Label/ TextBoxpasangan.

Selain itu, saya ingin daftar pengecualian, seperti panel khusus yang berkinerja lebih baik daripada yang lain berdasarkan kondisi tertentu.

Memperbarui

Untuk meringkas berdasarkan jawaban yang diterima di bawah ini, kinerja panel didasarkan pada jumlah dan tata letak item anak, namun secara umum daftar dari tercepat ke paling lambat adalah:

• Canvas
• StackPanel
• WrapPanel
• DockPanel
• Grid

Selain itu, a VirtualizingPanel/ VirtualizingStackPanelharus selalu digunakan jika ada banyak item yang tidak selalu pas di layar.

Saya sangat menyarankan Anda membaca jawaban yang diterima di bawah ini untuk detail lebih lanjut sebelum hanya memilih item dari daftar ini.

Saya pikir lebih ringkas dan mudah dipahami untuk menggambarkan karakteristik kinerja setiap panel daripada mencoba memberikan perbandingan kinerja relatif absolut.

WPF membuat dua lintasan saat merender konten: Ukur dan Atur. Setiap panel memiliki karakteristik kinerja yang berbeda untuk masing-masing dua lintasan ini.

Performa pass ukur paling dipengaruhi oleh kemampuan panel untuk mengakomodasi peregangan menggunakan penyelarasan (atau Otomatis dalam kasus Grid) dan kemudian jumlah anak yang diregangkan atau berukuran otomatis. Kinerja pass Arrange dipengaruhi oleh kompleksitas interaksi antara lokasi tata letak anak-anak yang berbeda dan tentu saja jumlah anak.

Kadang-kadang panel yang diberikan tidak mudah meminjamkan diri ke tata letak yang dibutuhkan. Saya membuat kontrol yang membutuhkan jumlah item yang sewenang-wenang untuk masing-masing diposisikan pada persentase tertentu dari ruang yang tersedia. Tidak ada kontrol default yang melakukan ini. Mencoba membuat mereka melakukan ini (melalui pengikatan dengan ukuran sebenarnya dari induk) menghasilkan kinerja yang mengerikan. Saya membuat panel tata letak berdasarkan Canvas yang mencapai hasil yang saya inginkan dengan pekerjaan minimal (saya menyalin sumber untuk kanvas dan memodifikasi sekitar 20 baris darinya).

Panel yang tersedia:

• Kanvas

  Menentukan area di mana Anda dapat secara eksplisit memposisikan elemen anak dengan koordinat relatif terhadap area Kanvas.

  Kanvas memiliki kinerja terbaik dari semua panel untuk kartu pass pengaturan karena setiap item secara statis ditetapkan sebagai lokasi. Ukuran lulus juga memiliki kinerja yang sangat baik karena tidak ada konsep peregangan di panel ini; setiap anak cukup menggunakan ukuran aslinya.

• DockPanel

  Menentukan area di mana Anda dapat mengatur elemen anak baik secara horizontal atau vertikal, relatif satu sama lain.

  Dockpanel memiliki skema tata letak yang sangat sederhana di mana item ditambahkan satu per satu relatif terhadap item sebelumnya yang ditambahkan. Secara default baik tinggi atau lebar ditentukan oleh ukuran asli item (berdasarkan masing-masing Atas / Bawah vs Kiri / Kanan) dan arah lainnya ditentukan oleh Dockproperti jika lebar atau tinggi tidak ditentukan. Kartu pass ukuran sedang ke cepat dan kartu pengaturan menengah ke cepat.

• Kisi

  Menentukan area kisi yang fleksibel yang terdiri dari kolom dan baris.

  Ini bisa menjadi panel paling intensif kinerja jika ukuran proporsional atau ukuran otomatis digunakan. Menghitung ukuran item anak dapat merupakan kombinasi kompleks dari ukuran asli item dan tata letak yang ditentukan oleh kisi. Layout juga yang paling rumit dari semua panel. Kinerja lambat hingga sedang untuk pengukuran lulus dan kinerja lambat hingga sedang untuk pengaturan lulus.

• StackPanel

  Mengatur elemen anak menjadi satu garis yang dapat diorientasikan secara horizontal atau vertikal.

  StackPanel mengukur anak-anaknya menggunakan ukuran asli atau relatif pada arah yang berlawanan dari orientasinya dan ukuran asli dalam arah orientasinya (penyelarasan tidak melakukan apa pun dalam arah ini). Ini membuatnya menjadi pemain tingkat menengah di area ini. Pass Arrangement sederhana, hanya meletakkan item dalam urutan. Mungkin performa terbaik kedua untuk pass ini. Performa sedang untuk pass pengukuran dan kinerja cepat untuk pass layout.

• Panel Virtualisasi

  Menyediakan kerangka kerja untuk elemen Panel yang memvirtualisasi pengumpulan data anak mereka. Ini adalah kelas abstrak.

  Kelas dasar untuk mengimplementasikan panel virtualisasi Anda sendiri. Hanya memuat item yang terlihat untuk mencegah penggunaan memori dan prosesor yang tidak dibutuhkan. JAUH lebih banyak performant untuk set item. Mungkin sedikit performan untuk item yang pas di layar karena batas memeriksa. SDK hanya menyediakan satu subclass dari ini, the VirtualizingStackPanel.

• WrapPanel

  Memposisikan elemen anak dalam posisi berurutan dari kiri ke kanan, memecah konten ke baris berikutnya di tepi kotak yang berisi. Pemesanan berikutnya terjadi secara berurutan dari atas ke bawah atau dari kanan ke kiri, tergantung pada nilai properti Orientation.

  Pass pengukuran adalah pass yang agak rumit di mana item terbesar untuk baris tertentu menentukan ketinggian baris dan kemudian setiap item pada baris tersebut menggunakan tinggi asli (jika memiliki satu) atau tinggi baris. Tata letak lulus sederhana, menempatkan setiap item satu demi satu pada satu baris dan kemudian melanjutkan ke baris berikutnya ketika tidak ada cukup ruang untuk item berikutnya. Lulus pengukuran kinerja menengah. Performa sedang hingga cepat untuk pengaturan pass.

Referensi:

Gunakan Panel Paling Efisien jika Mungkin

Kompleksitas proses tata letak secara langsung didasarkan pada perilaku tata letak elemen yang diturunkan Panel yang Anda gunakan. Misalnya, kontrol Grid atau StackPanel menyediakan lebih banyak fungsi daripada kontrol Canvas. Harga untuk peningkatan fungsionalitas yang lebih besar ini adalah peningkatan biaya kinerja yang lebih besar. Namun, jika Anda tidak memerlukan fungsionalitas yang disediakan oleh kontrol Grid, Anda harus menggunakan alternatif yang lebih murah, seperti Kanvas atau panel khusus.

Dari Mengoptimalkan Kinerja: Tata Letak dan Desain

Sistem tata letak melengkapi dua lintasan untuk setiap anggota koleksi Anak-anak, satu pass ukur dan pass pass. Setiap Panel anak menyediakan metode MeasureOverride dan ArrangeOverride sendiri untuk mencapai perilaku tata letak spesifiknya sendiri.

Selama lulus pengukuran, setiap anggota koleksi Anak-anak dievaluasi. Proses dimulai dengan panggilan ke metode Measure. Metode ini disebut dalam implementasi elemen Panel induk, dan tidak harus dipanggil secara eksplisit agar tata letak dapat terjadi.

Pertama, properti ukuran asli dari UIElement dievaluasi, seperti Klip dan Visibilitas. Ini menghasilkan nilai bernama constraintSize yang diteruskan ke MeasureCore.

Kedua, properti kerangka kerja yang didefinisikan pada FrameworkElement diproses, yang memengaruhi nilai constraintSize. Properti ini umumnya menggambarkan karakteristik ukuran UIElement yang mendasarinya, seperti Tinggi, Lebar, Margin, dan Gaya. Masing-masing properti ini dapat mengubah ruang yang diperlukan untuk menampilkan elemen. MeasureOverride kemudian dipanggil dengan constraintSize sebagai parameter.

Catatan Ada perbedaan antara properti Tinggi dan Lebar dan Tinggi Aktual dan AktualWidth. Misalnya, properti ActualHeight adalah nilai yang dihitung berdasarkan input ketinggian lain dan sistem tata letak. Nilai ditentukan oleh sistem tata letak itu sendiri, berdasarkan pass rendering aktual, dan karena itu mungkin sedikit tertinggal dari nilai properti yang ditetapkan, seperti Tinggi, yang merupakan dasar dari perubahan input. Karena ActualHeight adalah nilai yang dihitung, Anda harus menyadari bahwa mungkin ada beberapa atau beberapa perubahan yang dilaporkan sebagai hasil dari berbagai operasi oleh sistem tata letak. Sistem tata letak dapat menghitung ruang ukuran yang diperlukan untuk elemen anak, batasan oleh elemen induk, dan sebagainya. Tujuan akhir dari langkah pengukur adalah agar anak menentukan DesiredSize-nya, yang terjadi selama panggilan MeasureCore. Nilai DesiredSize disimpan oleh Measure untuk digunakan selama pass pengaturan konten.

Kartu akses diawali dengan panggilan ke metode Atur. Selama pass pengaturan, elemen Panel induk menghasilkan persegi panjang yang mewakili batas-batas anak. Nilai ini diteruskan ke metode ArrangeCore untuk diproses.

Metode ArrangeCore mengevaluasi DesiredSize dari anak dan mengevaluasi setiap margin tambahan yang dapat mempengaruhi ukuran elemen yang diberikan. ArrangeCore menghasilkan tata letak, yang diteruskan ke metode ArrangeOverride Panel sebagai parameter. ArrangeOverride menghasilkan Ukuran final anak. Akhirnya, metode ArrangeCore melakukan evaluasi akhir dari properti offset, seperti margin dan alignment, dan menempatkan anak dalam slot tata letak. Anak tidak harus (dan sering tidak) mengisi seluruh ruang yang dialokasikan. Kontrol kemudian dikembalikan ke Panel induk dan proses tata letak selesai.

Dari Mengukur dan Mengatur Anak

Mungkin ini akan membantu Anda.

Tidak hanya untuk panel tetapi juga untuk setiap aplikasi yang ingin Anda buat di WPF.

Ini menyimpulkan gambar WPF & mengukur kinerja.

Ini juga memiliki aplikasi tes menggambar, hasil, dan kesimpulan informasi untuk sistem operasi yang berbeda yang ingin Anda targetkan.

Panel yang Anda sebutkan adalah panel Tata Letak sehingga gambaran umum singkat dari sistem tata letak menunjukkan bahwa itu kemungkinan tidak akan menjadi daftar sederhana dari panel yang paling efisien tetapi bagaimana Anda menggunakan panel yang memiliki efek terbesar pada efisiensi dan kinerja.

LayoutSystem_Overview :

Paling sederhana, tata letak adalah sistem rekursif yang mengarah ke elemen yang diukur, diposisikan, dan digambar. Lebih khusus lagi, tata letak menjelaskan proses mengukur dan mengatur anggota koleksi Anak-anak elemen Panel. Layout adalah proses yang intensif. Semakin besar koleksi Children, semakin besar jumlah perhitungan yang harus dilakukan. Kompleksitas juga dapat diperkenalkan berdasarkan perilaku tata letak yang ditentukan oleh elemen Panel yang memiliki koleksi. Panel yang relatif sederhana, seperti Canvas, dapat memiliki kinerja yang jauh lebih baik daripada Panel yang lebih kompleks, seperti Grid.

Setiap kali UIElement anak mengubah posisinya, ia berpotensi memicu lintasan baru oleh sistem tata letak. Oleh karena itu, penting untuk memahami peristiwa yang dapat memicu sistem tata letak, karena pemanggilan yang tidak perlu dapat menyebabkan kinerja aplikasi yang buruk. Berikut ini menjelaskan proses yang terjadi ketika sistem tata letak dipanggil.

1. UIElement anak memulai proses tata letak dengan terlebih dahulu mengukur properti intinya.

2. Properti ukuran yang didefinisikan pada FrameworkElement dievaluasi, seperti Lebar, Tinggi, dan Margin.

3. Logika khusus panel diterapkan, seperti arah Dock atau Orientasi susun.

4. Konten diatur setelah semua anak diukur.

5. Koleksi Children digambar di layar.

6. Proses dipanggil lagi jika Anak tambahan ditambahkan ke koleksi, LayoutTransform diterapkan, atau metode UpdateLayout dipanggil.

Lihat LayoutSystem_Measure_Arrange untuk informasi lebih lanjut tentang pengukuran dan pengaturan anak-anak

LayoutSystem_Performance :

Layout adalah proses rekursif. Setiap elemen anak dalam koleksi Children akan diproses selama setiap pemanggilan sistem tata letak. Akibatnya, memicu sistem tata letak harus dihindari ketika tidak perlu. Pertimbangan berikut dapat membantu Anda mencapai kinerja yang lebih baik.

Waspadai perubahan nilai properti mana yang akan memaksa pembaruan rekursif oleh sistem tata letak.

Properti ketergantungan yang nilainya dapat menyebabkan sistem tata letak diinisialisasi ditandai dengan bendera publik. AffectsMeasure dan AffectsArrange memberikan petunjuk yang berguna tentang perubahan nilai properti yang akan memaksa pembaruan rekursif oleh sistem tata letak. Secara umum, properti apa pun yang dapat memengaruhi ukuran kotak pembatas elemen harus memiliki flag AffectsMeasure yang disetel ke true. Untuk informasi lebih lanjut, lihat Ikhtisar Properti Ketergantungan.

Jika memungkinkan, gunakan RenderTransform alih-alih LayoutTransform.

LayoutTransform dapat menjadi cara yang sangat berguna untuk memengaruhi konten antarmuka pengguna (UI). Namun, jika efek transformasi tidak harus berdampak pada posisi elemen lain, yang terbaik adalah menggunakan RenderTransform sebagai gantinya, karena RenderTransform tidak menggunakan sistem tata letak. LayoutTransform menerapkan transformasi dan memaksa pembaruan tata letak rekursif untuk memperhitungkan posisi baru elemen yang terpengaruh.

Hindari panggilan yang tidak perlu ke UpdateLayout.

Metode UpdateLayout memaksa pembaruan tata letak rekursif, dan seringkali tidak diperlukan. Kecuali Anda yakin bahwa pembaruan penuh diperlukan, bergantung pada sistem tata letak untuk memanggil metode ini untuk Anda.

Saat bekerja dengan koleksi Anak besar, pertimbangkan untuk menggunakan VirtualizingStackPanel, bukan StackPanel biasa.

Dengan memvirtualisasi koleksi anak, VirtualizingStackPanel hanya menyimpan objek dalam memori yang saat ini berada dalam ViewPort induk. Akibatnya, kinerja meningkat secara substansial di sebagian besar skenario.

Mengoptimalkan Kinerja: Tata Letak dan Desain : Artikel ini menjelaskan secara rinci tentang cara membangun pohon secara efisien dan memberikan daftar panel sederhana berdasarkan kerumitannya

Kanvas (paling tidak rumit = kinerja lebih efisien dan lebih baik)

Kisi

Panel Lainnya (lebih kompleks = kurang efisien dan kinerja lebih buruk)

Pertimbangan kinerja lain yang perlu diperhatikan: Cara untuk meningkatkan kecepatan rendering UI WPF

1. Cache semuanya. Kuas, Warna, Geometri, Teks Berformat, Mesin Terbang. (Misalnya kita memiliki dua kelas: RenderTools dan TextCache. Proses rendering dari masing-masing unit alamat ke instance bersama dari kedua kelas. Jadi jika dua bagan memiliki teks yang sama, persiapannya dieksekusi sekali saja.)
2. Freeze Freezable, jika Anda berencana untuk menggunakannya untuk waktu yang lama. Terutama geometri. Geometri unfreezed yang kompleks mengeksekusi HitTest dengan sangat lambat.
3. Pilih cara tercepat membuat setiap primitif. Misalnya, ada sekitar 6 cara rendering teks, tetapi yang tercepat adalah DrawingContext.DrawGlyphs.
4. Aktifkan Daur Ulang Kontainer. Virtualisasi membawa banyak peningkatan kinerja, tetapi wadah akan dibuang dan dibuat ulang, ini adalah default. Tetapi Anda dapat memperoleh lebih banyak kinerja dengan mendaur ulang wadah dengan mengatur VirtualizingStackPanel.VirtualizationMode = "Daur Ulang"
5. Dari sini : Tidak ada batasan praktis untuk jumlah sarang yang dapat didukung aplikasi Anda, namun, umumnya yang terbaik adalah membatasi aplikasi Anda hanya menggunakan panel-panel yang sebenarnya diperlukan untuk tata letak yang Anda inginkan. Dalam banyak kasus, elemen Grid dapat digunakan sebagai pengganti panel bersarang karena fleksibilitasnya sebagai wadah tata letak. Ini dapat meningkatkan kinerja dalam aplikasi Anda dengan menjaga elemen yang tidak perlu keluar dari pohon.