Aracılığıyla paylaş

Düzen

  • Makale

Bu konuda Windows Presentation Foundation (WPF) düzen sistemi açıklanmaktadır. Düzen hesaplamalarının nasıl ve ne zaman yapıldığını anlamak, WPF'de kullanıcı arabirimleri oluşturmak için gereklidir.

Bu konu aşağıdaki bölümleri içerir:

Öğe Sınırlama Kutuları

WPF'de düzeni düşünürken, tüm öğeleri çevreleyen sınırlayıcı kutuyu anlamak önemlidir. Düzen sistemi tarafından tüketilen her FrameworkElement, düzene yerleştirilmiş bir dikdörtgen olarak düşünülebilir. LayoutInformation sınıfı, bir öğenin düzen tahsisi veya bölümünün sınırlarını döndürür. Dikdörtgenin boyutu kullanılabilir ekran alanı, kısıtlamaların boyutu, düzene özgü özellikler (kenar boşluğu ve doldurma gibi) ve üst Panel öğesinin bireysel davranışı hesaplanarak belirlenir. Düzen sistemi bu verileri işledikten sonra, belirli bir Panel'nin tüm alt öğelerinin konumunu hesaplayabilmektedir. Üst öğede tanımlanan, örneğin Bordergibi, boyutlandırma özelliklerinin alt öğelerini etkilediğini unutmamak önemlidir.

Aşağıdaki çizimde basit bir düzen gösterilmektedir.

Üst üste binmiş sınırlayıcı kutu olmayan tipik bir kılavuzu gösteren ekran görüntüsü.

Bu düzen, aşağıdaki XAML kullanılarak elde edilebilir.

<Grid Name="myGrid" Background="LightSteelBlue" Height="150">
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="250"/>
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>
    <RowDefinition />
    <RowDefinition />
    <RowDefinition />
  </Grid.RowDefinitions>
  <TextBlock Name="txt1" Margin="5" FontSize="16" FontFamily="Verdana" Grid.Column="0" Grid.Row="0">Hello World!</TextBlock>
  <Button Click="getLayoutSlot1" Width="125" Height="25" Grid.Column="0" Grid.Row="1">Show Bounding Box</Button>
  <TextBlock Name="txt2" Grid.Column="1" Grid.Row="2"/>
</Grid>

Tek bir TextBlock öğesi bir Gridiçinde barındırılır. Metin ilk sütunun yalnızca sol üst köşesini doldururken, TextBlock için ayrılan alan aslında çok daha büyüktür. Herhangi bir FrameworkElement'nin sınırlayıcı kutusu, GetLayoutSlot yöntemi kullanılarak elde edilebilir. Aşağıdaki şemada TextBlock öğesinin sınır kutusu gösterilmektedir.

TextBlock sınırlayıcı kutusunun artık görünür olduğunu gösteren ekran görüntüsü.

Sarı dikdörtgende gösterildiği gibi, TextBlock öğesi için ayrılan alan göründüğünden çok daha büyüktür. Gridek öğeler eklendikçe, eklenen öğelerin türüne ve boyutuna bağlı olarak bu ayırma küçülebilir veya genişleyebilir.

TextBlock düzen yuvası, GetLayoutSlot yöntemi kullanılarak bir Path'e dönüştürülür. Bu teknik, bir öğenin sınırlayıcı kutusunu görüntülemek için yararlı olabilir.

private void getLayoutSlot1(object sender, System.Windows.RoutedEventArgs e)
{
    RectangleGeometry myRectangleGeometry = new RectangleGeometry();
    myRectangleGeometry.Rect = LayoutInformation.GetLayoutSlot(txt1);
    Path myPath = new Path();
    myPath.Data = myRectangleGeometry;
    myPath.Stroke = Brushes.LightGoldenrodYellow;
    myPath.StrokeThickness = 5;
    Grid.SetColumn(myPath, 0);
    Grid.SetRow(myPath, 0);
    myGrid.Children.Add(myPath);
    txt2.Text = "LayoutSlot is equal to " + LayoutInformation.GetLayoutSlot(txt1).ToString();
}

