Panellere Genel Bakış

Panel öğeleri, öğelerin işlenmesini denetleen bileşenlerdir; bunların boyutları ve boyutları, konumları ve alt içeriklerinin yerleşimi. Windows Presentation Foundation (WPF), önceden tanımlanmış Panel bir dizi öğe ve özel Panel öğeler oluşturma olanağı sağlar.

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

• Panel Sınıfı

• Panel Öğesi Ortak Üyeleri

• Türetilmiş Panel Öğeleri

• Kullanıcı Arabirimi Panelleri

• İç İçe Panel Öğeleri

• Özel Panel Öğeleri

• Yerelleştirme/Genelleştirme Desteği

Panel Sınıfı

Panel , Windows Presentation Foundation'da (WPF) düzen desteği sağlayan tüm öğeler için temel sınıftır. Türetilmiş Panel öğeler, Genişletilebilir Uygulama Biçimlendirme Dili (XAML) ve koddaki öğeleri konumlandırmak ve düzenlemek için kullanılır.

WPF, birçok karmaşık düzeni etkinleştiren türetilmiş panel uygulamalarından oluşan kapsamlı bir paket içerir. Bu türetilmiş sınıflar, çoğu standart kullanıcı arabirimi (UI) senaryolarını etkinleştiren özellikleri ve yöntemleri kullanıma sunar. Gereksinimlerini karşılayan bir alt düzenleme davranışı bulamayan geliştiriciler ve MeasureOverride yöntemlerini geçersiz kılarak ArrangeOverride yeni düzenler oluşturabilir. Özel düzen davranışları hakkında daha fazla bilgi için bkz . Özel Panel Öğeleri.

Panel Ortak Üyeleri

Tüm Panel öğeler , ve dahil olmak üzere HorizontalAlignmentMarginVerticalAlignmentHeightWidthtarafından FrameworkElementtanımlanan temel boyutlandırma ve LayoutTransformkonumlandırma özelliklerini destekler. tarafından FrameworkElementtanımlanan özellikleri konumlandırma hakkında ek bilgi için bkz . Hizalama, Kenar Boşlukları ve Doldurmaya Genel Bakış.

Panel düzeni anlama ve kullanma açısından kritik öneme sahip ek özellikleri kullanıma sunar. Background özelliği, türetilmiş bir panel öğesinin sınırları arasındaki alanı ile Brushdoldurmak için kullanılır. Children öğesinden oluşan alt öğe Panel koleksiyonunu temsil eder. InternalChildren koleksiyonun Children içeriğini ve veri bağlama tarafından oluşturulan üyeleri temsil eder. Her ikisi de üst Panelöğesinde barındırılan alt UIElementCollection öğelerden oluşur.

Panel, türetilmiş Panelbir Panel.ZIndex içinde katmanlı sıra elde etmek için kullanılabilen ekli bir özelliği de kullanıma sunar. Daha yüksek Panel.ZIndex değere sahip bir panel Children koleksiyonunun üyeleri, daha düşük Panel.ZIndex değere sahip olanların önünde görünür. Bu, özellikle ve Grid gibi Canvas çocukların aynı koordinat alanını paylaşmasına olanak tanıyan paneller için kullanışlıdır.

Panelayrıca, bir Panelöğesinin OnRender varsayılan sunu davranışını geçersiz kılmak için kullanılabilecek yöntemini tanımlar.

Ekli Özellikler

Türetilmiş panel öğeleri, ekli özelliklerin kapsamlı bir şekilde kullanılmasını sağlar. Ekli özellik, geleneksel ortak dil çalışma zamanı (CLR) özelliği "sarmalayıcı" olmayan özel bir bağımlılık özelliği biçimidir. Ekli özelliklerin Genişletilebilir Uygulama Biçimlendirme Dili'nde (XAML) özel bir söz dizimi vardır ve bu söz dizimi aşağıdaki örneklerden birkaçında görülebilir.

