Panellere Genel Bakış
Panel öğeler öğelerin işlenmesini denetleyen bileşenlerdir: boyut ve boyutlar, bunların konumları ve alt içeriklerinin yerleşimi. Windows Presentation Foundation (WPF), bir dizi önceden tanımlanmış Panel öğe ve özel öğe oluşturma yeteneği sağlar Panel .
Bu konuda aşağıdaki bölümler yer almaktadır.
Panel sınıfı
Panel, Windows Presentation Foundation (WPF) içinde düzen desteği sağlayan tüm öğeler için temel sınıftır. Türetilmiş Panel öğeler Extensible Application Markup Language (XAML) ve koddaki öğeleri konumlandırmak ve düzenlemek için kullanılır.
WPF birçok karmaşık düzeni etkinleştiren kapsamlı bir türetilmiş panel uygulamaları paketini içerir. Bu türetilmiş sınıflar, çoğu standart Kullanıcı arabirimi (UI) senaryosunu etkinleştiren özellikleri ve yöntemleri sunar. İhtiyaçlarını karşılayan bir alt düzenleme davranışı bulamadığı geliştiriciler, ve yöntemlerini geçersiz kılarak yeni düzenler oluşturabilir ArrangeOverrideMeasureOverride . Özel düzen davranışları hakkında daha fazla bilgi için bkz. Özel Panel öğeleri.
Panel ortak Üyeler
Tüm öğeler,,,,, PanelFrameworkElement ve dahil olmak üzere tarafından tanımlanan temel boyutlandırma ve konumlandırma özelliklerini destekler HeightWidthHorizontalAlignmentVerticalAlignmentMarginLayoutTransform . Tarafından tanımlanan özellikleri konumlandırma hakkında daha fazla bilgi için FrameworkElement bkz. FrameworkElement.
Panel düzeni anlamak ve kullanmak için kritik öneme sahip ek özellikler sunar. BackgroundÖzelliği, bir türetilmiş Panel öğesinin sınırları arasındaki alanı bir ile dolduracak şekilde kullanılır Brush . Children öğesinin içerdiği öğelerin alt koleksiyonunu temsil eder Panel . InternalChildren koleksiyonun içeriğini ve Children veri bağlama tarafından oluşturulan üyeleri temsil eder. Her ikisi de UIElementCollection üst öğe içinde barındırılan alt öğelerinden oluşur Panel .
Panel ayrıca Panel.ZIndex , türetilmiş bir üzerinde katmanlı sıra elde etmek için kullanılabilecek iliştirilmiş bir özellik sunar Panel . ChildrenDaha yüksek bir değere sahip bir Panel koleksiyonunun üyeleri, Panel.ZIndex daha düşük bir değere sahip olanların önünde görüntülenir Panel.ZIndex . Bu, özellikle Canvas ve Grid alt öğelerin aynı koordinat alanını paylaşmasına izin veren panolar için yararlıdır.
Panel Ayrıca OnRender , öğesinin varsayılan sunum davranışını geçersiz kılmak için kullanılabilen yöntemini tanımlar Panel .
İliştirilmiş Özellikler
Türetilmiş Panel öğeleri, ekli özelliklerden oluşan kapsamlı kullanımı kolaylaştırır. İliştirilmiş bir özellik, geleneksel ortak dil çalışma zamanı (CLR) özelliği "sarmalayıcı" olmayan, bağımlılık özelliği 'nin özelleşmiş bir biçimidir. Ekli özellikler, Extensible Application Markup Language (XAML) ' de, izleyen bazı örneklerde görünebilen özel bir sözdizimine sahiptir.
İliştirilmiş bir özelliğin amacı, alt öğelerin gerçekten üst öğe tarafından tanımlanan bir özelliğin benzersiz değerlerini depolamasına izin versağlamaktır. Bu işlevin bir uygulaması, alt öğelerin, uygulama düzeni için son derece faydalı olan Kullanıcı arabiriminde (UI) nasıl sunulmasını istediğinizi bilgilendirmesini sağlar. Daha fazla bilgi için bkz. ekli özelliklere genel bakış.
Türetilmiş Panel öğeleri
Birçok nesne öğesinden türetilir Panel , ancak bunların hepsi kök Düzen sağlayıcıları olarak kullanılmak üzere tasarlanmamıştır. CanvasDockPanelGridStackPanelVirtualizingStackPanelWrapPanel Özellikle uygulama kullanıcı arabirimi oluşturmak için tasarlanan altı tanımlanmış Panel sınıfı (,,,,, ve) vardır.
Her panel öğesi, aşağıdaki tabloda görüldüğü gibi kendi özel işlevselliğini Kapsüller.
| Öğe Adı | UI paneli? | Açıklama |
|---|---|---|
| Canvas | Evet | Alt öğeleri alana göreli olarak açıkça konumlandırabileceğiniz bir alan tanımlar Canvas . |
| DockPanel | Yes | Alt öğeleri yatay veya dikey olarak birbirlerine göre düzenleyebileceğiniz bir alan tanımlar. |
| Grid | Yes | Sütun ve satırlardan oluşan esnek bir kılavuz alanını tanımlar. Öğesinin alt öğeleri Grid , özelliği kullanılarak tam olarak konumlandırılmış olabilir Margin . |
| StackPanel | Yes | Alt öğeleri yatay veya dikey olarak yönelimli tek bir satıra yerleştirir. |
| TabPanel | Hayır | İçindeki sekme düğmelerinin yerleşimini işler TabControl . |
| ToolBarOverflowPanel | Hayır | Bir denetim içindeki içeriği düzenler ToolBar . |
| UniformGrid | Hayır | UniformGrid Tüm eşit hücre boyutlarına sahip bir kılavuzdaki alt öğeleri düzenlemek için kullanılır. |
| VirtualizingPanel | Hayır | , Alt öğelerini "sanallaştırmaya" yardımcı olan panolar için bir temel sınıf sağlar. |
| VirtualizingStackPanel | Yes | İçeriği yatay veya dikey olarak tek bir satıra göre düzenler ve sanallaştırır. |
| WrapPanel | Yes | WrapPanel Sol taraftaki alt öğeleri, kapsayan kutunun kenarındaki bir sonraki satıra kadar olan sıralı konumda konumlandırır. Sonraki sıralama, özelliğin değerine bağlı olarak yukarıdan aşağıya veya sağdan sola doğru bir şekilde gerçekleşir Orientation . |
Kullanıcı arabirimi bölmeleri
WPF 'de,,,,, ve Kullanıcı arabirimi senaryolarını destekleyecek en iyi duruma getirilmiş altı panel sınıfı vardır: Canvas , DockPanel ,, GridStackPanel , VirtualizingStackPanel ve WrapPanel . Bu panel öğelerinin çoğu uygulama için kullanımı kolay, çok yönlü ve genişletilebilir.
Her türetilmiş Panel öğe boyutlandırma kısıtlamalarını farklı şekilde değerlendirir. PanelYatay veya dikey yöndeki bir tanıtıcı kısıtlamalarının düzeni nasıl daha öngörülebilir hale getirebilir anlamak.
| Panel adı | x boyutlu | y-Dimension |
|---|---|---|
| Canvas | İçerikle kısıtlanmış | İçerikle kısıtlanmış |
| DockPanel | Kısıtlanmış | Kısıtlanmış |
| StackPanel (Dikey yön) | Kısıtlanmış | İçerikle kısıtlanmış |
| StackPanel (Yatay yönlendirme) | İçerikle kısıtlanmış | Kısıtlanmış |
| Grid | Kısıtlanmış | , Auto Satırlar ve sütunlar için uygulanacak durumlar dışında kısıtlanmış |
| WrapPanel | İçerikle kısıtlanmış | İçerikle kısıtlanmış |
Bu öğelerin her birine yönelik daha ayrıntılı açıklamalar ve kullanım örnekleri aşağıda bulabilirsiniz.
Tuval
CanvasÖğesi, mutlak Canvas ve y koordinatlarına göre içerik konumlandırmasını sağlar. Öğeler benzersiz bir konumda çizilebilirler; ya da öğeler aynı koordinatları kapladıklarında, İşaretlemede görünme sırası öğelerin çizildiği sırayı belirler.
Canvas , herhangi birinin en esnek düzen desteğini sağlar Panel . Height ve Width özellikleri, tuvalin alanını tanımlamak için kullanılır ve içindeki öğeler, üst öğenin alanına göre mutlak koordinatları atanır Canvas . Dört Ekli Özellik, Canvas.Left , Canvas.Top , Canvas.Right ve Canvas.Bottom , içindeki nesne yerleşimi üzerinde ince denetime izin verir Canvas , böylece Geliştirici öğeleri ekranda hassas bir şekilde konumlandırın ve düzenleyebilir.
Tuval Içindeki Cliptosınırlara
Canvas , kendi tanımlı ve dışındaki koordinatlara bile, alt öğeleri ekranda herhangi bir konumda konumlandırabilirsiniz HeightWidth . Ayrıca, Canvas bu, üstlerinin boyutundan etkilenmez. Sonuç olarak, bir alt öğenin üst öğesinin sınırlayıcı dikdörtgeninin dışında diğer öğelerin üzerine çizilene Canvas mümkündür. varsayılan davranışı, Canvas alt öğenin üst sınırlarının dışına çizilene izin Canvas vermektir. Bu davranış istenmeyen bir davranışsa ClipToBounds özelliği olarak true belirlenebilir. Bu, Canvas kendi boyutuna göre kırpmaya neden olur. Canvas alt öğenin sınırlarının dışında çizilene izin veren tek düzen öğesidir.
Bu davranış Genişlik Özellikleri Karşılaştırma Örneği'ne grafiksel olarak yansıtıldı.
Tuval Tanımlama ve Kullanma
Bir Canvas örneği yalnızca bir Extensible Application Markup Language (XAML) veya kod kullanılarak örnek olabilir. Aşağıdaki örnekte, içeriği kesinlikle konumlandırmak Canvas için nasıl kullanabileceğiniz gösterildi. Bu kod üç 100 piksel kare üretir. İlk kare kırmızıdır ve sol üst(x, y) konumu (0, 0) olarak belirtilir. İkinci kare yeşildir ve sol üst konumu (100, 100), ilk karenin hemen altında ve sağ kısmındadır. Üçüncü kare mavidir ve sol üst konumu (50, 50) olduğu için birinci karenin sağ alt kadranını ve ikinci karenin sol üst kadranını kapsar. Üçüncü kare en son çıkarılana kadar diğer iki karenin üzerinde görünür; diğer bir ifadeyle çakışan kısımlar, üçüncü kutunun rengini varsayır.
// Create the application's main window
mainWindow = new Window ();
mainWindow.Title = "Canvas Sample";
// Create the Canvas
myParentCanvas = new Canvas();
myParentCanvas.Width = 400;
myParentCanvas.Height = 400;
// Define child Canvas elements
myCanvas1 = new Canvas();
myCanvas1.Background = Brushes.Red;
myCanvas1.Height = 100;
myCanvas1.Width = 100;
Canvas.SetTop(myCanvas1, 0);
Canvas.SetLeft(myCanvas1, 0);
myCanvas2 = new Canvas();
myCanvas2.Background = Brushes.Green;
myCanvas2.Height = 100;
myCanvas2.Width = 100;
Canvas.SetTop(myCanvas2, 100);
Canvas.SetLeft(myCanvas2, 100);
myCanvas3 = new Canvas();
myCanvas3.Background = Brushes.Blue;
myCanvas3.Height = 100;
myCanvas3.Width = 100;
Canvas.SetTop(myCanvas3, 50);
Canvas.SetLeft(myCanvas3, 50);
// Add child elements to the Canvas' Children collection
myParentCanvas.Children.Add(myCanvas1);
myParentCanvas.Children.Add(myCanvas2);
myParentCanvas.Children.Add(myCanvas3);
// Add the parent Canvas as the Content of the Window Object
mainWindow.Content = myParentCanvas;
mainWindow.Show ();
WindowTitle = "Canvas Sample"
'Create a Canvas as the root Panel
Dim myParentCanvas As New Canvas()
myParentCanvas.Width = 400
myParentCanvas.Height = 400
' Define child Canvas elements
Dim myCanvas1 As New Canvas()
myCanvas1.Background = Brushes.Red
myCanvas1.Height = 100
myCanvas1.Width = 100
Canvas.SetTop(myCanvas1, 0)
Canvas.SetLeft(myCanvas1, 0)
Dim myCanvas2 As New Canvas()
myCanvas2.Background = Brushes.Green
myCanvas2.Height = 100
myCanvas2.Width = 100
Canvas.SetTop(myCanvas2, 100)
Canvas.SetLeft(myCanvas2, 100)
Dim myCanvas3 As New Canvas()
myCanvas3.Background = Brushes.Blue
myCanvas3.Height = 100
myCanvas3.Width = 100
Canvas.SetTop(myCanvas3, 50)
Canvas.SetLeft(myCanvas3, 50)
' Add child elements to the Canvas' Children collection
myParentCanvas.Children.Add(myCanvas1)
myParentCanvas.Children.Add(myCanvas2)
myParentCanvas.Children.Add(myCanvas3)
' Add the parent Canvas as the Content of the Window Object
Me.Content = myParentCanvas
<Page WindowTitle="Canvas Sample" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
<Canvas Height="400" Width="400">
<Canvas Height="100" Width="100" Top="0" Left="0" Background="Red"/>
<Canvas Height="100" Width="100" Top="100" Left="100" Background="Green"/>
<Canvas Height="100" Width="100" Top="50" Left="50" Background="Blue"/>
</Canvas>
</Page>
Derlenmiş uygulama, aşağıdakine benzer yeni bir kullanıcı arabirimi sağlar.

