Layout

Bu konuda, Windows Presentation Foundation (WPF) düzeni sistemi açıklanmıştır. Düzen hesaplamalarının nasıl ve ne zaman oluştuğu, WPF'de kullanıcı arabirimleri oluşturmak için önemlidir.

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

Öğe Sınırlayıcı Kutular

WPF'de düzen hakkında düşünürken, tüm öğelerin çevresini çevreleyen sınırlayıcı kutuyu anlamak önemlidir. Düzen FrameworkElement sistemi tarafından tüketilen her şey, düzende yuvalı bir dikdörtgen olarak düşünilebilir. sınıfı, LayoutInformation bir öğenin düzen ayırma 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 öğenin bireysel davranışı hesaplanmasıyla Panel belirlenir. Bu verileri işlenin düzen sistemi belirli bir 'nin tüm çocuklarının konumunu Panel hesaplar. Üst öğede tanımlanan boyutlandırma özelliklerinin (örneğin, ) alt öğelerini etkilediğini Border unutmamanız önemlidir.

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

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

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

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

düzeninin TextBlock yuva, yöntemi kullanılarak Path içine GetLayoutSlot çevrilir. 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 basit şekilde düzen, boyutlandıran, konumlandı ve çizilen bir öğeye yol açan bir recursive sistemidir. Daha açık bir şekilde, düzen bir öğenin koleksiyonunun üyelerini ölçme ve Panel düzenleme sürecini Children açıklar. Düzen yoğun bir işlemdir. Koleksiyon ne Children kadar büyükse, hesaplanması gereken hesaplama sayısı o kadar fazladır. Karmaşıklık, koleksiyonun sahibi olan öğe tarafından tanımlanan düzen Panel davranışına bağlı olarak da tanıtabilirsiniz. gibi görece basit bir , gibi daha karmaşık bir PanelCanvas performansa göre önemli ölçüde Panel daha iyi performansa sahip Grid olabilir.

Bir alt çocuk konumunu UIElement her değiştirse düzen sistemi tarafından yeni bir geçiş tetikleme potansiyeline sahiptir. Bu nedenle, gereksiz çağrılar uygulama performansının düşük yol açana kadar düzen sistemini çağıran olayları anlamak önemlidir. Düzen sistemi çağrıldığında oluşan işlem aşağıda açıkmektedir.

  1. Alt, UIElement temel özelliklerini ölçerek düzen işlemini başlar.

  2. üzerinde tanımlanan boyutlandırma FrameworkElement özellikleri , ve gibi WidthHeightMargin değerlendirilir.

  3. Panel-specific logic is applied, such Dock as direction or stacking Orientation .

  4. İçerik, tüm çocuklar ölçtükten sonra düzenlenmiştir.

  5. ChildrenKoleksiyon ekranda çizilir.

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

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

Çocuk Ölçme ve Düzenleme

Düzen sistemi koleksiyonun her üyesi için iki geçiş Children tamamlar: ölçü geçişi ve düzenleme geçişi. Her Panel alt, kendi özel MeasureOverride düzen davranışını elde etmek için kendi ve yöntemlerini ArrangeOverride sağlar.

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

İlk olarak, ve gibi UIElement yerel boyut özellikleri ClipVisibility değerlendirilir. Bu, 'a geçirilen constraintSize adlı bir değer MeasureCore üretir.

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

Not

ve ve ile özellikleri arasında Height bir Width fark ActualHeightActualWidth 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, düzen sistemi tarafından gerçek bir işleme geçişine göre ayarlanır ve bu nedenle giriş değişikliğinin temeli olan gibi özelliklerin ayarlanmış değerinin biraz Height gerisinde olabilir.

hesaplanmış bir değer olduğundan, düzen sisteminin çeşitli işlemleri sonucunda bu değerde birden çok veya artımlı ActualHeight olarak bildirilen değişiklikler olduğunu fark etmek gerekir. Düzen sistemi alt öğeler için gerekli ölçü alanı, üst öğeye göre kısıtlamalar gibi hesaplamalar ediyor olabilir.

Ölçü geçişinin nihai amacı, alt tarafından çağrı sırasında oluşan DesiredSize 'ını MeasureCore belirlemektir. değer, DesiredSize içerik düzenleme geçişi sırasında kullanım için tarafından Measure depolanır.

Düzenleme geçişi yöntemine yapılan bir çağrıyla Arrange 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 ArrangeCore yöntemine geçirildi.

yöntemi alt öğenin öğesini değerlendirir ve öğenin işlenmiş boyutunu ArrangeCoreDesiredSize etkileyebilecek ek dış boşlukları değerlendirir. ArrangeCore , parametresi arrangeSize olarak yöntemine ArrangeOverride geçirilen bir Panel üretir. ArrangeOverride , alt finalSize verinin 'ini üretir. Son olarak yöntemi kenar boşluğu ve hizalama gibi uzaklık özelliklerinin son değerlendirmesini yapar ve alt değeri ArrangeCore düzen yuvasına koyar. Alt, ayrılan boşluğun tamamını doldurmak zorunda değildir (ve genellikle doldurmaz). Denetim daha sonra üst öğeye Panel döndürülür ve düzen işlemi tamamlanır.

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

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

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