Ekli özelliğin bir amacı, alt öğelerin bir üst öğe tarafından tanımlanan bir özelliğin benzersiz değerlerini depolamasına izin vermektir. Bu işlevselliğin bir uygulaması, alt öğelerin üst öğeye kullanıcı arabiriminde (UI) nasıl sunulmasını istediklerini bildirmesini sağlamaktır. Bu, uygulama düzeni için son derece kullanışlıdır. Daha fazla bilgi için, bkz. Ekli Özelliklere Genel Bakış.

Türetilmiş Panel Öğeleri

Birçok nesne ' den Paneltüretilir, ancak bunların tümü kök düzen sağlayıcıları olarak kullanılmak üzere tasarlanmamıştır. Uygulama kullanıcı arabirimi oluşturmak için özel olarak tasarlanmış altı tanımlı panel sınıfı (Canvas, GridDockPanel, StackPanel, , VirtualizingStackPanelve WrapPanel) vardır.

Her panel öğesi, aşağıdaki tabloda görüldüğü gibi kendi özel işlevlerini kapsüller.

Öğe Adı	Kullanıcı Arabirimi Paneli mi?	Tanım
Canvas	Evet	Alt öğeleri alana göre koordinatlara göre Canvas açıkça konumlandırabileceğiniz bir alan tanımlar.
DockPanel	Evet	Alt öğeleri birbirine göre yatay veya dikey olarak yerleştirebileceğiniz bir alan tanımlar.
Grid	Evet	Sütun ve satırlardan oluşan esnek bir kılavuz alanı tanımlar. öğesinin Grid alt öğeleri, özelliği kullanılarak Margin hassas bir şekilde konumlandırılabilir.
StackPanel	Evet	Alt öğeleri yatay veya dikey olarak yönlendirilebilen tek bir çizgi halinde düzenler.
TabPanel	Hayır	içindeki TabControlsekme düğmelerinin düzenini işler.
ToolBarOverflowPanel	Hayır	Denetimin içindeki ToolBar içeriği düzenler.
UniformGrid	Hayır	UniformGrid , tüm eşit hücre boyutlarına sahip bir kılavuzda alt öğeleri düzenlemek için kullanılır.
VirtualizingPanel	Hayır	Alt koleksiyonlarını "sanallaştırabilen" paneller için bir temel sınıf sağlar.
VirtualizingStackPanel	Evet	İçeriği yatay veya dikey olarak yönlendirilen tek bir satırda düzenler ve sanallaştırır.
WrapPanel	Evet	WrapPanel alt öğeleri soldan sağa sıralı konuma yerleştirir, 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.

Kullanıcı Arabirimi Panelleri

WPF'de kullanıcı arabirimi senaryolarını destekleyecek şekilde iyileştirilmiş altı panel sınıfı vardır: Canvas, DockPanel, Grid, StackPanel, VirtualizingStackPanel, ve WrapPanel. Bu panel öğeleri kullanımı kolay, çok yönlü ve çoğu uygulama için yeterince genişletilebilir.

Türetilen Panel her öğe boyutlandırma kısıtlamalarını farklı şekilde ele alır. Bir kısıtlamanın yatay veya dikey yönde nasıl Panel işleneceğini anlamak düzeni daha öngörülebilir hale getirebilir.

Panel Adı	x-Boyut	y-Boyut
Canvas	İçerikle kısıtlanmış	İçerikle kısıtlanmış
DockPanel	Kısıtlı	Kısıtlı
StackPanel (Dikey Yönlendirme)	Kısıtlı	İçerikle kısıtlanmış
StackPanel (Yatay Yönlendirme)	İçerikle kısıtlanmış	Kısıtlı
Grid	Kısıtlı	Satırlara ve sütunlara uygulanan durumlar Auto dışında kısıtlanmış
WrapPanel	İçerikle kısıtlanmış	İçerikle kısıtlanmış

Bu öğelerin her birine ilişkin daha ayrıntılı açıklamalar ve kullanım örnekleri aşağıda bulunabilir.

Tuval

öğesi, Canvas içeriğin mutlak x ve y koordinatlarına göre konumlandırılmasını sağlar. Öğeler benzersiz bir konumda çizilebilir; veya öğeler aynı koordinatları kaplarsa, öğelerin çizildiği sırayı işaretlemede göründükleri sıra belirler.