DockPanel
öğesi, DockPanel bir DockPanel.Dock kapsayıcının uçlarında içerik konumlandırmak için alt içerik öğelerinde ayar olarak eklenen özelliği kullanır. veya DockPanel.Dock olarak TopBottom ayarlanırsa, alt öğeleri birbirlerinin üzerine veya altına konumlar. veya DockPanel.Dock olarak LeftRight ayarlanırsa, alt öğeleri birbirlerinin sol veya sağ alt öğelerine konumlar. LastChildFillözelliği, öğesinin alt öğesi olarak eklenen son öğenin konumunu DockPanel belirler.
düğme kümesi DockPanel gibi bir grup ilgili denetimi konumlandırmak için kullanabilirsiniz. Alternatif olarak, Bunu kullanarak Microsoft Outlook'de bulunana benzer bir "kaydırmış" kullanıcı arabirimi oluşturabilirsiniz.
İçerik Olarak Boyutlandırma
ve Height özellikleri Width belirtilmezse, DockPanel içeriğine göre boyutlar. Boyut, alt öğelerinin boyutunu karşılamak için artabilir veya azalacaktır. Ancak, bu özellikler belirtilmişse ve artık bir sonraki belirtilen alt öğe için yer yoksa, bu alt öğeyi veya sonraki alt öğeleri görüntülemez ve sonraki alt DockPanel öğeleri ölçmez.
LastChildFill
Varsayılan olarak, bir öğenin DockPanel son alt öğesi kalan, taşınmamış alanı "doldurur". Bu davranış isten yoksa özelliğini LastChildFill olarak false ayarlayın.
DockPanel Tanımlama ve Kullanma
Aşağıdaki örnek, bir kullanarak alan bölümlemeyi DockPanel gösteriyor. Üst Border öğenin alt öğeleri olarak beş öğe DockPanel eklenir. Her biri, bölümleme alanı için farklı bir DockPanel konumlandırma özelliği kullanır. Son öğe, kalan, taşınmamış alanı "doldurur".
// Create the application's main window
mainWindow = gcnew Window();
mainWindow->Title = "DockPanel Sample";
// Create the DockPanel
DockPanel^ myDockPanel = gcnew DockPanel();
myDockPanel->LastChildFill = true;
// Define the child content
Border^ myBorder1 = gcnew Border();
myBorder1->Height = 25;
myBorder1->Background = Brushes::SkyBlue;
myBorder1->BorderBrush = Brushes::Black;
myBorder1->BorderThickness = Thickness(1);
DockPanel::SetDock(myBorder1, Dock::Top);
TextBlock^ myTextBlock1 = gcnew TextBlock();
myTextBlock1->Foreground = Brushes::Black;
myTextBlock1->Text = "Dock = Top";
myBorder1->Child = myTextBlock1;
Border^ myBorder2 = gcnew Border();
myBorder2->Height = 25;
myBorder2->Background = Brushes::SkyBlue;
myBorder2->BorderBrush = Brushes::Black;
myBorder2->BorderThickness = Thickness(1);
DockPanel::SetDock(myBorder2, Dock::Top);
TextBlock^ myTextBlock2 = gcnew TextBlock();
myTextBlock2->Foreground = Brushes::Black;
myTextBlock2->Text = "Dock = Top";
myBorder2->Child = myTextBlock2;
Border^ myBorder3 = gcnew Border();
myBorder3->Height = 25;
myBorder3->Background = Brushes::LemonChiffon;
myBorder3->BorderBrush = Brushes::Black;
myBorder3->BorderThickness = Thickness(1);
DockPanel::SetDock(myBorder3, Dock::Bottom);
TextBlock^ myTextBlock3 = gcnew TextBlock();
myTextBlock3->Foreground = Brushes::Black;
myTextBlock3->Text = "Dock = Bottom";
myBorder3->Child = myTextBlock3;
Border^ myBorder4 = gcnew Border();
myBorder4->Width = 200;
myBorder4->Background = Brushes::PaleGreen;
myBorder4->BorderBrush = Brushes::Black;
myBorder4->BorderThickness = Thickness(1);
DockPanel::SetDock(myBorder4, Dock::Left);
TextBlock^ myTextBlock4 = gcnew TextBlock();
myTextBlock4->Foreground = Brushes::Black;
myTextBlock4->Text = "Dock = Left";
myBorder4->Child = myTextBlock4;
Border^ myBorder5 = gcnew Border();
myBorder5->Background = Brushes::White;
myBorder5->BorderBrush = Brushes::Black;
myBorder5->BorderThickness = Thickness(1);
TextBlock^ myTextBlock5 = gcnew TextBlock();
myTextBlock5->Foreground = Brushes::Black;
myTextBlock5->Text = "This content will Fill the remaining space";
myBorder5->Child = myTextBlock5;
// Add child elements to the DockPanel Children collection
myDockPanel->Children->Add(myBorder1);
myDockPanel->Children->Add(myBorder2);
myDockPanel->Children->Add(myBorder3);
myDockPanel->Children->Add(myBorder4);
myDockPanel->Children->Add(myBorder5);
// Add the parent Canvas as the Content of the Window Object
mainWindow->Content = myDockPanel;
mainWindow->Show();
// Create the application's main window
mainWindow = new Window ();
mainWindow.Title = "DockPanel Sample";
// Create the DockPanel
DockPanel myDockPanel = new DockPanel();
myDockPanel.LastChildFill = true;
// Define the child content
Border myBorder1 = new Border();
myBorder1.Height = 25;
myBorder1.Background = Brushes.SkyBlue;
myBorder1.BorderBrush = Brushes.Black;
myBorder1.BorderThickness = new Thickness(1);
DockPanel.SetDock(myBorder1, Dock.Top);
TextBlock myTextBlock1 = new TextBlock();
myTextBlock1.Foreground = Brushes.Black;
myTextBlock1.Text = "Dock = Top";
myBorder1.Child = myTextBlock1;
Border myBorder2 = new Border();
myBorder2.Height = 25;
myBorder2.Background = Brushes.SkyBlue;
myBorder2.BorderBrush = Brushes.Black;
myBorder2.BorderThickness = new Thickness(1);
DockPanel.SetDock(myBorder2, Dock.Top);
TextBlock myTextBlock2 = new TextBlock();
myTextBlock2.Foreground = Brushes.Black;
myTextBlock2.Text = "Dock = Top";
myBorder2.Child = myTextBlock2;
Border myBorder3 = new Border();
myBorder3.Height = 25;
myBorder3.Background = Brushes.LemonChiffon;
myBorder3.BorderBrush = Brushes.Black;
myBorder3.BorderThickness = new Thickness(1);
DockPanel.SetDock(myBorder3, Dock.Bottom);
TextBlock myTextBlock3 = new TextBlock();
myTextBlock3.Foreground = Brushes.Black;
myTextBlock3.Text = "Dock = Bottom";
myBorder3.Child = myTextBlock3;
Border myBorder4 = new Border();
myBorder4.Width = 200;
myBorder4.Background = Brushes.PaleGreen;
myBorder4.BorderBrush = Brushes.Black;
myBorder4.BorderThickness = new Thickness(1);
DockPanel.SetDock(myBorder4, Dock.Left);
TextBlock myTextBlock4 = new TextBlock();
myTextBlock4.Foreground = Brushes.Black;
myTextBlock4.Text = "Dock = Left";
myBorder4.Child = myTextBlock4;
Border myBorder5 = new Border();
myBorder5.Background = Brushes.White;
myBorder5.BorderBrush = Brushes.Black;
myBorder5.BorderThickness = new Thickness(1);
TextBlock myTextBlock5 = new TextBlock();
myTextBlock5.Foreground = Brushes.Black;
myTextBlock5.Text = "This content will Fill the remaining space";
myBorder5.Child = myTextBlock5;
// Add child elements to the DockPanel Children collection
myDockPanel.Children.Add(myBorder1);
myDockPanel.Children.Add(myBorder2);
myDockPanel.Children.Add(myBorder3);
myDockPanel.Children.Add(myBorder4);
myDockPanel.Children.Add(myBorder5);
// Add the parent Canvas as the Content of the Window Object
mainWindow.Content = myDockPanel;
mainWindow.Show ();
WindowTitle = "DockPanel Sample"
'Create a DockPanel as the root Panel
Dim myDockPanel As New DockPanel()
myDockPanel.LastChildFill = True
' Define the child content
Dim myBorder1 As New Border()
myBorder1.Height = 25
myBorder1.Background = Brushes.SkyBlue
myBorder1.BorderBrush = Brushes.Black
myBorder1.BorderThickness = New Thickness(1)
DockPanel.SetDock(myBorder1, Dock.Top)
Dim myTextBlock1 As New TextBlock()
myTextBlock1.Foreground = Brushes.Black
myTextBlock1.Text = "Dock = Top"
myBorder1.Child = myTextBlock1
Dim myBorder2 As New Border()
myBorder2.Height = 25
myBorder2.Background = Brushes.SkyBlue
myBorder2.BorderBrush = Brushes.Black
myBorder2.BorderThickness = New Thickness(1)
DockPanel.SetDock(myBorder2, Dock.Top)
Dim myTextBlock2 As New TextBlock()
myTextBlock2.Foreground = Brushes.Black
myTextBlock2.Text = "Dock = Top"
myBorder2.Child = myTextBlock2
Dim myBorder3 As New Border()
myBorder3.Height = 25
myBorder3.Background = Brushes.LemonChiffon
myBorder3.BorderBrush = Brushes.Black
myBorder3.BorderThickness = New Thickness(1)
DockPanel.SetDock(myBorder3, Dock.Bottom)
Dim myTextBlock3 As New TextBlock()
myTextBlock3.Foreground = Brushes.Black
myTextBlock3.Text = "Dock = Bottom"
myBorder3.Child = myTextBlock3
Dim myBorder4 As New Border()
myBorder4.Width = 200
myBorder4.Background = Brushes.PaleGreen
myBorder4.BorderBrush = Brushes.Black
myBorder4.BorderThickness = New Thickness(1)
DockPanel.SetDock(myBorder4, Dock.Left)
Dim myTextBlock4 As New TextBlock()
myTextBlock4.Foreground = Brushes.Black
myTextBlock4.Text = "Dock = Left"
myBorder4.Child = myTextBlock4
Dim myBorder5 As New Border()
myBorder5.Background = Brushes.White
myBorder5.BorderBrush = Brushes.Black
myBorder5.BorderThickness = New Thickness(1)
Dim myTextBlock5 As New TextBlock()
myTextBlock5.Foreground = Brushes.Black
myTextBlock5.Text = "This content will Fill the remaining space"
myBorder5.Child = myTextBlock5
' Add child elements to the DockPanel Children collection
myDockPanel.Children.Add(myBorder1)
myDockPanel.Children.Add(myBorder2)
myDockPanel.Children.Add(myBorder3)
myDockPanel.Children.Add(myBorder4)
myDockPanel.Children.Add(myBorder5)
Me.Content = myDockPanel
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" WindowTitle="DockPanel Sample">
<DockPanel LastChildFill="True">
<Border Height="25" Background="SkyBlue" BorderBrush="Black" BorderThickness="1" DockPanel.Dock="Top">
<TextBlock Foreground="Black">Dock = "Top"</TextBlock>
</Border>
<Border Height="25" Background="SkyBlue" BorderBrush="Black" BorderThickness="1" DockPanel.Dock="Top">
<TextBlock Foreground="Black">Dock = "Top"</TextBlock>
</Border>
<Border Height="25" Background="LemonChiffon" BorderBrush="Black" BorderThickness="1" DockPanel.Dock="Bottom">
<TextBlock Foreground="Black">Dock = "Bottom"</TextBlock>
</Border>
<Border Width="200" Background="PaleGreen" BorderBrush="Black" BorderThickness="1" DockPanel.Dock="Left">
<TextBlock Foreground="Black">Dock = "Left"</TextBlock>
</Border>
<Border Background="White" BorderBrush="Black" BorderThickness="1">
<TextBlock Foreground="Black">This content will "Fill" the remaining space</TextBlock>
</Border>
</DockPanel>
</Page>
Derlenmiş uygulama, aşağıdakine benzer yeni bir kullanıcı arabirimi sağlar.