Private Sub getLayoutSlot1(ByVal sender As Object, ByVal e As RoutedEventArgs)
    Dim myRectangleGeometry As New RectangleGeometry
    myRectangleGeometry.Rect = LayoutInformation.GetLayoutSlot(txt1)
    Dim myPath As New Path
    myPath.Data = myRectangleGeometry
    myPath.Stroke = Brushes.LightGoldenrodYellow
    myPath.StrokeThickness = 5
    Grid.SetColumn(myPath, 0)
    Grid.SetRow(myPath, 0)
    myGrid.Children.Add(myPath)
    txt2.Text = "LayoutSlot is equal to " + LayoutInformation.GetLayoutSlot(txt1).ToString()
End Sub

Düzen Sistemi

En basiti düzen, bir öğenin boyutlandırılmasını, konumlandırılmasını ve çizilmesini sağlayan özyinelemeli bir sistemdir. Daha açık belirtmek gerekirse düzen, bir Panel öğesinin Children koleksiyonunun üyelerini ölçme ve düzenleme işlemini açıklar. Sayfa düzeni yoğun bir işlemdir. Children koleksiyonu ne kadar büyükse, yapılması gereken hesaplama sayısı o kadar fazla olur. Karmaşıklık, koleksiyonun sahibi olan Panel öğesi tarafından tanımlanan düzen davranışına göre de ortaya çıkarılabilir. Canvasgibi nispeten basit bir Panel, Gridgibi daha karmaşık bir Panelgöre önemli ölçüde daha iyi performansa sahip olabilir.

Bir çocuk UIElement konumunu her değiştirişinde, düzen sistemi tarafından yeni bir geçişi tetikleme potansiyeline sahiptir. Bu nedenle, gereksiz çağrı uygulama performansının düşmesine neden olabileceğinden, düzen sistemini çağırabilecek olayları anlamak önemlidir. Aşağıda, düzen sistemi çağrıldığında gerçekleşen işlem açıklanır.

  1. Bir çocuk UIElement, önce temel özelliklerinin ölçülmesiyle düzenleme işlemine başlar.

  2. FrameworkElement üzerinde tanımlanan boyutlandırma özellikleri, Width, Heightve Margingibi değerlendirilir.

  3. Panelözel mantık, Dock yönü veya Orientationyığma gibi durumlarda uygulanır.

  4. İçerik, tüm çocuklar ölçüldükten sonra düzenlenir.

  5. Children koleksiyonu ekrana çiziliyor.

  6. Koleksiyona ek Children eklenirse, bir LayoutTransform uygulanırsa veya UpdateLayout yöntemi çağrılırsa işlem yeniden çağrılır.

Bu işlem ve nasıl çağrıldığı aşağıdaki bölümlerde daha ayrıntılı olarak tanımlanmıştır.

Çocukları Ölçme ve Düzenleme

Düzen sistemi, Children koleksiyonunun her üyesi için bir ölçü geçişi ve düzenleme geçişi olmak üzere iki geçiş tamamlar. Her bir alt nesne Panel, kendi düzen davranışını elde etmek için kendi MeasureOverride ve ArrangeOverride yöntemlerini tanımlar.

Ölçüm geçişi sırasında, Children koleksiyonunun her bir üyesi değerlendirilir. İşlem, Measure yöntemine yapılan çağrıyla başlar. Bu yöntem, üst Panel öğesinin uygulanması kapsamında çağrılır ve düzenin gerçekleşmesi için açıkça çağrılması gerekmez.

İlk olarak, UIElement'ın yerel boyut özellikleri, Clip ve Visibilitygibi değerlendirilir. Bu, constraintSize adlı bir değerin oluşturulmasını ve MeasureCore'e geçirilmesini sağlar.

İkinci olarak, FrameworkElement üzerinde tanımlanan çerçeve özellikleri işlenir ve bu da constraintSizedeğerini etkiler. Bu özellikler genellikle Height, Width, Marginve Stylegibi temel UIElementboyutlandırma özelliklerini açıklar. Bu özelliklerin her biri, öğesini görüntülemek için gereken alanı değiştirebilir. MeasureOverride daha sonra parametre olarak constraintSize ile çağrılır.

Not

Height ve Width özellikleri ile ActualHeight ile ActualWidtharasında bir fark vardır. Örneğin, ActualHeight özelliği diğer yükseklik girişlerine ve düzen sistemine göre hesaplanan bir değerdir. Değer, gerçek bir işleme geçişi temelinde düzen sisteminin kendisi tarafından ayarlanır ve bu nedenle giriş değişikliğinin temeli olan Heightgibi özelliklerin ayarlanan değerinin biraz gerisinde kalabilir.