Canvas , herhangi bir Paneliçin en esnek düzen desteğini sağlar. Yükseklik ve Genişlik özellikleri tuvalin alanını tanımlamak için kullanılır ve içindeki öğelere üst Canvasalanının alanına göre mutlak koordinatlar atanır. Dört ekli özellik, Canvas.Left, Canvas.TopCanvas.Right ve Canvas.Bottom, içinde nesne yerleşimi üzerinde hassas denetime Canvasolanak tanıyarak geliştiricinin öğeleri ekranda hassas bir şekilde konumlandırmasını ve düzenlemesini sağlar.

Tuval İçinde ClipToBounds

Canvas alt öğeleri, kendi tanımlı Height ve Widthdışındaki koordinatlarda bile ekrandaki herhangi bir konuma konumlandırabilir. Ayrıca, Canvas çocuklarının boyutundan etkilenmez. Sonuç olarak, bir alt öğenin üst Canvasöğesinin sınırlayıcı dikdörtgeninin dışındaki diğer öğelerin üzerine çizilmesi mümkündür. varsayılan davranışı, alt öğelerinin Canvas üst Canvasöğesinin sınırlarının dışına çekilmesine izin vermektir. Bu davranış istenmeyen bir davranışsa, ClipToBounds özelliği olarak trueayarlanabilir. Bu, kendi boyutuna kırpmaya neden olur Canvas . Canvas , alt öğelerin sınırlarının dışına çekilmesine izin veren tek düzen öğesidir.

Bu davranış, Genişlik Özellikleri Karşılaştırma Örneği'nde grafik olarak gösterilmiştir.

Tuval Tanımlama ve Kullanma

Canvas Genişletilebilir Uygulama biçimlendirme dili (XAML) veya kod kullanılarak örneği oluşturulabilir. Aşağıdaki örnekte, içeriği kesinlikle konumlandırmak için nasıl kullanılacağı Canvas gösterilmektedir. Bu kod üç 100 piksel kare oluşturur. İ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ğındakidir. Üçüncü kare mavidir ve sol üst konumu (50, 50) ve bu nedenle birinci karenin sağ alt çeyreğini ve ikinci karenin sol üst çeyreğini kapsar. Üçüncü kare en son yerleştirildiğinden, diğer iki karenin üstünde gibi görünür; diğer bir deyişle, çakışan kısımlar üçüncü kutunun rengini kabul eder.

// 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>

Derlenen uygulama şuna benzer yeni bir kullanıcı arabirimi oluşturur.

DockPanel

öğesi, DockPanel içeriği kapsayıcının DockPanel.Dock kenarları boyunca konumlandırmak için alt içerik öğelerinde ayarlandığı gibi ekli özelliğini kullanır. DockPanel.Dock veya Bottomolarak ayarlandığındaTop, alt öğeleri birbirinin üstüne veya altına konumlandırılır. DockPanel.Dock veya Rightolarak ayarlandığındaLeft, alt öğeleri birbirinin soluna veya sağ bölümüne konumlandırılır. özelliği, LastChildFill bir öğesinin alt DockPanelöğesi olarak eklenen son öğenin konumunu belirler.

Düğme kümesi gibi bir grup ilgili denetimi konumlandırmak için kullanabilirsiniz DockPanel . Alternatif olarak, Microsoft Outlook'ta bulunana benzer bir "kaydırılmış" kullanıcı arabirimi oluşturmak için de kullanabilirsiniz.

İçeriği Boyutlandırma

ve HeightWidth özellikleri belirtilmezse, DockPanel içeriğine göre boyutlandırılır. Boyut, alt öğelerinin boyutuna uyum sağlamak için artabilir veya küçülebilir. Ancak, bu özellikler belirtildiğinde ve bir sonraki belirtilen alt öğe için artık yer kalmadığında, DockPanel bu alt öğeyi veya sonraki alt öğeleri görüntülemez ve sonraki alt öğeleri ölçmez.