Kılavuz
Gridöğesi, mutlak konumlandırma ve tablosal veri denetimi işlevlerini bir birler. , Grid öğeleri kolayca konumlandırmaya ve stile sahip bir öğeye olanak sağlar. Grid esnek satır ve sütun gruplamaları tanımlamaya olanak sağlar ve hatta boyutlandırma bilgilerini birden çok öğe arasında paylaşmak için bir mekanizma Grid sağlar.
Kılavuz ile Tablodan Farklı
Table ve Grid bazı yaygın işlevleri paylaşır, ancak her biri farklı senaryolar için en uygun olandır. , Table akış içeriği içinde kullanım için tasarlanmıştır (akış içeriği hakkında Flow için Table Belgeye Genel Bakış). Kılavuzlar formların içinde (akış içeriğinin dışında herhangi bir yerde) en iyi şekilde kullanılır. içinde, sayfalama, sütun yeniden akışı ve içerik seçimi gibi akış içeriği davranışlarını destekler, FlowDocumentTable ancak Grid desteklemez. Öte yandan, satıra ve sütun dizinine göre öğe ekler gibi birçok nedenden dolayı bir dışında en iyi şekilde GridFlowDocumentGridTable kullanılır. öğesi, alt içeriğin katmanlamasına olanak sağlar ve tek bir "hücrede" birden fazla öğenin varolmalarına GridTable olanak sağlar. Katmanlamayı desteklemez. bir alt öğeleri Grid kesinlikle kendi "hücre" sınırlarının alanına göre konum olabilir. Table bu özelliği desteklemez. Son olarak, Grid bir daha Table hafiftir.
Sütunların ve Satırların Boyutlandırma Davranışı
içinde tanımlanan sütunlar ve Grid satırlar, kalan Star alanı orantılı olarak dağıtmak için boyutlandırmadan faydalanır. Bir satır veya sütunun Yükseklik veya Genişlik olarak seçildiğinde, bu sütun veya satır kalan kullanılabilir alan Star için ağırlıklı bir oran alır. Bu, bir sütun veya satırdaki içeriğin boyutuna göre alanı eşit olarak dağıtacak olan ile Auto karşıtlığıdır. Bu değer, veya olarak * ifade 2* Extensible Application Markup Language (XAML). İlk durumda, satır veya sütun kullanılabilir alanı bir kez alır, ikinci durumda iki kez ve bu şekilde devam etti. Alanı ve değeriyle orantılı olarak dağıtmak için bu tekniği birleştirerek düzen alanı, ekran alanı HorizontalAlignmentVerticalAlignmentStretch yüzdesine göre bölümleme mümkündür. Grid , alanı bu şekilde dağıtan tek düzen panelidir.
Kılavuz Tanımlama ve Kullanma
Aşağıdaki örnekte, kullanıcı arabiriminde bulunan Çalıştır iletişim kutusunda bulunana benzer bir kullanıcı arabiriminin nasıl Windows Başlat menüsü.
// Create the Grid.
grid1 = new Grid ();
grid1.Background = Brushes.Gainsboro;
grid1.HorizontalAlignment = HorizontalAlignment.Left;
grid1.VerticalAlignment = VerticalAlignment.Top;
grid1.ShowGridLines = true;
grid1.Width = 425;
grid1.Height = 165;
// Define the Columns.
colDef1 = new ColumnDefinition();
colDef1.Width = new GridLength(1, GridUnitType.Auto);
colDef2 = new ColumnDefinition();
colDef2.Width = new GridLength(1, GridUnitType.Star);
colDef3 = new ColumnDefinition();
colDef3.Width = new GridLength(1, GridUnitType.Star);
colDef4 = new ColumnDefinition();
colDef4.Width = new GridLength(1, GridUnitType.Star);
colDef5 = new ColumnDefinition();
colDef5.Width = new GridLength(1, GridUnitType.Star);
grid1.ColumnDefinitions.Add(colDef1);
grid1.ColumnDefinitions.Add(colDef2);
grid1.ColumnDefinitions.Add(colDef3);
grid1.ColumnDefinitions.Add(colDef4);
grid1.ColumnDefinitions.Add(colDef5);
// Define the Rows.
rowDef1 = new RowDefinition();
rowDef1.Height = new GridLength(1, GridUnitType.Auto);
rowDef2 = new RowDefinition();
rowDef2.Height = new GridLength(1, GridUnitType.Auto);
rowDef3 = new RowDefinition();
rowDef3.Height = new GridLength(1, GridUnitType.Star);
rowDef4 = new RowDefinition();
rowDef4.Height = new GridLength(1, GridUnitType.Auto);
grid1.RowDefinitions.Add(rowDef1);
grid1.RowDefinitions.Add(rowDef2);
grid1.RowDefinitions.Add(rowDef3);
grid1.RowDefinitions.Add(rowDef4);
// Add the Image.
img1 = new Image();
img1.Source = new System.Windows.Media.Imaging.BitmapImage(new Uri("runicon.png", UriKind.Relative));
Grid.SetRow(img1, 0);
Grid.SetColumn(img1, 0);
// Add the main application dialog.
txt1 = new TextBlock();
txt1.Text = "Type the name of a program, folder, document, or Internet resource, and Windows will open it for you.";
txt1.TextWrapping = TextWrapping.Wrap;
Grid.SetColumnSpan(txt1, 4);
Grid.SetRow(txt1, 0);
Grid.SetColumn(txt1, 1);
// Add the second text cell to the Grid.
txt2 = new TextBlock();
txt2.Text = "Open:";
Grid.SetRow(txt2, 1);
Grid.SetColumn(txt2, 0);
// Add the TextBox control.
tb1 = new TextBox();
Grid.SetRow(tb1, 1);
Grid.SetColumn(tb1, 1);
Grid.SetColumnSpan(tb1, 5);
// Add the buttons.
button1 = new Button();
button2 = new Button();
button3 = new Button();
button1.Content = "OK";
button2.Content = "Cancel";
button3.Content = "Browse ...";
Grid.SetRow(button1, 3);
Grid.SetColumn(button1, 2);
button1.Margin = new Thickness(10, 0, 10, 15);
button2.Margin = new Thickness(10, 0, 10, 15);
button3.Margin = new Thickness(10, 0, 10, 15);
Grid.SetRow(button2, 3);
Grid.SetColumn(button2, 3);
Grid.SetRow(button3, 3);
Grid.SetColumn(button3, 4);
grid1.Children.Add(img1);
grid1.Children.Add(txt1);
grid1.Children.Add(txt2);
grid1.Children.Add(tb1);
grid1.Children.Add(button1);
grid1.Children.Add(button2);
grid1.Children.Add(button3);
mainWindow.Content = grid1;
'Create a Grid as the root Panel element.
Dim myGrid As New Grid()
myGrid.Height = 165
myGrid.Width = 425
myGrid.Background = Brushes.Gainsboro
myGrid.ShowGridLines = True
myGrid.HorizontalAlignment = Windows.HorizontalAlignment.Left
myGrid.VerticalAlignment = Windows.VerticalAlignment.Top
' Define and Add the Rows and Columns.
Dim colDef1 As New ColumnDefinition
colDef1.Width = New GridLength(1, GridUnitType.Auto)
Dim colDef2 As New ColumnDefinition
colDef2.Width = New GridLength(1, GridUnitType.Star)
Dim colDef3 As New ColumnDefinition
colDef3.Width = New GridLength(1, GridUnitType.Star)
Dim colDef4 As New ColumnDefinition
colDef4.Width = New GridLength(1, GridUnitType.Star)
Dim colDef5 As New ColumnDefinition
colDef5.Width = New GridLength(1, GridUnitType.Star)
myGrid.ColumnDefinitions.Add(colDef1)
myGrid.ColumnDefinitions.Add(colDef2)
myGrid.ColumnDefinitions.Add(colDef3)
myGrid.ColumnDefinitions.Add(colDef4)
myGrid.ColumnDefinitions.Add(colDef5)
Dim rowDef1 As New RowDefinition
rowDef1.Height = New GridLength(1, GridUnitType.Auto)
Dim rowDef2 As New RowDefinition
rowDef2.Height = New GridLength(1, GridUnitType.Auto)
Dim rowDef3 As New Controls.RowDefinition
rowDef3.Height = New GridLength(1, GridUnitType.Star)
Dim rowDef4 As New RowDefinition
rowDef4.Height = New GridLength(1, GridUnitType.Auto)
myGrid.RowDefinitions.Add(rowDef1)
myGrid.RowDefinitions.Add(rowDef2)
myGrid.RowDefinitions.Add(rowDef3)
myGrid.RowDefinitions.Add(rowDef4)
' Add the Image.
Dim img1 As New Image
img1.Source = New System.Windows.Media.Imaging.BitmapImage(New Uri("runicon.png", UriKind.Relative))
Grid.SetRow(img1, 0)
Grid.SetColumn(img1, 0)
myGrid.Children.Add(img1)
' Add the main application dialog.
Dim txt1 As New TextBlock
txt1.Text = "Type the name of a program, document, or Internet resource, and Windows will open it for you."
txt1.TextWrapping = TextWrapping.Wrap
Grid.SetColumnSpan(txt1, 4)
Grid.SetRow(txt1, 0)
Grid.SetColumn(txt1, 1)
myGrid.Children.Add(txt1)
' Add the second TextBlock Cell to the Grid.
Dim txt2 As New TextBlock
txt2.Text = "Open:"
Grid.SetRow(txt2, 1)
Grid.SetColumn(txt2, 0)
myGrid.Children.Add(txt2)
' Add the TextBox control.
Dim tb1 As New TextBox
Grid.SetRow(tb1, 1)
Grid.SetColumn(tb1, 1)
Grid.SetColumnSpan(tb1, 5)
myGrid.Children.Add(tb1)
' Add the Button controls.
Dim button1 As New Button
Dim button2 As New Button
Dim button3 As New Button
button1.Content = "OK"
button1.Margin = New Thickness(10, 0, 10, 15)
button2.Content = "Cancel"
button2.Margin = New Thickness(10, 0, 10, 15)
button3.Content = "Browse ..."
button3.Margin = New Thickness(10, 0, 10, 15)
Grid.SetRow(button1, 3)
Grid.SetColumn(button1, 2)
Grid.SetRow(button2, 3)
Grid.SetColumn(button2, 3)
Grid.SetRow(button3, 3)
Grid.SetColumn(button3, 4)
myGrid.Children.Add(button1)
myGrid.Children.Add(button2)
myGrid.Children.Add(button3)
Me.Content = myGrid
Derlenmiş uygulama, aşağıdakine benzer yeni bir kullanıcı arabirimi sağlar.

