Düzen Sistemi

Makale
08/01/2011

Bu konuda açıklar Windows Presentation Foundation (WPF) Düzen sistem. Düzen hesaplamaları nasıl ve ne zaman ortaya anlama içinde kullanıcı arabirimleri oluşturmak için gerekli WPF.

This topic contains the following sections:

Sınırlayıcı kutular öğesi
Düzen sistem
Ölçme ve çocukların düzenleme
Öğeleri ve özel düzen davranışlar paneli
Yerleşim performans konuları
Sub-Pixel işleme ve düzeni yuvarlama
What's Next

Sınırlayıcı kutular öğesi

Düzende fazla zaman WPF, sınırlama kutusu, çevreleyen anlamak önemli olduğutüm öğeleri. Her FrameworkElement tüketilen düzeni tarafından sistem, Düzen. slotted bir dikdörtgen olarak düşünülebilir LayoutInformation Sınıfı döndürür sınırlarını bir öðenin düzeni ayırma veya yuvası. Dikdörtgenin boyutu kullanılabilir ekran alanı, kısıtlamalar, yerleşim özgü özellikler (örneğin, kenar boşluğu ve doldurma) ve bireysel davranış üst boyutunu hesaplayarak belirlenir Panel öğesi. Düzen sistem bu veri işleme, belli bir alt öğeleri konumunu hesaplamak mümkün Panel. Gibi özellikleri boyutlandırma üst öğesinde tanımlanan unutmamak gerekir bir Borderetkiler, çocuklar.

Aşağıdaki resimde basit bir düzeni gösterilmektedir.

Tipik bir Kılavuz, üzerine sınırlama kutusu yerleştirilmemiş.

Bu düzen aşağıdakileri kullanarak elde edilebilir XAML.

<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 içinde bulunan bir Grid. Metin yalnızca sol üst köşesinde ilk sütun için ayrılan alanı doldurur iken TextBlock gerçekten çok büyük. Herhangi bir sınırlayıcı kutu FrameworkElement kullanarak alınan GetLayoutSlot yöntemi. Sınırlama kutusu aşağıda gösterilmiştir TextBlock öğesi.

TextBlock öğesinin sınırlama kutusu şimdi görünür durumda.

Sarı dikdörtgen, tahsis edilen alan tarafından gösterilen TextBlock öğesi daha göründüğü gerçekten çok büyük. Ek öğeler eklendikçe Grid, bu ayırma daraltabilir veya bağlı türünü ve eklenen öğelerin boyutunu genişletin.

Düzen yuvasında TextBlock dönüþtürülür bir Path kullanarak GetLayoutSlot yöntemi. Bu teknik öğesinin sınırlama kutusunun görüntülenmesinde yararlı olabilir.

Private Sub getLayoutSlot1(ByVal sender As Object, ByVal e As RoutedEventArgs)
    Dim myRectangleGeometry As New RectangleGeometry
    myRectangleGeometry.Rect = LayoutInformation.GetLayoutSlot(txt1)
    Dim myGeometryDrawing As New GeometryDrawing
    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

private void getLayoutSlot1(object sender, System.Windows.RoutedEventArgs e)
{
    RectangleGeometry myRectangleGeometry = new RectangleGeometry();
    myRectangleGeometry.Rect = LayoutInformation.GetLayoutSlot(txt1);
    GeometryDrawing myGeometryDrawing = new GeometryDrawing();
    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();
}

Düzen sistem

En basit haliyle, Düzen, Liderleri büyüklükte yerleştirilmiş ve çizilmiş bir öğesi olan bir özyinelemeli sistemidir. Daha özel olarak Düzen ölçme ve üyelerini düzenleme işlemini açıklar bir Panel öğesinin Children koleksiyonu. Düzeni yoğun bir işlemdir. Büyük Children koleksiyonu, yapılmalıdır hesaplamalar sayısı arttıkça. Karmaşıklık de tanıtılan tarafından tanımlanan düzeni davranışı temel Panel öğe, sahip olduğu koleksiyonu. Oldukça basit Panel, gibi Canvas, önemli ölçüde daha iyi performans daha fazla karmaşık olabilir Panel, gibi Grid.