LastChildFill

Varsayılan olarak, öğenin DockPanel son alt öğesi kalan ayrılmamış alanı "doldurur". Bu davranış istenmiyorsa özelliğini olarak falseayarlayınLastChildFill.

DockPanel Tanımlama ve Kullanma

Aşağıdaki örnekte, kullanarak alan bölümleme gösterilmektedir DockPanel. Beş Border öğe bir üst DockPanelöğesinin alt öğesi olarak eklenir. Her biri, bölümleme alanının farklı bir DockPanel konumlandırma özelliğini kullanır. Son öğe kalan ayrılmamış 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>

Derlenen uygulama şuna benzer yeni bir kullanıcı arabirimi oluşturur.

Kılavuz

öğesi, Grid mutlak konumlandırma ve tablosal veri denetiminin işlevselliğini birleştirir. A Grid , öğeleri kolayca konumlandırmanızı ve stil oluşturmanızı sağlar. Grid esnek satır ve sütun gruplandırmalarını tanımlamanıza olanak tanır ve hatta boyutlandırma bilgilerini birden çok Grid öğe arasında paylaşmaya yönelik bir mekanizma sağlar.

Grid'in Tablodan Farkı Nedir?

Table ve Grid bazı ortak işlevleri paylaşın, ancak her biri farklı senaryolar için en uygun seçenektir. A Table , akış içeriğinde kullanılmak üzere tasarlanmıştır (akış içeriği hakkında daha fazla bilgi için bkz . Akış Belgesine Genel Bakış ). Kılavuzlar en iyi şekilde formların içinde kullanılır (temel olarak akış içeriğinin dışında herhangi bir yerde). içinde FlowDocument, Table sayfalandırma, sütun yeniden akışı ve içerik seçimi gibi akış içeriği davranışlarını desteklerken, bir Grid desteklemez. Öte yandan AGrid, bir satır ve sütun dizinine dayalı öğeler ekleme dahil olmak üzere Grid birçok nedenden dolayı bir dışında FlowDocument en iyi şekilde kullanılır, Table eklenmez. Grid öğesi alt içeriğin katmanlanmasına izin verir ve tek bir "hücre" Table içinde birden fazla öğenin bulunmasına izin verir. Katman oluşturmayı desteklemez. alt Grid öğeleri kesinlikle kendi "hücre" sınırlarının alanına göre konumlandırılabilir. Table bu özelliği desteklemez. Son olarak, a Grid , değerinden daha hafiftir Table.

Sütunların ve Satırların Boyutlandırma Davranışı

içinde Grid tanımlanan sütunlar ve satırlar, kalan alanı orantılı olarak dağıtmak için boyutlandırmadan yararlanabilir Star . Star Bir satır veya sütunun Yüksekliği veya Genişliği olarak seçildiğinde, bu sütun veya satır kalan kullanılabilir alanın ağırlıklı bir oranını alır. Bu, sütun veya satır içindeki içeriğin boyutuna göre alanı eşit olarak dağıtan öğesinin aksinedir Auto. Bu değer, Genişletilebilir Uygulama Biçimlendirme Dili (XAML) kullanılırken veya 2* olarak * ifade edilir. İlk durumda, satır veya sütun kullanılabilir alanı bir kez, ikinci durumda iki kez vb. alır. Alanı bir HorizontalAlignment ve VerticalAlignment değeriyle Stretch orantılı olarak dağıtmak için bu tekniği birleştirerek, düzen alanını ekran alanının yüzdesine göre bölümlendirmek mümkündür. Grid alanı bu şekilde dağıtabilen tek düzen panelidir.

Kılavuz Tanımlama ve Kullanma

Aşağıdaki örnek, Windows Başlat menüsü'de bulunan Çalıştır iletişim kutusunda bulunana benzer bir kullanıcı arabiriminin nasıl derlendiğini gösterir.

// 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

Derlenen uygulama şuna benzer yeni bir kullanıcı arabirimi oluşturur.

StackPanel