StackPanel
, StackPanel öğeleri atanmış bir yönde "yığma" sağlar. Varsayılan yığın yönü dikeydir. özelliği, Orientation içerik akışını kontrol etmek için kullanılabilir.
StackPanel ve DockPanel karşılaştırması
Alt DockPanel öğeleri de "yığabilirsiniz" ve bazı kullanım DockPanelStackPanel senaryolarında benzer sonuçlar üretmez. Örneğin, alt öğelerin sırası bir içinde değil, içinde DockPanel bunların boyutunu StackPanel etkileyebilir. Bunun StackPanel nedeni, yığma yönünde ölçülerken PositiveInfinity yalnızca kullanılabilir boyutu DockPanel ölçür.
Aşağıdaki örnek, bu önemli farkı gösteriyor.
// Create the application's main window
mainWindow = gcnew Window();
mainWindow->Title = "StackPanel vs. DockPanel";
// Add root Grid
myGrid = gcnew Grid();
myGrid->Width = 175;
myGrid->Height = 150;
RowDefinition^ myRowDef1 = gcnew RowDefinition();
RowDefinition^ myRowDef2 = gcnew RowDefinition();
myGrid->RowDefinitions->Add(myRowDef1);
myGrid->RowDefinitions->Add(myRowDef2);
// Define the DockPanel
myDockPanel = gcnew DockPanel();
Grid::SetRow(myDockPanel, 0);
//Define an Image and Source
Image^ myImage = gcnew Image();
BitmapImage^ bi = gcnew BitmapImage();
bi->BeginInit();
bi->UriSource = gcnew System::Uri("smiley_stackpanel.png", UriKind::Relative);
bi->EndInit();
myImage->Source = bi;
Image^ myImage2 = gcnew Image();
BitmapImage^ bi2 = gcnew BitmapImage();
bi2->BeginInit();
bi2->UriSource = gcnew System::Uri("smiley_stackpanel.png", UriKind::Relative);
bi2->EndInit();
myImage2->Source = bi2;
Image^ myImage3 = gcnew Image();
BitmapImage^ bi3 = gcnew BitmapImage();
bi3->BeginInit();
bi3->UriSource = gcnew System::Uri("smiley_stackpanel.PNG", UriKind::Relative);
bi3->EndInit();
myImage3->Stretch = Stretch::Fill;
myImage3->Source = bi3;
// Add the images to the parent DockPanel
myDockPanel->Children->Add(myImage);
myDockPanel->Children->Add(myImage2);
myDockPanel->Children->Add(myImage3);
//Define a StackPanel
myStackPanel = gcnew StackPanel();
myStackPanel->Orientation = Orientation::Horizontal;
Grid::SetRow(myStackPanel, 1);
Image^ myImage4 = gcnew Image();
BitmapImage^ bi4 = gcnew BitmapImage();
bi4->BeginInit();
bi4->UriSource = gcnew System::Uri("smiley_stackpanel.png", UriKind::Relative);
bi4->EndInit();
myImage4->Source = bi4;
Image^ myImage5 = gcnew Image();
BitmapImage^ bi5 = gcnew BitmapImage();
bi5->BeginInit();
bi5->UriSource = gcnew System::Uri("smiley_stackpanel.png", UriKind::Relative);
bi5->EndInit();
myImage5->Source = bi5;
Image^ myImage6 = gcnew Image();
BitmapImage^ bi6 = gcnew BitmapImage();
bi6->BeginInit();
bi6->UriSource = gcnew System::Uri("smiley_stackpanel.PNG", UriKind::Relative);
bi6->EndInit();
myImage6->Stretch = Stretch::Fill;
myImage6->Source = bi6;
// Add the images to the parent StackPanel
myStackPanel->Children->Add(myImage4);
myStackPanel->Children->Add(myImage5);
myStackPanel->Children->Add(myImage6);
// Add the layout panels as children of the Grid
myGrid->Children->Add(myDockPanel);
myGrid->Children->Add(myStackPanel);
// Add the Grid as the Content of the Parent Window Object
mainWindow->Content = myGrid;
mainWindow->Show();
// Create the application's main window
mainWindow = new Window ();
mainWindow.Title = "StackPanel vs. DockPanel";
// Add root Grid
myGrid = new Grid();
myGrid.Width = 175;
myGrid.Height = 150;
RowDefinition myRowDef1 = new RowDefinition();
RowDefinition myRowDef2 = new RowDefinition();
myGrid.RowDefinitions.Add(myRowDef1);
myGrid.RowDefinitions.Add(myRowDef2);
// Define the DockPanel
myDockPanel = new DockPanel();
Grid.SetRow(myDockPanel, 0);
//Define an Image and Source
Image myImage = new Image();
BitmapImage bi = new BitmapImage();
bi.BeginInit();
bi.UriSource = new Uri("smiley_stackpanel.png", UriKind.Relative);
bi.EndInit();
myImage.Source = bi;
Image myImage2 = new Image();
BitmapImage bi2 = new BitmapImage();
bi2.BeginInit();
bi2.UriSource = new Uri("smiley_stackpanel.png", UriKind.Relative);
bi2.EndInit();
myImage2.Source = bi2;
Image myImage3 = new Image();
BitmapImage bi3 = new BitmapImage();
bi3.BeginInit();
bi3.UriSource = new Uri("smiley_stackpanel.PNG", UriKind.Relative);
bi3.EndInit();
myImage3.Stretch = Stretch.Fill;
myImage3.Source = bi3;
// Add the images to the parent DockPanel
myDockPanel.Children.Add(myImage);
myDockPanel.Children.Add(myImage2);
myDockPanel.Children.Add(myImage3);
//Define a StackPanel
myStackPanel = new StackPanel();
myStackPanel.Orientation = Orientation.Horizontal;
Grid.SetRow(myStackPanel, 1);
Image myImage4 = new Image();
BitmapImage bi4 = new BitmapImage();
bi4.BeginInit();
bi4.UriSource = new Uri("smiley_stackpanel.png", UriKind.Relative);
bi4.EndInit();
myImage4.Source = bi4;
Image myImage5 = new Image();
BitmapImage bi5 = new BitmapImage();
bi5.BeginInit();
bi5.UriSource = new Uri("smiley_stackpanel.png", UriKind.Relative);
bi5.EndInit();
myImage5.Source = bi5;
Image myImage6 = new Image();
BitmapImage bi6 = new BitmapImage();
bi6.BeginInit();
bi6.UriSource = new Uri("smiley_stackpanel.PNG", UriKind.Relative);
bi6.EndInit();
myImage6.Stretch = Stretch.Fill;
myImage6.Source = bi6;
// Add the images to the parent StackPanel
myStackPanel.Children.Add(myImage4);
myStackPanel.Children.Add(myImage5);
myStackPanel.Children.Add(myImage6);
// Add the layout panels as children of the Grid
myGrid.Children.Add(myDockPanel);
myGrid.Children.Add(myStackPanel);
// Add the Grid as the Content of the Parent Window Object
mainWindow.Content = myGrid;
mainWindow.Show ();
'Add root Grid
Dim myGrid As New Grid
myGrid.Width = 175
myGrid.Height = 150
Dim myRowDef1 As New RowDefinition
Dim myRowDef2 As New RowDefinition
myGrid.RowDefinitions.Add(myRowDef1)
myGrid.RowDefinitions.Add(myRowDef2)
'Define the DockPanel
Dim myDockPanel As New DockPanel
Grid.SetRow(myDockPanel, 0)
'Define an Image and Source.
Dim myImage As New Image
Dim bi As New BitmapImage
bi.BeginInit()
bi.UriSource = New Uri("smiley_stackpanel.png", UriKind.Relative)
bi.EndInit()
myImage.Source = bi
Dim myImage2 As New Image
Dim bi2 As New BitmapImage
bi2.BeginInit()
bi2.UriSource = New Uri("smiley_stackpanel.png", UriKind.Relative)
bi2.EndInit()
myImage2.Source = bi2
Dim myImage3 As New Image
Dim bi3 As New BitmapImage
bi3.BeginInit()
bi3.UriSource = New Uri("smiley_stackpanel.PNG", UriKind.Relative)
bi3.EndInit()
myImage3.Stretch = Stretch.Fill
myImage3.Source = bi3
'Add the images to the parent DockPanel.
myDockPanel.Children.Add(myImage)
myDockPanel.Children.Add(myImage2)
myDockPanel.Children.Add(myImage3)
'Define a StackPanel.
Dim myStackPanel As New StackPanel
myStackPanel.Orientation = Orientation.Horizontal
Grid.SetRow(myStackPanel, 1)
Dim myImage4 As New Image
Dim bi4 As New BitmapImage
bi4.BeginInit()
bi4.UriSource = New Uri("smiley_stackpanel.png", UriKind.Relative)
bi4.EndInit()
myImage4.Source = bi4
Dim myImage5 As New Image
Dim bi5 As New BitmapImage
bi5.BeginInit()
bi5.UriSource = New Uri("smiley_stackpanel.png", UriKind.Relative)
bi5.EndInit()
myImage5.Source = bi5
Dim myImage6 As New Image
Dim bi6 As New BitmapImage
bi6.BeginInit()
bi6.UriSource = New Uri("smiley_stackpanel.PNG", UriKind.Relative)
bi6.EndInit()
myImage6.Stretch = Stretch.Fill
myImage6.Source = bi6
'Add the images to the parent StackPanel.
myStackPanel.Children.Add(myImage4)
myStackPanel.Children.Add(myImage5)
myStackPanel.Children.Add(myImage6)
'Add the layout panels as children of the Grid
myGrid.Children.Add(myDockPanel)
myGrid.Children.Add(myStackPanel)
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
WindowTitle="StackPanel vs. DockPanel">
<Grid Width="175" Height="150">
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<DockPanel Grid.Column="0" Grid.Row="0">
<Image Source="smiley_stackpanel.png" />
<Image Source="smiley_stackpanel.png" />
<Image Source="smiley_stackpanel.png" Stretch="Fill"/>
</DockPanel>
<StackPanel Grid.Column="0" Grid.Row="1" Orientation="Horizontal">
<Image Source="smiley_stackpanel.png" />
<Image Source="smiley_stackpanel.png" />
<Image Source="smiley_stackpanel.png" Stretch="Fill"/>
</StackPanel>
</Grid>
</Page>
İşleme davranışı arasındaki fark bu görüntüde görülebilir.