Her zaman bir çocuk UIElement kendi konumunu değiştirir Düzen sistem. tarafından yeni bir geçiş tetiklemek için olasılığı vardır Bu nedenle, düzeni sistemin gereksiz çağırma çalıştırabilirsiniz olayların kötü uygulama performansını neden olabilir bilmek önemlidir. Yerleşim sistemi çağrıldığında gerçekleşen işlem açıklanır.

Çocuk UIElement ölçülen çekirdek özellikleri sağlayarak düzeni başlar.
Tanımlanan özellikleri boyutlandırma FrameworkElement değerlendirildiğinde, gibi Width, Height, ve Margin.
Panel-Belirli mantığının uygulandığı gibi Dock Yön veya yığınlama Orientation.
Tüm çocuklar ölçülen sonra içeriği yerleştirilmiştir.
Children Koleksiyonu çizilen ekran.
İşlemi yeniden ek, çağrılan Children koleksiyona eklenen bir LayoutTransform uygulanan veya UpdateLayout yöntemi çağrılır.

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

Ölçme ve çocukların düzenleme

Yerleşim sistemi, her üye için iki geçiş yapar Children koleksiyonu, bir ölçü geçişi ve Yerleştir pass. Her çocuğun Panel kendi sağlar MeasureOverride ve ArrangeOverride yöntemlere ulaşmak, kendi özel düzen davranışı.

Ölçü geçişi sırasında her üyesi Children koleksiyonu değerlendirildi. Bir arama işlemi başlar Measure yöntemi. Ana uygulama içinde bu yöntem çaðrýlýr Panel öğesi ve açıkça ortaya düzeninde çağrılacak yok.

İlk, özgün boyutu özelliklerini UIElement değerlendirildiğinde, gibi Clip ve Visibility. Bu adlı bir değer üretir constraintSize için geçirilen MeasureCore.

Framework özelliklerini aldığı tanımlanan FrameworkElement işlenir, değerini etkiler constraintSize. Bu özellikler genellikle plandaki boyutlandırma özelliklerini açıklamak UIElement, gibi Height, Width, Margin, ve Style. Bu özelliklerin her birine öğe görüntülemek gerekli alanı değiştirebilirsiniz. MeasureOverridesonra çağrılır constraintSize parametresi.

Not
Özellikleri arasında bir fark yoktur Height ve Width ve ActualHeight ve ActualWidth.Örneğin, ActualHeight özelliği olduğu hesaplanan değeri temel alan diğer yükseklik girdileri ve Düzen sistem.Değer gerçek işleme geçişte, temel düzeni sistemin kendisi tarafından ayarlanır ve bu nedenle biraz özellikleri değerini ayarla gibi öteleme Height, temel olangiriş değişiklik. Çünkü ActualHeight dikkat etmeniz gereken bir hesaplanmış değeri olan birden fazla da olabilir veya artımlı bildirilen kendisine çeşitli işlemler sonucunda Düzen sistem tarafından değiştirir.Düzen sistem alt öğeler, üst öğe vb. kısıtlamaları için gerekli önlemi alan hesaplama.

Özellikleri arasında bir fark yoktur Height ve Width ve ActualHeight ve ActualWidth.Örneğin, ActualHeight özelliği olduğu hesaplanan değeri temel alan diğer yükseklik girdileri ve Düzen sistem.Değer gerçek işleme geçişte, temel düzeni sistemin kendisi tarafından ayarlanır ve bu nedenle biraz özellikleri değerini ayarla gibi öteleme Height, temel olangiriş değişiklik.