A StackPanel , öğeleri atanmış bir yönde "yığmanızı" sağlar. Varsayılan yığın yönü dikeydir. Orientation özelliği, içerik akışını denetlemek için kullanılabilir.

StackPanel ve DockPanel karşılaştırması

Ancak DockPanel alt öğeleri DockPanel de "yığabilir" ve StackPanel bazı kullanım senaryolarında benzer sonuçlar üretmez. Örneğin, alt öğelerin sırası bir DockPanel içindeki boyutlarını etkileyebilir, ancak içinde StackPaneletkilemeyebilir. Bunun nedeni StackPanel , 'de yığınlama PositiveInfinityyönünde ölçülerken DockPanel yalnızca kullanılabilir boyutu ölçür.

Aşağıdaki örnekte bu anahtar farkı gösterilmektedir.

// 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ışındaki fark bu görüntüde görülebilir.

StackPanel Tanımlama ve Kullanma

Aşağıdaki örnekte, dikey olarak konumlandırılmış bir dizi düğme oluşturmak için 'nin nasıl kullanılacağı StackPanel gösterilmektedir. Yatay konumlandırma için özelliğini olarak HorizontalayarlayınOrientation.

// 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

Derlenen uygulama şuna benzer yeni bir kullanıcı arabirimi oluşturur.

VirtualizingStackPanel

WPF ayrıca veriye bağlı alt içeriği otomatik olarak "sanallaştıran" öğenin bir çeşitlemesi StackPanel sağlar. Bu bağlamda virtualize sözcüğü, öğelerin ekranda göründüğü daha fazla sayıda veri öğesinden bir öğe alt kümesinin oluşturulduğu bir tekniği ifade eder. Belirli bir anda ekranda yalnızca birkaç kullanıcı arabirimi öğesi olduğunda çok sayıda kullanıcı arabirimi öğesi oluşturmak hem bellek hem de işlemci açısından yoğundur. VirtualizingStackPanel(tarafından VirtualizingPanelsağlanan işlevler aracılığıyla) görünür öğeleri hesaplar ve yalnızca görünür öğeler için öğe oluşturmak için öğesinden ItemsControl (veya ListViewgibiListBox) ile ItemContainerGenerator çalışır.

VirtualizingStackPanel öğesi, gibi denetimlerin konak öğeleri olarak otomatik olarak ListBoxayarlanır. Veri bağlı koleksiyonu barındırırken, içerik bir ScrollViewersınırları içinde olduğu sürece içerik otomatik olarak sanallaştırılır. Bu, birçok alt öğe barındırırken performansı büyük ölçüde artırır.

Aşağıdaki işaretleme, bir VirtualizingStackPanel öğesinin bir öğe konağı olarak nasıl kullanılacağını gösterir. Sanallaştırmanın VirtualizingStackPanel.IsVirtualizingProperty gerçekleşmesi için ekli özelliğin (varsayılan) olarak ayarlanması true 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 sıralı konuma yerleştirmek için kullanılır ve üst kapsayıcısının kenarına ulaştığında içeriği bir sonraki satıra ayırır. İçerik yatay veya dikey olarak yönlendirilebilir. WrapPanel basit akış kullanıcı arabirimi (UI) senaryoları için kullanışlıdır. Tüm alt öğelerine tekdüzen boyutlandırma uygulamak için de kullanılabilir.

Aşağıdaki örnek, kapsayıcılarının kenarına ulaştığında sarmalayan denetimleri görüntülemek Button için nasıl oluşturulacağını WrapPanel gösterir.

// 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>

Derlenen uygulama şuna benzer yeni bir kullanıcı arabirimi oluşturur.

İç İçe Panel Öğeleri

Panel karmaşık düzenler oluşturmak için öğelerin iç içe yerleştirilmiş olması gerekir. Bu, kullanıcı arabiriminin bir bölümü için ideal olan ancak kullanıcı arabiriminin farklı bir bölümünün gereksinimlerini karşılamayan durumlarda Panel çok yararlı olabilir.