StackPanel Tanımlama ve Kullanma
Aşağıdaki örnek, dikey konuma bir dizi düğme oluşturmak için bir StackPanel kullanma hakkında bilgi sağlar. Yatay konumlandırma için özelliğini Orientation olarak Horizontal ayarlayın.
// Create the application's main window
mainWindow = new Window ();
mainWindow.Title = "StackPanel Sample";
// Define the StackPanel
myStackPanel = new StackPanel();
myStackPanel.HorizontalAlignment = HorizontalAlignment.Left;
myStackPanel.VerticalAlignment = VerticalAlignment.Top;
// Define child content
Button myButton1 = new Button();
myButton1.Content = "Button 1";
Button myButton2 = new Button();
myButton2.Content = "Button 2";
Button myButton3 = new Button();
myButton3.Content = "Button 3";
// Add child elements to the parent StackPanel
myStackPanel.Children.Add(myButton1);
myStackPanel.Children.Add(myButton2);
myStackPanel.Children.Add(myButton3);
// Add the StackPanel as the Content of the Parent Window Object
mainWindow.Content = myStackPanel;
mainWindow.Show ();
WindowTitle = "StackPanel Sample"
' Define the StackPanel
Dim myStackPanel As New StackPanel()
myStackPanel.HorizontalAlignment = Windows.HorizontalAlignment.Left
myStackPanel.VerticalAlignment = Windows.VerticalAlignment.Top
' Define child content
Dim myButton1 As New Button()
myButton1.Content = "Button 1"
Dim myButton2 As New Button()
myButton2.Content = "Button 2"
Dim myButton3 As New Button()
myButton3.Content = "Button 3"
' Add child elements to the parent StackPanel
myStackPanel.Children.Add(myButton1)
myStackPanel.Children.Add(myButton2)
myStackPanel.Children.Add(myButton3)
Me.Content = myStackPanel
Derlenmiş uygulama, aşağıdakine benzer yeni bir kullanıcı arabirimi sağlar.