Çünkü ActualHeight dikkat etmeniz gereken bir hesaplanmış değeri olan birden fazla da olabilir veya artımlı bildirilen kendisine çeşitli işlemler sonucunda Düzen sistem tarafından değiştirir.Düzen sistem alt öğeler, üst öğe vb. kısıtlamaları için gerekli önlemi alan hesaplama.

Ölçü geçişi amacı belirlemek için alt olan kendi DesiredSize, sırasında oluştuğu MeasureCore çağrısı. DesiredSize Değeri olarak depolanır Measure sırasında içerik kullanmak pass. Yerleştir

Çağrı Yerleştir geçişi başlar Arrange yöntemi. Yerleştir geçişi sırasında üst Panel öğesi sınırları temsil eden bir dikdörtgen oluştururalt. Bu değer için geçirilen ArrangeCore yöntemi için işleme.

ArrangeCore Yöntemi değerlendirir DesiredSize alt işlenmiş öğesi. boyutunu etkileyebilecek tüm ek marjları değerlendirir ve ArrangeCoreoluşturduğu bir arrangeSize, için geçirilir, ArrangeOverride yöntemi, Panel parametresi. ArrangeOverrideoluşturduğu finalSize alt. Son olarak, ArrangeCore yöntemi, kenar boşluğu ve hizalama gibi mahsup özelliklerinin son bir değerlendirme yapar ve koyar alt içinde kendi düzeni yuvası. Bağımlı olmak zorunda değildir (ve sık desteklemez) alan tahsis tamamen kaplayacak. Denetim üst sonra döndürülen Panel ve yerleştirme sürecini tamamlanır.

Öğeleri ve özel düzen davranışlar paneli

WPFbir grup türetilmeli öğesini içerir Panel. Bunlar Panel öğeleri etkinleştirmek pek çok karmaşık düzenler. Örneğin, öğeleri yığınlama kolayca kullanarak elde edilebilir StackPanel daha karmaşık ve ücretsiz akıtmaya düzenlerini kullanarak mümkün iken öğesi, bir Canvas.

Mevcut düzeni aşağıdaki tabloda özetlenmiştir Panel öğeleri.

Panel adı	Description
Canvas	Bir alanı içinde açıkça konumlandırma koordinatları göreli olarak alt öğeleri tanımlayan Canvas alanı.
DockPanel	İçinde alt öğeleri yatay veya dikey olarak birbirine göre düzenleyebilirsiniz bir alanı tanımlar.
Grid	Defines a flexible grid area that consists of columns and rows.
StackPanel	Arranges child elements into a single line that can be oriented horizontally or vertically.
VirtualizingPanel	İçin bir çerçeve sağlar Panel öğeleri konumlarında sanal olarak, oluştur, alt veri toplama. Bu soyut bir sınıftır.
WrapPanel	Satır içeren kutunun kenarını sonunda içerik parçalamak sağındaki alt elemanları sıralı konumu sol. Sonraki sıralama oluşur sırayla üst kısmından yukarıdan aşağıya veya sağa sola değerine bağlı Orientation özelliği.

Önceden tanımlanmış birini kullanarak mümkün olmayan bir düzen gerektiren uygulamalar için Panel öğeleri, özel düzen davranışlar elde edilebilir devralmasını tarafından Panel ve geçersiz kılma MeasureOverride ve ArrangeOverride yöntemleri. Bir örnek için bkz: Özel Radyal paneli örnek.

Yerleşim performans konuları

Düzen yinelemeli bir işlemdir. Her alt öğesinde bir Children koleksiyonu yönteminin çağrılması sırasında işlenenDüzen sistem. Gerekli değilse, sonuç olarak, Düzen sistem tetikleyen kaçınılmalıdır. Aşağıdaki önemli noktalar daha iyi performans elde etmek yardımcı olur.

Hangi özellik değeri değiştiğinde bir özyinelemeli güncelleştirmesi Düzen sistem tarafından zorlar unutmayın.