Panel adı Açıklama
Canvas Alt öğeleri alana göre koordinatlara göre açıkça konumlandırmak için bir alan Canvas tanımlar.
DockPanel Alt öğeleri yatay veya dikey olarak, birbirine göre düzenleyilen bir alan tanımlar.
Grid Sütunlardan ve satırlardan oluşan esnek bir kılavuz alanı tanımlar.
StackPanel Alt öğeleri yatay veya dikey yönde yönlendiren tek bir satırda düzenleme.
VirtualizingPanel Alt veri koleksiyonunu Panel sanallaştıran öğeler için bir çerçeve sağlar. Bu soyut bir sınıftır.
WrapPanel Alt öğeleri soldan sağa doğru sıralı konumda, içeriği içeren kutunun kenarında bir sonraki satıra yer almaktadır. Sonraki sıralama, özelliğin değerine bağlı olarak sırayla üstten aşağıya veya sağdan sola Orientation doğru gerçekleşir.

Önceden tanımlanmış öğelerden herhangi biri kullanılarak mümkün olmayacak bir düzen gerektiren uygulamalar için, ve yöntemlerinden devralınarak ve geçersiz kılınarak özel düzen davranışları PanelPanel elde MeasureOverrideArrangeOverride edilebilir.

Düzen Performansında Dikkat Edilmesi Gerekenler

Düzen, otomatik bir işlemdir. Bir koleksiyonda yer Children alan her alt öğe, düzen sisteminin her çağrılma işlemi sırasında işlenir. Sonuç olarak, gerekli değilken düzen sisteminin tetiklendiğinden kaçınılmalıdır. Aşağıdaki konular daha iyi performans elde etmeye yardımcı olabilir.

  • Hangi özellik değeri değişikliklerinin düzen sistemi tarafından bir otomatik güncelleştirmeyi zorlaycı olduğunu unutmayın.

    Değerleri düzen sisteminin başlatılmasına neden olan bağımlılık özellikleri ortak bayraklarla işaretlenir. AffectsMeasure ve hangi özellik değeri değişikliklerinin düzen sistemi tarafından otomatik bir güncelleştirmeyi zorlay olduğuna dair AffectsArrange yararlı ipuçları sağlar. Genel olarak, bir öğenin sınırlayıcı kutusunun boyutunu etkileyebilecek herhangi bir özelliğin true olarak ayarlanmış AffectsMeasure bir bayrağı olması gerekir. Daha fazla bilgi için bkz. Bağımlılık Özelliklerine Genel Bakış.

  • Mümkün olduğunda yerine RenderTransformLayoutTransform kullanın.

    , LayoutTransform bir kullanıcı arabiriminin (UI) içeriğini etkilemenin çok yararlı bir yolu olabilir. Ancak, dönüştürmenin etkisinin diğer öğelerin konumunu etkilemesi gerekmesi yoksa, düzen sistemini çağırmaz, bunun yerine bir RenderTransformRenderTransform kullanmak en iyisidir. LayoutTransform , dönüştürmesini uygular ve etkilenen öğenin yeni konumunu dikkate alan bir recursive düzen güncelleştirmesi uygular.

  • için gereksiz çağrılardan UpdateLayout kaçının.

    yöntemi, UpdateLayout bir recursive düzen güncelleştirmesini güçler ve genellikle gerekli değildir. Tam güncelleştirme gerektiğinden emin değilsanız, sizin için bu yöntemi çağıran düzen sistemine güvenin.

  • Büyük bir koleksiyonla Children çalışırken normal bir yerine kullanmayı göz önünde VirtualizingStackPanel bulundurarak. StackPanel

    Alt koleksiyonu sanalleştirerek, VirtualizingStackPanel şu anda üst öğenin ViewPort içinde olan 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 düzgün ölçeklendirme sağlar ve uygulamanın otomatik olarak dpi'yi fark eder.

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, bir cihaz pikseli ortasında düştüğünde oluşabilir. Düzen sistemi, düzen yuvarlama ile buna göre ayarlama yapmak için bir yol sağlar. Düzen yuvarlama, düzen sisteminin düzen geçişi sırasında tamsayı olmayan piksel değerlerini yuvarlar.

Düzen yuvarlama varsayılan olarak devre dışıdır. Düzen yuvarlamayı etkinleştirmek için özelliğini UseLayoutRounding herhangi bir üzerinde olarak trueFrameworkElement ayarlayın. Bu bir bağımlılık özelliği olduğundan, değer görsel ağacının tüm çocuklarına yayılır. Tüm kullanıcı arabirimi için düzen yuvarlamayı etkinleştirmek için kök UseLayoutRoundingtrue kapsayıcıda olarak ayarlayın. Örnek için bkz. UseLayoutRounding

Sırada Ne Var?

Öğelerin nasıl ölçülebilir ve düzenli olduğunu anlamak, düzeni anlamanın ilk adımıdır. Kullanılabilir öğeler hakkında daha fazla bilgi Panel için bkz. Panellere Panel Düzeni etkileyebilecek çeşitli konumlandırma özelliklerini daha iyi anlamak için bkz. Hizalama, Kenar Boşlukları ve Doldurmaya Genel Bakış. Tüm bunları basit bir uygulamada bir araya almaya hazırsanız bkz. Adım adım: İlk WPF masaüstü uygulamam.

Ayrıca bkz.