VirtualizingStackPanel
WPF ayrıca veriye bağlı alt StackPanel içeriği otomatik olarak "sanallaştıran" öğenin bir varyasyonu sağlar. Bu bağlamda sanallaştırma sözcüğü, ekranda hangi öğelerin görünür olduğunu temel alarak daha fazla sayıda veri öğeden öğelerin bir alt kümesinin oluşturulduğu bir tekniği ifade eder. Hem bellek hem de işlemci açısından yoğun bir şekilde, ekranda aynı anda yalnızca birkaç kullanıcı arabirimi öğe olabilirken çok sayıda kullanıcı arabirimi öğe oluşturmak yoğundur. VirtualizingStackPanel (tarafından sağlanan işlevler VirtualizingPanel aracılığıyla) , görünür öğeleri hesaplar ve yalnızca görünür öğeler için öğeler oluşturmak için ItemContainerGeneratorItemsControl bir 'den (veya ListBoxListView gibi) ile çalışır.
öğesi, VirtualizingStackPanel gibi denetimler için öğeler ana bilgisayarı olarak otomatik olarak ListBox ayarlanır. Veriye bağlı koleksiyon barındırılırken, içerik bir sınırları içinde olduğu sürece içerik otomatik olarak sanallaştırılır. ScrollViewer Bu, çok sayıda alt öğe barındırıyorken performansı büyük ölçüde artırır.
Aşağıdaki işaretleme, bir öğe ana bilgisayarı olarak VirtualizingStackPanel kullanmayı gösterir. Sanallaştırmanın VirtualizingStackPanel.IsVirtualizingProperty gerçekleşmesi için eklenen true özelliğin (varsayılan) olarak ayarlanmış olması gerekir.
<StackPanel DataContext="{Binding Source={StaticResource Leagues}}">
<TextBlock Text="{Binding XPath=@name}" FontFamily="Arial" FontSize="18" Foreground="Black"/>
<ListBox VirtualizingStackPanel.IsVirtualizing="True"
ItemsSource="{Binding XPath=Team}"
ItemTemplate="{DynamicResource NameDataStyle}"/>
</StackPanel>
WrapPanel
WrapPanel , alt öğeleri soldan sağa doğru sıralı konuma konumlandırmak için kullanılır ve içeriği üst kapsayıcının kenarına ulaştığında bir sonraki satıra kırır. İçerik yatay veya dikey olarak yönlendirilebilirsiniz. WrapPanel , basit akış kullanıcı arabirimi (UI) senaryoları için kullanışlıdır. Tüm alt öğelerine tekdüdüz boyutlandırma uygulamak için de kullanılabilir.
Aşağıdaki örnekte kapsayıcılarının kenarına ulaşan denetimleri görüntülemek için bir oluşturma WrapPanelButton adımları gösterilir.
// Create the application's main window
mainWindow = gcnew System::Windows::Window();
mainWindow->Title = "WrapPanel Sample";
// Instantiate a new WrapPanel and set properties
myWrapPanel = gcnew WrapPanel();
myWrapPanel->Background = Brushes::Azure;
myWrapPanel->Orientation = Orientation::Horizontal;
myWrapPanel->ItemHeight = 25;
myWrapPanel->ItemWidth = 75;
myWrapPanel->Width = 150;
myWrapPanel->HorizontalAlignment = HorizontalAlignment::Left;
myWrapPanel->VerticalAlignment = VerticalAlignment::Top;
// Define 3 button elements. Each button is sized at width of 75, so the third button wraps to the next line.
btn1 = gcnew Button();
btn1->Content = "Button 1";
btn2 = gcnew Button();
btn2->Content = "Button 2";
btn3 = gcnew Button();
btn3->Content = "Button 3";
// Add the buttons to the parent WrapPanel using the Children.Add method.
myWrapPanel->Children->Add(btn1);
myWrapPanel->Children->Add(btn2);
myWrapPanel->Children->Add(btn3);
// Add the WrapPanel to the MainWindow as Content
mainWindow->Content = myWrapPanel;
mainWindow->Show();
// Create the application's main window
mainWindow = new System.Windows.Window();
mainWindow.Title = "WrapPanel Sample";
// Instantiate a new WrapPanel and set properties
myWrapPanel = new WrapPanel();
myWrapPanel.Background = System.Windows.Media.Brushes.Azure;
myWrapPanel.Orientation = Orientation.Horizontal;
myWrapPanel.Width = 200;
myWrapPanel.HorizontalAlignment = HorizontalAlignment.Left;
myWrapPanel.VerticalAlignment = VerticalAlignment.Top;
// Define 3 button elements. The last three buttons are sized at width
// of 75, so the forth button wraps to the next line.
btn1 = new Button();
btn1.Content = "Button 1";
btn1.Width = 200;
btn2 = new Button();
btn2.Content = "Button 2";
btn2.Width = 75;
btn3 = new Button();
btn3.Content = "Button 3";
btn3.Width = 75;
btn4 = new Button();
btn4.Content = "Button 4";
btn4.Width = 75;
// Add the buttons to the parent WrapPanel using the Children.Add method.
myWrapPanel.Children.Add(btn1);
myWrapPanel.Children.Add(btn2);
myWrapPanel.Children.Add(btn3);
myWrapPanel.Children.Add(btn4);
// Add the WrapPanel to the MainWindow as Content
mainWindow.Content = myWrapPanel;
mainWindow.Show();
WindowTitle = "WrapPanel Sample"
' Instantiate a new WrapPanel and set properties
Dim myWrapPanel As New WrapPanel()
myWrapPanel.Background = Brushes.Azure
myWrapPanel.Orientation = Orientation.Horizontal
myWrapPanel.Width = 200
myWrapPanel.HorizontalAlignment = Windows.HorizontalAlignment.Left
myWrapPanel.VerticalAlignment = Windows.VerticalAlignment.Top
' Define 3 button elements. The last three buttons are sized at width
' of 75, so the forth button wraps to the next line.
Dim btn1 As New Button()
btn1.Content = "Button 1"
btn1.Width = 200
Dim btn2 As New Button()
btn2.Content = "Button 2"
btn2.Width = 75
Dim btn3 As New Button()
btn3.Content = "Button 3"
btn3.Width = 75
Dim btn4 As New Button()
btn4.Content = "Button 4"
btn4.Width = 75
' Add the buttons to the parent WrapPanel using the Children.Add method.
myWrapPanel.Children.Add(btn1)
myWrapPanel.Children.Add(btn2)
myWrapPanel.Children.Add(btn3)
myWrapPanel.Children.Add(btn4)
' Add the WrapPanel to the Page as Content
Me.Content = myWrapPanel
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" WindowTitle="WrapPanel Sample">
<Border HorizontalAlignment="Left" VerticalAlignment="Top" BorderBrush="Black" BorderThickness="2">
<WrapPanel Background="LightBlue" Width="200" Height="100">
<Button Width="200">Button 1</Button>
<Button>Button 2</Button>
<Button>Button 3</Button>
<Button>Button 4</Button>
</WrapPanel>
</Border>
</Page>
Derlenmiş uygulama, aşağıdakine benzer yeni bir kullanıcı arabirimi sağlar.

