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 kullanılan her FrameworkElement biri, düzene yerleştirilmiş bir dikdörtgen olarak düşünülebilir. sınıfı, LayoutInformation bir öğenin düzen ayırmasının veya yuvanı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 öğenin bireysel davranışı hesaplanarak belirlenir. Bu verileri işlerken, düzen sistemi belirli Panelbir öğesinin tüm alt öğelerinin konumunu hesaplayabilir. Üst öğede tanımlanan boyutlandırma özelliklerinin (örneğin Border, ) alt öğelerini etkilediğini unutmamak önemlidir.

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

Screenshot that shows a typical grid, no bounding box superimposed.

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 TextBlock bir öğe içinde Gridbarındırılır. Metin ilk sütunun yalnızca sol üst köşesini doldururken, için TextBlock ayrılan alan aslında çok daha büyüktür. Herhangi birinin FrameworkElement sınırlayıcı kutusu yöntemi kullanılarak GetLayoutSlot alınabilir. Aşağıdaki çizimde öğenin sınırlayıcı kutusu gösterilmektedir TextBlock .

Screenshot that shows that the TextBlock bounding box is now visible.

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

öğesinin TextBlock düzen yuvası yöntemi kullanılarak a'ya Path çevrilir GetLayoutSlot . 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 öğenin Children koleksiyonunun üyelerini ölçme ve düzenleme işlemini açıklar. Düzen yoğun bir işlemdir. Koleksiyon ne kadar Children büyükse, yapılması gereken hesaplama sayısı o kadar fazla olur. Karmaşıklık, koleksiyonun sahibi olan öğe tarafından Panel tanımlanan düzen davranışına göre de ortaya çıkarılabilir. gibi Canvasnispeten basit Panelbir , gibi Griddaha karmaşık Panelolandan ö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ş 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 alt öğe UIElement , önce temel özelliklerini ölçerek düzen işlemine başlar.

  2. üzerinde FrameworkElement tanımlanan boyutlandırma özellikleri , ve Margingibi WidthHeightdeğerlendirilir.

  3. Panelyön veya yığınlama Orientationgibi Dock -specific mantığı uygulanır.

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

  5. Koleksiyon Children ekrana çizilir.

  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, koleksiyonun Children her üyesi için iki geçiş tamamlar, bir ölçü geçişi ve bir düzenleme geçişi. Her alt öğe Panel kendi MeasureOverride düzeninin davranışını elde etmek için kendi ve ArrangeOverride yöntemlerini sağlar.

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

İlk olarak, ve gibi ClipVisibilityyerel boyut özellikleri UIElement değerlendirilir. Bu, öğesine geçirilen MeasureCoreadlı constraintSize bir değer oluşturur.

İkinci olarak, üzerinde FrameworkElement tanımlanan çerçeve özellikleri işlenir ve bu da değerini constraintSizeetkiler. Bu özellikler genellikle , , Marginve Stylegibi HeightWidthtemel alınan UIElementöğesinin boyutlandırma özelliklerini açıklar. Bu özelliklerin her biri, öğesini görüntülemek için gereken alanı değiştirebilir. MeasureOverride parametresiyle constraintSize birlikte çağrılır.

Dekont

ve WidthActualHeightActualWidthve özellikleri Height arasında bir fark vardır. Örneğin özelliği, ActualHeight 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 gibi özelliklerin Heightayarlanan değerinin biraz gerisinde kalabilir.

ActualHeight Hesaplanmış 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 bilmeniz gerekir. Düzen sistemi alt öğeler için gerekli ölçü alanını, üst öğeye göre kısıtlamaları vb. hesaplıyor olabilir.

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

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

yöntemi alt ArrangeCore öğenin değerini DesiredSize değerlendirir ve öğenin işlenmiş boyutunu etkileyebilecek ek kenar boşluklarını değerlendirir. ArrangeCorearrangeSizeparametresi olarak yöntemine ArrangeOverridePanel geçirilen bir oluşturur. ArrangeOverridefinalSize çocuğun öğesini oluşturur. Son olarak, ArrangeCore yöntemi kenar boşluğu ve hizalama gibi uzaklık özelliklerinin son değerlendirmesini yapar ve alt öğeyi düzen yuvasına yerleştirir. Alt öğe ayrılan alanın tamamını doldurmak zorunda değildir (ve genellikle doldurmaz). Denetim daha sonra üst Panel öğeye döndürülür ve düzen işlemi tamamlanır.

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

