Bagikan melalui

Mengoptimalkan Performa: Tata Letak dan Desain

  • Artikel

Desain aplikasi WPF Anda dapat memengaruhi performanya dengan membuat overhead yang tidak perlu dalam menghitung tata letak dan memvalidasi referensi objek. Konstruksi objek, terutama pada waktu proses, dapat memengaruhi karakteristik performa aplikasi Anda.

Topik ini memberikan rekomendasi performa di area ini.

Tata letak

Istilah "kode tata letak" menjelaskan proses mengukur dan mengatur anggota Panelkumpulan anak objek turunan, lalu menggambarnya di layar. Kode tata letak adalah proses intensif matematis—semakin besar jumlah anak dalam koleksi, semakin besar jumlah perhitungan yang diperlukan. Misalnya, setiap kali objek turunan UIElement dalam koleksi mengubah posisinya, objek tersebut berpotensi memicu pass baru oleh sistem tata letak. Karena hubungan dekat antara karakteristik objek dan perilaku tata letak, penting untuk memahami jenis peristiwa yang dapat memanggil sistem tata letak. Aplikasi Anda akan berkinerja lebih baik dengan mengurangi sebanyak mungkin pemanggilan yang tidak perlu dari kode tata letak.

Sistem tata letak menyelesaikan dua pass untuk setiap anggota anak dalam koleksi: pass pengukuran, dan pass pengaturan. Setiap objek anak menyediakan implementasi yang ditimpa sendiri dari Measure metode dan Arrange untuk memberikan perilaku tata letak spesifiknya sendiri. Paling sederhana, tata letak adalah sistem rekursif yang mengarah ke elemen yang berukuran, diposisikan, dan digambar di layar.

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

  • Properti objek FrameworkElement yang terkait dengan ukuran, seperti Width, , Heightdan Margin, dievaluasi.

  • Panel-logika spesifik diterapkan, seperti Dock properti , DockPanelatau Orientation properti dari StackPanel.

  • Konten diatur, atau diposisikan, setelah semua objek turunan diukur.

  • Kumpulan objek anak digambar ke layar.

Proses lolos tata letak dipanggil lagi jika salah satu tindakan berikut terjadi:

  • Objek anak ditambahkan ke koleksi.

  • LayoutTransform diterapkan ke objek anak.

  • Metode UpdateLayout ini dipanggil untuk objek anak.

  • Ketika perubahan terjadi pada nilai properti dependensi yang ditandai dengan metadata yang memengaruhi ukuran atau mengatur lulus.

Gunakan Panel Paling Efisien jika Memungkinkan

Kompleksitas proses tata letak secara langsung didasarkan pada perilaku Paneltata letak elemen -turunan yang Anda gunakan. Misalnya, kontrol Grid atau StackPanel menyediakan lebih banyak fungsionalitas daripada Canvas kontrol. Harga untuk peningkatan fungsionalitas yang lebih besar ini adalah peningkatan biaya performa yang lebih besar. Namun, jika Anda tidak memerlukan fungsionalitas yang Grid disediakan kontrol, Anda harus menggunakan alternatif yang lebih murah, seperti Canvas atau panel kustom.

Untuk informasi selengkapnya, lihat Gambaran Umum Panel.

Memperbarui Daripada Mengganti RenderTransform

Anda mungkin dapat memperbarui Transform daripada menggantinya sebagai nilai RenderTransform properti. Ini terutama berlaku dalam skenario yang melibatkan animasi. Dengan memperbarui Transform, Anda menghindari memulai perhitungan tata letak yang tidak perlu.

Bangun pohon Anda di atas ke bawah

Ketika simpul ditambahkan atau dihapus dari pohon logis, pembatalan properti dinaikkan pada induk simpul dan semua anaknya. Akibatnya, pola konstruksi top-down harus selalu diikuti untuk menghindari biaya pembatalan yang tidak perlu pada simpul yang telah divalidasi. Tabel berikut menunjukkan perbedaan kecepatan eksekusi antara membangun pohon atas ke bawah versus bawah ke atas, di mana pohon 150 tingkat dalam dengan satu TextBlock dan DockPanel di setiap tingkat.

Tindakan Bangunan pohon (dalam ms) Render—termasuk bangunan pohon (dalam md)
Bawah ke atas 366 454
Atas ke bawah 11 96

Contoh kode berikut menunjukkan cara membuat pohon di atas ke bawah.

private void OnBuildTreeTopDown(object sender, RoutedEventArgs e)
{
    TextBlock textBlock = new TextBlock();
    textBlock.Text = "Default";

    DockPanel parentPanel = new DockPanel();
    DockPanel childPanel;

    myCanvas.Children.Add(parentPanel);
    myCanvas.Children.Add(textBlock);

    for (int i = 0; i < 150; i++)
    {
        textBlock = new TextBlock();
        textBlock.Text = "Default";
        parentPanel.Children.Add(textBlock);

        childPanel = new DockPanel();
        parentPanel.Children.Add(childPanel);
        parentPanel = childPanel;
    }
}

Private Sub OnBuildTreeTopDown(ByVal sender As Object, ByVal e As RoutedEventArgs)
    Dim textBlock As New TextBlock()
    textBlock.Text = "Default"

    Dim parentPanel As New DockPanel()
    Dim childPanel As DockPanel

    myCanvas.Children.Add(parentPanel)
    myCanvas.Children.Add(textBlock)

    For i As Integer = 0 To 149
        textBlock = New TextBlock()
        textBlock.Text = "Default"
        parentPanel.Children.Add(textBlock)

        childPanel = New DockPanel()
        parentPanel.Children.Add(childPanel)
        parentPanel = childPanel
    Next i
End Sub

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

Baca juga