İç İçe Panel Öğeleri
Panel öğeleri karmaşık düzenler üretmek için iç içe geçmiş olabilir. Bu durum, bir kullanıcı arabiriminin bir kısmı için ideal olduğu ancak kullanıcı arabiriminin farklı bir bölümünün ihtiyaçlarını karşılayamama durumlarında Panel çok yararlı olabilir.
Uygulamanın destekleyebiliyor olduğu iç içe yerleştirme miktarının pratik bir sınırı yoktur, ancak genellikle en iyisi, uygulamanızı yalnızca istediğiniz düzen için gerçekten gerekli olan panelleri kullanmak üzere sınırlamaktır. Çoğu durumda bir Grid öğe, düzen kapsayıcısı olarak esnekliğinden dolayı iç içe paneller yerine kullanılabilir. Bu, gereksiz öğeleri ağaçtan çıkararak uygulama performansınızı artırabilir.
Aşağıdaki örnekte, belirli bir düzen elde etmek için iç içe geçmiş öğelerden yararlanan bir Panel kullanıcı arabiriminin nasıl oluşturulacakları açıklandı. Bu durumda, kullanıcı arabirimi yapısı sağlamak için bir öğesi kullanılır ve iç içe öğeler, bir ve üst öğesi içinde tam olarak alt DockPanelStackPanel öğeleri GridCanvas konumlandırmak için DockPanel kullanılır.
// Define the DockPanel.
myDockPanel = new DockPanel();
// Add the Left Docked StackPanel
Border myBorder2 = new Border();
myBorder2.BorderThickness = new Thickness(1);
myBorder2.BorderBrush = Brushes.Black;
DockPanel.SetDock(myBorder2, Dock.Left);
StackPanel myStackPanel = new StackPanel();
Button myButton1 = new Button();
myButton1.Content = "Left Docked";
myButton1.Margin = new Thickness(5);
Button myButton2 = new Button();
myButton2.Content = "StackPanel";
myButton2.Margin = new Thickness(5);
myStackPanel.Children.Add(myButton1);
myStackPanel.Children.Add(myButton2);
myBorder2.Child = myStackPanel;
// Add the Top Docked Grid.
Border myBorder3 = new Border();
myBorder3.BorderThickness = new Thickness(1);
myBorder3.BorderBrush = Brushes.Black;
DockPanel.SetDock(myBorder3, Dock.Top);
Grid myGrid = new Grid();
myGrid.ShowGridLines = true;
RowDefinition myRowDef1 = new RowDefinition();
RowDefinition myRowDef2 = new RowDefinition();
ColumnDefinition myColDef1 = new ColumnDefinition();
ColumnDefinition myColDef2 = new ColumnDefinition();
ColumnDefinition myColDef3 = new ColumnDefinition();
myGrid.ColumnDefinitions.Add(myColDef1);
myGrid.ColumnDefinitions.Add(myColDef2);
myGrid.ColumnDefinitions.Add(myColDef3);
myGrid.RowDefinitions.Add(myRowDef1);
myGrid.RowDefinitions.Add(myRowDef2);
TextBlock myTextBlock1 = new TextBlock();
myTextBlock1.FontSize = 20;
myTextBlock1.Margin = new Thickness(10);
myTextBlock1.Text = "Grid Element Docked at the Top";
Grid.SetRow(myTextBlock1, 0);
Grid.SetColumnSpan(myTextBlock1, 3);
Button myButton3 = new Button();
myButton3.Margin = new Thickness(5);
myButton3.Content = "A Row";
Grid.SetColumn(myButton3, 0);
Grid.SetRow(myButton3, 1);
Button myButton4 = new Button();
myButton4.Margin = new Thickness(5);
myButton4.Content = "of Button";
Grid.SetColumn(myButton4, 1);
Grid.SetRow(myButton4, 1);
Button myButton5 = new Button();
myButton5.Margin = new Thickness(5);
myButton5.Content = "Elements";
Grid.SetColumn(myButton5, 2);
Grid.SetRow(myButton5, 1);
myGrid.Children.Add(myTextBlock1);
myGrid.Children.Add(myButton3);
myGrid.Children.Add(myButton4);
myGrid.Children.Add(myButton5);
myBorder3.Child = myGrid;
// Add the Bottom Docked StackPanel.
Border myBorder4 = new Border();
myBorder4.BorderBrush = Brushes.Black;
myBorder4.BorderThickness = new Thickness(1);
DockPanel.SetDock(myBorder4, Dock.Bottom);
StackPanel myStackPanel2 = new StackPanel();
myStackPanel2.Orientation = Orientation.Horizontal;
TextBlock myTextBlock2 = new TextBlock();
myTextBlock2.Text = "This StackPanel is Docked to the Bottom";
myTextBlock2.Margin = new Thickness(5);
myStackPanel2.Children.Add(myTextBlock2);
myBorder4.Child = myStackPanel2;
// Add the Canvas, that fills remaining space.
Border myBorder5 = new Border();
myBorder4.BorderBrush = Brushes.Black;
myBorder5.BorderThickness = new Thickness(1);
Canvas myCanvas = new Canvas();
myCanvas.ClipToBounds = true;
TextBlock myTextBlock3 = new TextBlock();
myTextBlock3.Text = "Content in the Canvas will Fill the remaining space.";
Canvas.SetTop(myTextBlock3, 50);
Canvas.SetLeft(myTextBlock3, 50);
Ellipse myEllipse = new Ellipse();
myEllipse.Height = 100;
myEllipse.Width = 125;
myEllipse.Fill = Brushes.CornflowerBlue;
myEllipse.Stroke = Brushes.Aqua;
Canvas.SetTop(myEllipse, 100);
Canvas.SetLeft(myEllipse, 150);
myCanvas.Children.Add(myTextBlock3);
myCanvas.Children.Add(myEllipse);
myBorder5.Child = myCanvas;
// Add child elements to the parent DockPanel.
myDockPanel.Children.Add(myBorder2);
myDockPanel.Children.Add(myBorder3);
myDockPanel.Children.Add(myBorder4);
myDockPanel.Children.Add(myBorder5);
Dim myDockPanel As New DockPanel()
Dim myBorder2 As New Border()
myBorder2.BorderThickness = New Thickness(1)
myBorder2.BorderBrush = Brushes.Black
DockPanel.SetDock(myBorder2, Dock.Left)
Dim myStackPanel As New StackPanel()
Dim myButton1 As New Button()
myButton1.Content = "Left Docked"
myButton1.Margin = New Thickness(5)
Dim myButton2 As New Button()
myButton2.Content = "StackPanel"
myButton2.Margin = New Thickness(5)
myStackPanel.Children.Add(myButton1)
myStackPanel.Children.Add(myButton2)
myBorder2.Child = myStackPanel
Dim myBorder3 As New Border()
myBorder3.BorderThickness = New Thickness(1)
myBorder3.BorderBrush = Brushes.Black
DockPanel.SetDock(myBorder3, Dock.Top)
Dim myGrid As New Grid()
myGrid.ShowGridLines = True
Dim myRowDef1 As New RowDefinition()
Dim myRowDef2 As New RowDefinition()
Dim myColDef1 As New ColumnDefinition()
Dim myColDef2 As New ColumnDefinition()
Dim myColDef3 As New ColumnDefinition()
myGrid.ColumnDefinitions.Add(myColDef1)
myGrid.ColumnDefinitions.Add(myColDef2)
myGrid.ColumnDefinitions.Add(myColDef3)
myGrid.RowDefinitions.Add(myRowDef1)
myGrid.RowDefinitions.Add(myRowDef2)
Dim myTextBlock1 As New TextBlock()
myTextBlock1.FontSize = 20
myTextBlock1.Margin = New Thickness(10)
myTextBlock1.Text = "Grid Element Docked at the Top"
Grid.SetRow(myTextBlock1, 0)
Grid.SetColumnSpan(myTextBlock1, 3)
Dim myButton3 As New Button()
myButton3.Margin = New Thickness(5)
myButton3.Content = "A Row"
Grid.SetColumn(myButton3, 0)
Grid.SetRow(myButton3, 1)
Dim myButton4 As New Button()
myButton4.Margin = New Thickness(5)
myButton4.Content = "of Button"
Grid.SetColumn(myButton4, 1)
Grid.SetRow(myButton4, 1)
Dim myButton5 As New Button()
myButton5.Margin = New Thickness(5)
myButton5.Content = "Elements"
Grid.SetColumn(myButton5, 2)
Grid.SetRow(myButton5, 1)
myGrid.Children.Add(myTextBlock1)
myGrid.Children.Add(myButton3)
myGrid.Children.Add(myButton4)
myGrid.Children.Add(myButton5)
myBorder3.Child = myGrid
Dim myBorder4 As New Border()
myBorder4.BorderBrush = Brushes.Black
myBorder4.BorderThickness = New Thickness(1)
DockPanel.SetDock(myBorder4, Dock.Bottom)
Dim myStackPanel2 As New StackPanel()
myStackPanel2.Orientation = Orientation.Horizontal
Dim myTextBlock2 As New TextBlock()
myTextBlock2.Text = "This StackPanel is Docked to the Bottom"
myTextBlock2.Margin = New Thickness(5)
myStackPanel2.Children.Add(myTextBlock2)
myBorder4.Child = myStackPanel2
Dim myBorder5 As New Border()
myBorder5.BorderBrush = Brushes.Black
myBorder5.BorderThickness = New Thickness(1)
Dim myCanvas As New Canvas()
myCanvas.ClipToBounds = True
Dim myTextBlock3 As New TextBlock()
myTextBlock3.Text = "Content in the Canvas will Fill the remaining space."
Canvas.SetTop(myTextBlock3, 50)
Canvas.SetLeft(myTextBlock3, 50)
Dim myEllipse As New Ellipse()
myEllipse.Height = 100
myEllipse.Width = 125
myEllipse.Fill = Brushes.CornflowerBlue
myEllipse.Stroke = Brushes.Aqua
Canvas.SetTop(myEllipse, 100)
Canvas.SetLeft(myEllipse, 150)
myCanvas.Children.Add(myTextBlock3)
myCanvas.Children.Add(myEllipse)
myBorder5.Child = myCanvas
myDockPanel.Children.Add(myBorder2)
myDockPanel.Children.Add(myBorder3)
myDockPanel.Children.Add(myBorder4)
myDockPanel.Children.Add(myBorder5)
Derlenen uygulama, şuna benzeyen yeni bir kullanıcı arabirimi oluşturur.