ActualHeight hesaplanan bir değer olduğundan, düzen sistemi tarafından yapılan çeşitli işlemlerin sonucu olarak bu değerde birden çok veya artımlı olarak bildirilen değişiklikler olabileceğini bilmelisiniz. Düzen sistemi, alt öğeler için gerekli ölçüm alanını, üst öğe tarafından belirlenen kısıtlamaları ve benzeri durumları hesaplıyor olabilir.

Ölçüm geçişinin nihai hedefi, çocuğun, MeasureCore çağrısı sırasında gerçekleşen DesiredSizenoktasını belirlemesidir. DesiredSize değeri, içerik düzenleme geçişi sırasında kullanılmak üzere Measure tarafından depolanır.

Düzenleme geçişi, Arrange yöntemine yapılan çağrıyla başlar. Düzenleme geçişi sırasında ebeveyn Panel öğesi, alt öğenin sınırlarını temsil eden bir dikdörtgen oluşturur. Bu değer, işlenmek üzere ArrangeCore yöntemine geçirilir.

ArrangeCore yöntemi, çocuk elemanın DesiredSize'ini değerlendirir ve öğenin işlenmiş boyutunu etkileyebilecek ek kenar boşluklarını değerlendirir. ArrangeCore, arrangeSize'i oluşturarak bunu Panel'ün ArrangeOverride yöntemine bir parametre olarak geçirir. ArrangeOverride çocuğun finalSize'ini oluşturur. Son olarak, ArrangeCore yöntemi kenar boşluğu ve hizalama gibi ofset özelliklerinin son değerlendirmesini yapar ve alt elemanı yerleşim yuvasına yerleştirir. Çocuk, ayrılan alanın tamamını doldurmak zorunda değildir (ve genellikle doldurmaz). Ebeveyn Panel'a kontrol geri verilir ve düzen işlemi tamamlanır.

Panel Öğeleri ve Özel Düzen Davranışları

WPF, Panel'dan türeyen bir öğe grubunu içerir. Bu Panel öğeleri birçok karmaşık düzeni etkinleştirir. Örneğin, StackPanel öğesi kullanılarak yığınlama öğeleri kolayca elde edilebilirken, Canvaskullanılarak daha karmaşık ve serbest akış düzenleri mümkündür.

Aşağıdaki tabloda kullanılabilir düzen Panel öğeleri özetlenmiştir.

Panel adı Açıklama
Canvas Canvas alanına göre çocuk öğelerini koordinatlarla konumlandırabileceğiniz bir alan tanımlar.
DockPanel Çocuk öğeleri birbirine göre yatay veya dikey olarak düzenleyebileceğiniz bir alanı tanımlar.
Grid Sütun ve satırlardan oluşan esnek bir kılavuz alanı tanımlar.
StackPanel Alt öğeleri yatay veya dikey olarak yönlendirilebilen tek bir çizgi halinde düzenler.
VirtualizingPanel Panel öğelerinin alt düzey veri toplamalarını sanallaştırmaları için bir çerçeve sağlar. Bu soyut bir sınıftır.
WrapPanel Alt öğeleri soldan sağa ardışık konuma yerleştirir ve içeriği içeren kutunun kenarındaki bir sonraki satıra geçer. sonraki sıralama, Orientation özelliğinin değerine bağlı olarak yukarıdan aşağıya veya sağdan sola sıralı olarak gerçekleşir.

Önceden tanımlanmış Panel öğeleri kullanılarak mümkün olmayan bir düzen gerektiren uygulamalar için, özel düzen davranışları Panel devralınarak ve MeasureOverride ve ArrangeOverride yöntemleri geçersiz kılınarak gerçekleştirilebilir.

Düzen Performansında Dikkat Edilmesi Gerekenler