Bağımlılık Özellikleri değerleri düzeni sistemin başlatılmasına neden olabilir ortak bayraklarıyla işaretlenir. AffectsMeasureve AffectsArrange sağlamak yararlı ipuçları için hangi özelliğinin değeri değiştiğinde zorla bir özyinelemeli güncelleştirmeyle Düzen sistem. Genel olarak, bir öðenin sınırlayıcı kutusunun boyutunu etkileyebilecek herhangi bir özelliği olması gerekir bir AffectsMeasure bayrağı ayarlanmış true. For more information, see Bağımlılık Özellikleri Genel Bakış.
Mümkün olduğunda kullanmak bir RenderTransform yerine bir LayoutTransform.

A LayoutTransform içeriği için etkilemek için çok kullanışlı bir yoldur bir user interface (UI). Dönüşüm etkisi diğer öğelerin konumunu etkileyen gerekmez, ancak en iyisi olmadığını bir RenderTransform bunun yerine, çünkü RenderTransform değil çağırmak Düzen sistem. LayoutTransformkendi dönüştürmesi uygular ve etkilenen öğenin konumunu yeni hesap için bir özyinelemeli Düzen güncelleştirmesi zorlar.
Gereksiz çağrı kaçınmak UpdateLayout.

UpdateLayout Yöntemi bir özyinelemeli Düzen güncelleştirmesi zorlar ve sık değildir gerektiği. Tam güncelleştirme gerekli olduğundan emin değilseniz, sizin için bu yöntemi çağırmak için yerleşim sistemi kullanır.
Bir büyük çalışırken Children koleksiyonu, kullanmayı düşünün bir VirtualizingStackPanel bir normal yerine StackPanel.

Alt koleksiyonu sanallaştırılması kullanım kapasitesini arttırabilir tarafından VirtualizingStackPanel yalnızca, nesneleri olan Ebeveynler içinde şu anda bellekte tutar Görünüm penceresi. Sonuç olarak, performans önemli ölçüde Çoğu senaryoda artırıldı.

Sub-Pixel işleme ve düzeni yuvarlama

The WPF graphics system uses device-independent units to enable resolution and device independence. Her aygıt bağımsız piksel sistemi ile otomatik olarak ölçekler dots per inch (dpi) ayarı. Bu sağlar WPF uygulamaları için uygun ölçeklendirme farklı dpi ayarları ve uygulama otomatik olarak yapar dpi-aware.

Ancak, bu dpi bağımsızlığı nedeniyle düzensiz kenar işleme anti oluşturabilirsiniz-yumuşatma. Bir kenarı konumu yerine aygıt piksel ortasında aygıt piksel arasında düştüğünde genellikle bulanık veya yarı saydam kenarları görülen Bu aletler oluşabilir. Düzen sistem bu düzeni yuvarlama ile ayarlamak için bir yol sağlar. Yuvarlama yerleşim düzeni sistem integral piksel değerleri düzeni geçişi sırasında yere yuvarlar olur.

Yuvarlama düzeni varsayılan olarak devre dışıdır. Düzen yuvarlama etkinleştirmek için UseLayoutRounding özelliğine true herhangi FrameworkElement. Bağımlılık özelliği olduğundan, değer görsel ağacındaki tüm alt yaymak. Düzeni tüm UI için yuvarlama etkinleştirmek için UseLayoutRounding için true kök kapsayıcısı. For an example, see UseLayoutRounding.

What's Next

Öğelerin nasıl ölçülür ve düzenlenmiş anlama anlama düzeninde ilk adımıdır. Kullanılabilir hakkında daha fazla bilgi için Panel öğeler, bkz: Paneller Genel Bakış. Düzenini etkileyen çeşitli konumlandırma özelliklerini daha iyi anlamak için bkz: Hizalama, Dış Boşluklar ve Doldurmaya Genel Bakış. Özel bir örneği için Panel öğesi, bakın Özel Radyal paneli örnek. Hepsini bir soluk uygulamaya koymak hazır olduğunuzda, bkz: İzlenecek Yol: WPF Kullanmaya Başlarken.