Özel Panel öğeleri
WPF esnek düzen denetimleri dizisi sağlarken, ve yöntemleri geçersiz kılarak özel düzen davranışları da elde edilebilir ArrangeOverrideMeasureOverride . Özel boyutlandırma ve konumlandırma, bu geçersiz kılma yöntemleri içinde yeni konumlandırma davranışları tanımlayarak gerçekleştirilebilir.
Benzer şekilde, türetilmiş sınıfları temel alan özel düzen davranışları ( Canvas veya gibi Grid ), ve yöntemleri geçersiz kılınarak ArrangeOverride tanımlanabilir MeasureOverride .
Aşağıdaki biçimlendirme özel bir öğenin nasıl oluşturulacağını göstermektedir Panel . Bu yeni Panel , olarak tanımlanan PlotPanel , sabit kodlanmış Panel ve PlotPanel koordinatları kullanılarak alt öğelerin konumlandırılmasını destekler. Bu örnekte, bir Rectangle öğe (gösterilmez), çizim noktası 50 (Rectangle) ve 50 (y) konumuna yerleştirilir.
public:
ref class PlotPanel : Panel {
public:
PlotPanel () {};
protected:
// Override the default Measure method of Panel
virtual Size MeasureOverride(Size availableSize) override
{
Size^ panelDesiredSize = gcnew Size();
// In our example, we just have one child.
// Report that our panel requires just the size of its only child.
for each (UIElement^ child in InternalChildren)
{
child->Measure(availableSize);
panelDesiredSize = child->DesiredSize;
}
return *panelDesiredSize ;
}
protected:
virtual System::Windows::Size ArrangeOverride (Size finalSize) override
{
for each (UIElement^ child in InternalChildren)
{
double x = 50;
double y = 50;
child->Arrange(Rect(Point(x, y), child->DesiredSize));
}
return finalSize;
};
};
public class PlotPanel : Panel
{
// Default public constructor
public PlotPanel()
: base()
{
}
// Override the default Measure method of Panel
protected override Size MeasureOverride(Size availableSize)
{
Size panelDesiredSize = new Size();
// In our example, we just have one child.
// Report that our panel requires just the size of its only child.
foreach (UIElement child in InternalChildren)
{
child.Measure(availableSize);
panelDesiredSize = child.DesiredSize;
}
return panelDesiredSize ;
}
protected override Size ArrangeOverride(Size finalSize)
{
foreach (UIElement child in InternalChildren)
{
double x = 50;
double y = 50;
child.Arrange(new Rect(new Point(x, y), child.DesiredSize));
}
return finalSize; // Returns the final Arranged size
}
}
Public Class PlotPanel
Inherits Panel
'Override the default Measure method of Panel.
Protected Overrides Function MeasureOverride(ByVal availableSize As System.Windows.Size) As System.Windows.Size
Dim panelDesiredSize As Size = New Size()
' In our example, we just have one child.
' Report that our panel requires just the size of its only child.
For Each child As UIElement In InternalChildren
child.Measure(availableSize)
panelDesiredSize = child.DesiredSize
Next
Return panelDesiredSize
End Function
Protected Overrides Function ArrangeOverride(ByVal finalSize As System.Windows.Size) As System.Windows.Size
For Each child As UIElement In InternalChildren
Dim x As Double = 50
Dim y As Double = 50
child.Arrange(New Rect(New System.Windows.Point(x, y), child.DesiredSize))
Next
Return finalSize
End Function
End Class
Daha karmaşık bir özel panel uygulamasını görüntülemek için bkz. özel Içerik sarmalama paneli örneği oluşturma.
Yerelleştirme/genelleştirme desteği
WPF, yerelleştirilebilir kullanıcı arabirimi oluşturulmasına yardımcı olan çeşitli özellikleri destekler.
Tüm Panel öğeleri FlowDirection , bir kullanıcının yerel ayarlarına veya dil ayarlarına bağlı olarak içeriği dinamik olarak yeniden akıtmak için kullanılabilen özelliğini yerel olarak destekler. Daha fazla bilgi için bkz. FlowDirection.
SizeToContentÖzelliği, uygulama geliştiricilerinin yerelleştirilmiş kullanıcı arabirimi ihtiyaçlarını tahmin etmesini sağlayan bir mekanizma sağlar. WidthAndHeightBu özelliğin değerini kullanarak, bir üst öğe Window içeriği her zaman dinamik olarak boyutlandırır ve yapay yükseklik veya genişlik kısıtlamalarına göre kısıtlanmaz.
DockPanel, Grid ve, StackPanel yerelleştirilebilir kullanıcı arabirimi için tüm iyi seçeneklerdir. Canvas , doğru bir seçim değildir, çünkü içeriği kesinlikle konumlandırır, yerelleştirilmesi zordur.
Yerelleştirilebilir kullanıcı arabirimleri (UG 'ler) ile WPF uygulamaları oluşturma hakkında daha fazla bilgi için bkz. Otomatik düzeni kullanma genel bakış.