WPF, öğesinden Paneltüretilen bir öğe grubu içerir. Bu Panel öğeler birçok karmaşık düzeni etkinleştirir. Örneğin, yığma öğeleri öğesi kullanılarak StackPanel kolayca elde edilebilirken, daha karmaşık ve serbest akış düzenleri bir Canvaskullanılarak mümkündür.

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

Panel adı Tanım
Canvas Alt öğeleri alana göre koordinatlara göre Canvas açıkça konumlandırabileceğiniz bir alan tanımlar.
DockPanel Alt öğeleri birbirine göre yatay veya dikey olarak yerleştirebileceğ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 Alt veri toplamayı sanallaştıran öğeler için Panel bir çerçeve sağlar. Bu soyut bir sınıftır.
WrapPanel Alt öğeleri soldan sağa sıralı konuma yerleştirir ve içeriği içeren kutunun kenarındaki bir sonraki satıra ayırır. Sonraki sıralama, özelliğin değerine Orientation bağlı olarak yukarıdan aşağıya veya sağdan sola sıralı olarak gerçekleşir.

Önceden tanımlanmış Panel öğelerden herhangi birini kullanarak mümkün olmayan bir düzen gerektiren uygulamalar için, ve ArrangeOverride yöntemlerinden Panel devralma ve geçersiz kılma MeasureOverride yoluyla özel düzen davranışları elde edilebilir.

Düzen Performansında Dikkat Edilmesi Gerekenler

Düzen özyinelemeli bir işlemdir. Bir Children koleksiyondaki her alt öğe, düzen sisteminin her ç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ğına dikkat edin.

    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ğlayın. Genel olarak, bir öğenin sınırlayıcı kutusunun boyutunu etkileyebilecek herhangi bir özelliğin bayrağı true olarak ayarlanmalıdır AffectsMeasure . Daha fazla bilgi için bkz . Bağımlılık Özelliklerine Genel Bakış.

  • Mümkün olduğunda yerine bir RenderTransformLayoutTransformkullanın.

    bir LayoutTransform kullanıcı arabiriminin (UI) içeriğini etkilemek için çok yararlı bir yol 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üştürmesini uygular ve etkilenen öğenin yeni konumunu hesaba eklemek için özyinelemeli bir düzen güncelleştirmesini zorlar.

  • için gereksiz çağrılardan UpdateLayoutkaçı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 Children bir koleksiyonla çalışırken, normal StackPanelyerine bir VirtualizingStackPanel kullanmayı göz önünde bulundurun.

    Alt koleksiyonu sanallaştırarak, VirtualizingStackPanel yalnızca üst öğesinin ViewPort içinde bulunan nesneleri bellekte tutar. Sonuç olarak, çoğu senaryoda performans önemli ölçüde geliştirilmiştir.

Alt Piksel İşleme ve Düzen Yuvarlama

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ığı, diğer addan koruma nedeniyle düzensiz kenar işlemesi 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 ile bunu ayarlamak için bir yol sağlar. Düzen yuvarlama, düzen sisteminin düzen geçişi sırasında integral olmayan piksel değerlerini yuvarladığı yerdir.

Düzen yuvarlama varsayılan olarak devre dışıdır. Düzen yuvarlama özelliğini etkinleştirmek için herhangi bir FrameworkElementüzerinde özelliğini olarak true ayarlayınUseLayoutRounding. Bu bir bağımlılık özelliği olduğundan, değer görsel ağaçtaki tüm alt öğelere yayılır. Tüm kullanıcı arabirimi için düzen yuvarlama özelliğini etkinleştirmek için kök kapsayıcıda olarak true ayarlayınUseLayoutRounding. Ö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 öğeler 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ış. Tümünü basit bir uygulamada bir araya getirmek için hazır olduğunuzda bkz . İzlenecek Yol: İlk WPF masaüstü uygulamam.

Ayrıca bkz.