Düzen özyinelemeli bir işlemdir. Bir Children koleksiyonundaki her alt öğe, düzen sisteminin her bir çağrısı sırasında işlenir. Sonuç olarak, gerekli olmadığında düzen sisteminin tetiklenmesinden kaçınılmalıdır. Aşağıdaki noktalar daha iyi performans elde etme konusunda size yardımcı olabilir.

  • Hangi özellik değeri değişikliklerinin düzen sistemi tarafından özyinelemeli bir güncelleştirmeye zorlanacağının farkında olun.

    Değerleri düzen sisteminin başlatılmasına neden olabilen bağımlılık özellikleri genel bayraklarla işaretlenir. AffectsMeasure ve AffectsArrange, özellik değeri değişikliklerinin düzen sistemi tarafından özyinelemeli bir güncelleştirmeyi zorlayacağı hakkında yararlı ipuçları sağlar. Genel olarak, bir öğenin sınırlayıcı kutusunun boyutunu etkileyebilecek herhangi bir özelliğin AffectsMeasure bayrağı true olarak ayarlanmalıdır. Daha fazla bilgi için bkz. Bağımlılık Özelliklerine Genel Bakış.

  • Mümkün olduğunda, LayoutTransformyerine bir RenderTransform kullanın.

    LayoutTransform, kullanıcı arabiriminin (UI) içeriğini etkilemenin çok yararlı bir yolu olabilir. Ancak, dönüşümün etkisinin diğer öğelerin konumunu etkilemesi gerekmediyse, bunun yerine bir RenderTransform kullanmak en iyisidir çünkü RenderTransform düzen sistemini çağırmaz. LayoutTransform, dönüşümünü uygular ve etkilenen öğenin yeni konumunu hesaba katmak için özyinelemeli bir düzen güncellemesi yapmaya zorlar.

  • UpdateLayoutgereksiz çağrılardan kaçının.

    UpdateLayout yöntemi özyinelemeli düzen güncelleştirmesini zorlar ve genellikle gerekli değildir. Tam güncelleştirme gerektiğinden emin değilseniz, sizin için bu yöntemi çağırmak için düzen sistemine güvenin.

  • Büyük bir Children koleksiyonuyla çalışırken, normal StackPanelyerine bir VirtualizingStackPanel kullanmayı göz önünde bulundurun.

    Çocuk koleksiyonu sanallaştırarak, VirtualizingStackPanel yalnızca ebeveynin Görünüm Alanındaki nesneleri bellekte tutar. Sonuç olarak, çoğu senaryoda performans önemli ölçüde geliştirilmiştir.

Alt Piksel İşleme ve Düzen Yuvarlama İşlemi

WPF grafik sistemi, çözünürlüğü ve cihaz bağımsızlığını etkinleştirmek için cihazdan bağımsız birimler kullanır. Her cihazdan bağımsız piksel, sistemin inç başına nokta (dpi) ayarıyla otomatik olarak ölçeklendirilir. Bu, WPF uygulamalarına farklı dpi ayarları için uygun ölçeklendirme sağlar ve uygulamayı otomatik olarak dpi'ye duyarlı hale getirir.

Ancak bu dpi bağımsızlığı, kenar yumuşatma nedeniyle düzensiz kenar işleme oluşturabilir. Genellikle bulanık veya yarı saydam kenarlar olarak görülen bu yapıtlar, bir kenarın konumu cihaz pikselleri arasında değil de cihaz pikselinin ortasına düştüğünde ortaya çıkabilir. Düzen sistemi, düzen yuvarlama işlemi ile bunu ayarlamanın bir yolunu sağlar. Düzen yuvarlama işlemi, düzen sistemi düzen geçişi sırasında tam sayı olmayan piksel değerlerini yuvarladığında gerçekleşir.

Düzen yuvarlama varsayılan olarak devre dışıdır. Düzen yuvarlamayı etkinleştirmek için UseLayoutRounding özelliğini herhangi bir FrameworkElementüzerinde true olarak ayarlayın. Bir bağımlılık özelliği olduğu için, değer görsel yapının tüm alt öğelerine yayılır. Tüm kullanıcı arabiriminde düzen yuvarlama özelliğini etkinleştirmek için kök kapsayıcıda UseLayoutRounding'ı true olarak ayarlayın. Bir örnek için bkz. UseLayoutRounding.

Sırada Ne Var?

Öğelerin nasıl ölçülüp düzenlendiğini anlamak, düzeni anlamanın ilk adımıdır. Kullanılabilir Panel öğeleri hakkında daha fazla bilgi için bkz. Panellere Genel Bakış. Düzeni etkileyebilecek çeşitli konumlandırma özelliklerini daha iyi anlamak için bkz. Hizalama, Kenar Boşlukları ve Doldurmaya Genel Bakış. Hepsini hafif bir uygulamada bir araya getirmeye hazır olduğunuzda bkz. İzlenecek Yol: İlk WPF masaüstü uygulamam.

Ayrıca bkz.