Uygulamanızın destekleyebilecek iç içe yerleştirme miktarı için pratik bir sınır yoktur, ancak genellikle uygulamanızı yalnızca istediğiniz düzen için gerçekten gerekli olan panelleri kullanacak şekilde sınırlamak en iyisidir. Çoğu durumda, düzen Grid kapsayıcısı olarak esnekliği nedeniyle iç içe geçmiş paneller yerine bir eleman kullanılabilir. Bu, gereksiz öğeleri ağaçtan uzak tutarak uygulamanızdaki performansı artırabilir.

Aşağıdaki örnekte, belirli bir düzeni elde etmek için iç içe öğelerden yararlanan Panel bir kullanıcı arabiriminin nasıl oluşturulacağı gösterilmektedir. Bu özel durumda, kullanıcı arabirimi yapısını sağlamak için bir DockPanel öğe kullanılır ve alt öğeleri tam olarak üst DockPanelöğesinin içinde konumlandırmak için bir Gridve Canvas iç içe StackPanel öğeler 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 benzer yeni bir kullanıcı arabirimi oluşturur.

Özel Panel Öğeleri

WPF esnek düzen denetimleri dizisi sağlarken, ve MeasureOverride yöntemleri geçersiz kılınarak ArrangeOverride özel düzen davranışları da elde edilebilir. Özel boyutlandırma ve konumlandırma, bu geçersiz kılma yöntemleri içinde yeni konumlandırma davranışları tanımlanarak gerçekleştirilebilir.

Benzer şekilde, türetilmiş sınıfları (veya GridgibiCanvas) temel alan özel düzen davranışları ve MeasureOverride yöntemleri geçersiz kılınarak ArrangeOverride tanımlanabilir.

Aşağıdaki işaretlemede özel Panel bir öğenin nasıl oluşturulacağı gösterilmektedir. olarak PlotPaneltanımlanan bu yeni Panel, sabit kodlanmış x ve y koordinatları kullanarak alt öğelerin konumlandırılmasını destekler. Bu örnekte, bir Rectangle öğe (gösterilmiyor) 50 (x) ve 50 (y) çizim noktasına konumlandırılır.

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 İçerik Sarmalama Paneli Örneği Oluşturma.

Yerelleştirme/Genelleştirme Desteği

WPF, yerelleştirilebilir kullanıcı arabiriminin oluşturulmasına yardımcı olan bir dizi özelliği destekler.

Tüm panel öğeleri özelliği yerel olarak destekler FlowDirection . Bu özellik, kullanıcının yerel ayarına veya dil ayarlarına göre içeriği dinamik olarak yeniden akışa almak için kullanılabilir. Daha fazla bilgi için bkz. FlowDirection.

özelliği, SizeToContent uygulama geliştiricilerinin yerelleştirilmiş kullanıcı arabirimi gereksinimlerini tahmin etmelerini sağlayan bir mekanizma sağlar. Bu özelliğin WidthAndHeight değerini kullanan üst öğe Window her zaman içeriğe sığacak şekilde dinamik olarak boyutlandırılır ve yapay yükseklik veya genişlik kısıtlamalarıyla kısıtlanmaz.

DockPanel, Gridve StackPanel yerelleştirilebilir kullanıcı arabirimi için iyi seçeneklerdir. Canvas iyi bir seçim değildir, ancak içeriği kesinlikle konumlandırdığından yerelleştirmeyi zorlaştırır.

Yerelleştirilebilir kullanıcı arabirimleri (UI) ile WPF uygulamaları oluşturma hakkında ek bilgi için bkz . Otomatik Düzeni Kullanmaya Genel Bakış.

Ayrıca bkz.

• İzlenecek Yol: İlk WPF masaüstü uygulamam
• WPF Düzen Galerisi Örneği
• Düzen
• WPF Denetimleri Galeri Örneği
• Hizalama, Kenar Boşlukları ve Doldurmaya Genel Bakış
• Özel İçerik Kaydırma Paneli Örneği Oluşturma
• Ekli Özelliklere Genel Bakış
• Otomatik Düzen Kullanımına Genel Bakış
• Düzen ve Tasarım