面板概述

项目
08/12/2011

更新：2010 年 7 月

Panel 元素是控制元素呈现（元素的大小、尺寸、位置及其子内容的排列）的组件。 Windows Presentation Foundation (WPF) 提供若干预定义的 Panel 元素以及用来构造自定义 Panel 元素的功能。

本主题包括以下部分。

Panel 类
Panel 元素公共成员
派生的 Panel 元素
用户界面面板
嵌套的 Panel 元素
自定义 Panel 元素
本地化/全球化支持
相关主题

Panel 类

Panel 是在 Windows Presentation Foundation (WPF) 中提供布局支持的所有元素的基类。派生的 Panel 元素用于定位和排列 Extensible Application Markup Language (XAML) 和代码中的元素。

WPF 包括一个由派生的面板实现组成的综合套件，用来启用许多复杂的布局。这些派生的类公开启用大多数标准user interface (UI) 方案的属性和方法。开发人员如果找不到满足其需要的子排列行为，可以通过重写 ArrangeOverride 和 MeasureOverride 方法创建新的布局。有关自定义布局行为的更多信息，请参见自定义 Panel 元素。

Panel 公共成员

所有的 Panel 元素都支持由 FrameworkElement 定义的基本的大小调整和定位属性，包括 Height、Width、HorizontalAlignment、VerticalAlignment、Margin 和 LayoutTransform。有关由 FrameworkElement 定义的定位属性的其他信息，请参见Alignment、Margin 和 Padding 概述。

Panel 公开了其他一些属性，这些属性对于理解和使用布局至关重要。 Background 属性用于填充具有 Brush 的派生 Panel 元素的各个边界之间的区域。 Children 表示组成 Panel 的元素的子集合。 InternalChildren 表示 Children 集合的内容以及由数据绑定生成的这些成员。它们都由在父 Panel 中承载的子元素的 UIElementCollection 组成。

Panel 也公开了一个 Panel.ZIndex 附加属性，该属性可以用于在派生的 Panel 中实现分层顺序。面板的 Children 集合中 Panel.ZIndex 值较高的成员显示在 Panel.ZIndex 值较低的成员的前面。对于如 Canvas 和 Grid 等面板，它们允许子元素共享相同的坐标空间的，因而这一点对它们尤其有用。

Panel 还定义了 OnRender 方法，该方法可用于重写 Panel 的默认呈现行为。

附加属性

派生的 Panel 元素广泛使用附加的属性。附加的属性是依赖项属性的专用形式，它并不具有常规的common language runtime (CLR) 属性“wrapper”。附加的属性具有Extensible Application Markup Language (XAML) 中的专用语法，可从下面的几个示例中查看这一点。

附加的属性的一个用途是允许子元素存储实际已在父元素中定义的属性的唯一值。此功能的一项应用是使子元素通知父元素前者希望在user interface (UI) 中显示的方式，这对于应用程序布局非常有用。有关更多信息，请参见附加属性概述。

派生的 Panel 元素

许多对象都是从 Panel 派生的，但并不是所有对象都会用作根布局提供程序。为创建应用程序 UI 而专门设计了六个已定义的 Panel 类（Canvas、DockPanel、Grid、StackPanel、VirtualizingStackPanel 和 WrapPanel）。

每个 Panel 元素均封装自己的专用功能，如下表所示。

元素名称	是否为 UI 面板？	说明
Canvas	是	定义一个区域，在此区域内，您可以使用相对于 Canvas 区域的坐标显式定位子元素。
DockPanel	是	定义一个区域，在此区域中，您可以使子元素互相水平或垂直排列。
Grid	是	定义由行和列组成的灵活网格区域。可以使用 Margin 属性精确定位 Grid 的子元素。
StackPanel	是	将子元素排列成一行（可沿水平或垂直方向）。
TabPanel	否	处理 TabControl 中选项卡按钮的布局。
ToolBarOverflowPanel	否	在 ToolBar 控件内排列内容。
UniformGrid	否	UniformGrid 用于在网格内按全部相等的单元格大小排列子元素。
VirtualizingPanel	否	提供面板的一个基类，该基类能够“虚拟化”面板的子集合。
VirtualizingStackPanel	是	将内容排列成一行（可沿水平或垂直方向），并使内容虚拟化。
WrapPanel	是	WrapPanel 从左至右按顺序位置定位子元素，并在包含框的边缘处将内容断开至下一行。后续排序按照从上至下或从右至左的顺序进行，具体取决于 Orientation 属性的值。

用户界面面板

WPF 中有下列六个可用的 Panel 类，这些类已进行优化以支持 UI 方案：Canvas、DockPanel、Grid、StackPanel、VirtualizingStackPanel 和 WrapPanel。这些 Panel 元素易于使用、功能众多并且足以适用于大多数应用程序。

每个派生的 Panel 元素对大小调整约束的处理方式不同。了解 Panel 如何处理水平和垂直方向的约束后，即可更准确地预知布局效果。

面板名称	x 维	y 维
Canvas	受内容约束	受内容约束
DockPanel	受约束	受约束
StackPanel（垂直方向）	受约束	受内容约束
StackPanel（水平方向）	受内容约束	受约束
Grid	受约束	受约束，在 Auto 应用到行和列的情况下除外
WrapPanel	受内容约束	受内容约束

上述每个元素更为详细的说明和用法示例见下文。

Canvas

通过 Canvas 元素，可以根据 x 和 y 绝对坐标定位内容。可以在唯一的位置绘制元素；或者，如果多个元素占用了相同的坐标，则这些元素在标记中的出现顺序可决定它们的绘制顺序。

Canvas 对任何 Panel 均提供了最灵活的布局支持。 Height 和 Width 属性用于定义画布的区域，而画布内部的元素则按照相对于父 Canvas 的区域的绝对坐标分配。可以使用四个附加的属性（Canvas.Left、Canvas.Top、Canvas.Right 和 Canvas.Bottom）在 Canvas 内精确地控制对象位置，从而允许开发人员在屏幕上精确地定位和排列元素。

在画布内 ClipToBounds

Canvas 可以在屏幕上的任意位置定位子元素，即使坐标位于它自己定义的 Height 和 Width 外时也是如此。而且，Canvas 不受其子元素大小的影响。因此，绘制子元素时有可能覆盖位于父 Canvas 的边框外的其他元素。 Canvas 的默认行为允许在父 Canvas 的边界外绘制子元素。如果不希望发生此行为，则可将 ClipToBounds 属性设置为 true。这会使 Canvas 裁剪到其自身的大小。 Canvas 是唯一允许在其边框外绘制子元素的布局元素。

在 Width Properties Comparison Sample（宽度属性比较示例）中以图形方式演示了此行为。

定义和使用画布

只需使用Extensible Application Markup Language (XAML) 或代码，即可实例化 Canvas。下面的示例演示如何使用 Canvas 以绝对方式定位内容。此代码生成三个 100 像素的正方形。第一个正方形为红色，其左上角 (x, y) 位置指定为 (0, 0)。第二个正方形为绿色，其左上角位置为 (100, 100)，正好在第一个正方形的右下方。第三个正方形为蓝色，其左上角位置为 (50, 50)，因此包含了第一个正方形的右下方的四分之一和第二个正方形的左上方的四分之一。由于第三个正方形是最后放置的，因此它出现在其他两个正方形上面，也就是说，重叠部分采用第三个正方形的颜色。

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


            // 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 ();

<Page WindowTitle="Canvas Sample" xmlns="https://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>

编译后的应用程序将生成如下所示的新 UI。

典型的 Canvas 元素。

DockPanel

DockPanel 元素使用在子内容元素中设置的 DockPanel.Dock 附加属性沿容器的边缘将内容定位。当 DockPanel.Dock 设置为 Top 或 Bottom 时，该属性会将子元素定位在彼此的上方或下方。当 DockPanel.Dock 设置为 Left 或 Right 时，该属性会将子元素定位在彼此的左边或右边。 LastChildFill 属性可确定作为 DockPanel 的子元素添加的最终元素的位置。

可以使用 DockPanel 定位一组相关控件，如一组按钮。也可以使用它来创建一个与 Microsoft Outlook 中的用户界面类似的“paned”UI。

根据内容调整大小

如果未指定 DockPanel 的 Height 和 Width 属性，它会调整到其内容的大小。它的大小可以增加或减少来适合子元素的大小。但是，当已指定这些属性且不再有空间容纳下一个指定子元素时，DockPanel 将不会显示该子元素或其后的子元素，并且不会计算其后的子元素。

LastChildFill

默认情况下，DockPanel 元素的最后一个子项将“填满”剩余的未分配空间。如果不希望发生此行为，请将 LastChildFill 属性设置为 false。

定义和使用 DockPanel

下面的示例演示如何使用 DockPanel 对空间进行分区。添加了五个 Border 元素，作为父 DockPanel 的子元素。每个元素使用 DockPanel 的一个不同定位属性来对空间进行分区。最后的元素将“填满”剩余的未分配空间。

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


            // 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 ();


         // 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();

<Page xmlns="https://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>

编译后的应用程序将生成如下所示的新 UI。

典型的 DockPanel 方案。

网格

Grid 元素合并了绝对定位功能和表格数据控件。使用 Grid 可以轻松地定位元素和设置元素的样式。使用 Grid 可以定义灵活的行和列分组，甚至提供一种机制以共享多个 Grid 元素之间的大小调整信息。

网格和表有什么区别？

Table 和 Grid 共享某些通用功能，但二者分别最适用于不同的方案。 Table 旨在在流内容内使用（有关流内容的更多信息，请参见流文档概述）。网格最适合在表单中（主要在流内容以外的任意位置）使用。在 FlowDocument 内，Table 支持流内容行为（例如分页、列回流和内容选择），而 Grid 则不支持这样的行为。另一方面，Grid 最适合在 FlowDocument 之外使用，原因有多种，包括 Grid 根据行和列索引添加元素，而 Table 则不适合。使用 Grid 元素可以对子内容进行分层，从而允许多个元素共存于单个“单元格”内。Table 不支持分层。 Grid 的子元素可相对于其“单元格”边界区域进行绝对定位。 Table 不支持此功能。最后，Grid 与 Table 相比较为轻量。

列和行的大小调整行为

在 Grid 中定义的行和列可以利用 Star 大小调整功能按比例分配剩余空间。当选择 Star 作为行或列的高度或宽度时，该行或列将得到一个剩余可用空间的加权比例分配。这与 Auto 相反，后者将基于行或列中所含内容的大小平均分配空间。当使用Extensible Application Markup Language (XAML) 时，此值表示为 * 或 2*。在第一种情况下，行或列将得到一倍的可用空间；在第二种情况下，行或列将得到两倍的可用空间，依此类推。通过将按比例分配空间的这种方法与 Stretch 的 HorizontalAlignment 和 VerticalAlignment 值结合使用，可以按屏幕空间的百分比划分布局空间。 Grid 是唯一可以按这种方式分配空间的布局面板。

定义和使用网格

下面的示例演示如何生成 UI，并且该界面与单击 Windows 的“开始”菜单，然后打开“运行”对话框时看到的界面相似。


'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


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

<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      WindowTitle="Grid Run Dialog Sample" 
      WindowWidth="425" 
      WindowHeight="225">
  <Grid Background="#DCDCDC"
        Width="425"
        Height="165"
        HorizontalAlignment="Left"
        VerticalAlignment="Top"
        ShowGridLines="True">
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="Auto" />
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="*"/>
      <ColumnDefinition Width="*"/>
      <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="*" />
      <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <Image Grid.Column="0" Grid.Row="0" Source="RunIcon.png" />
    <TextBlock Grid.Column="1" Grid.ColumnSpan="4" Grid.Row="0" TextWrapping="Wrap">
      Type the name of a program, folder, document, or
      Internet resource, and Windows will open it for you.
    </TextBlock>
    <TextBlock Grid.Column="0" Grid.Row="1">Open:</TextBlock>
    <TextBox Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="5" />
    <Button Margin="10, 0, 10, 15" Grid.Row="3" Grid.Column="2">OK</Button>
    <Button Margin="10, 0, 10, 15" Grid.Row="3" Grid.Column="3">Cancel</Button>
    <Button Margin="10, 0, 10, 15" Grid.Row="3" Grid.Column="4">Browse ...</Button>
  </Grid>
</Page>

编译后的应用程序将生成如下所示的新 UI。

典型的网格元素。

StackPanel

使用 StackPanel 可以按分配的方向“堆积”元素。默认堆积方向为垂直方向。 Orientation 属性可用于控制内容流。

StackPanel vs.DockPanel

尽管 DockPanel 也可以“堆积”子元素，但 DockPanel 和 StackPanel 在某些使用方案中并不会生成相似的结果。例如，子元素的顺序可能会影响 DockPanel 中子元素的大小，但不会影响 StackPanel 中子元素的大小。这是因为 StackPanel 在堆积的 PositiveInfinity 方向计算大小，而 DockPanel 只计算可用大小。

下面的示例演示这一主要差异。


            '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)


            // 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 ();


         // 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();

<Page xmlns="https://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>

从此图像可以看出呈现行为的区别。

屏幕快照：StackPanel 与 DockPanel 对比屏幕快照

定义和使用 StackPanel

下面的示例演示如何使用 StackPanel 创建一组垂直放置的按钮。如果希望水平放置，请将 Orientation 属性设置为 Horizontal。

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


            // 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 ();

<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" WindowTitle="StackPanel Sample">
    <StackPanel HorizontalAlignment="Left"
                VerticalAlignment="Top">
        <Button>Button 1</Button>
        <Button>Button 2</Button>
        <Button>Button 3</Button>
    </StackPanel>
</Page>

编译后的应用程序将生成如下所示的新 UI。

典型的 StackPanel 元素。

VirtualizingStackPanel

WPF 还提供 StackPanel 元素的一个变体，用于自动“虚拟化”数据绑定子级内容。在此上下文中，“虚拟化”一词指的是一种方法：通过此方法根据屏幕上哪些项可见，从较多的数据项中生成一个元素子集。如果在指定时刻只有少量 UI 元素位于屏幕上，则此时生成大量元素对于内存和处理器来说都需要进行大量处理。 VirtualizingStackPanel（通过 VirtualizingPanel 提供的功能）计算可见项，并与来自 ItemsControl（如 ListBox 或 ListView）的 ItemContainerGenerator 协同工作，以便仅为可见项创建元素。

VirtualizingStackPanel 元素会自动设置为控件（如 ListBox）的项宿主。当承载数据绑定集合时，只要内容位于 ScrollViewer 的绑定之内，就会自动对内容进行虚拟化。在承载许多子项时，这一点可以极大地提高性能。

下面的标记演示了如何使用 VirtualizingStackPanel 作为项宿主。 VirtualizingStackPanel.IsVirtualizing 附加的属性必须设置为 true（默认值）才能进行虚拟化。

<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 用于从左至右按顺序定位子元素，并在到达其父容器的边缘时将内容断开至下一行。内容的方向可以是水平的，也可以是垂直的。 WrapPanel 对于简单流处理 user interface (UI) 方案很有用。它还可用于对其所有子元素进行统一的大小调整。

下面的示例演示如何创建一个 WrapPanel 来显示 Button 控件，并且使控件在到达其容器边缘时进行换行。

            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


            // 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();


         // 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();

<Page xmlns="https://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>

编译后的应用程序将生成如下所示的新 UI。

典型的 WrapPanel 元素。

嵌套的 Panel 元素

Panel 元素可以彼此嵌套来生成复杂的布局。当 Panel 非常适合作为 UI 的一部分时，这一点是非常有用的，但可能不会满足多个 UI 不同部分的需要。

对于您的应用程序可以支持的嵌套数量，并没有实际限制。不过，通常最好限制应用程序仅使用您的预期布局确实需要的那些面板。在很多情况下，可以使用 Grid 元素来代替嵌套面板，因为前者作为布局容器具有一定的灵活性。在应用程序中使用此元素时，此元素可以将不必要的元素排除在树之外，从而可以提高应用程序的性能。

下面的示例演示如何创建一个 UI，在其中利用嵌套的 Panel 元素实现特定布局。在这种特定情况下，DockPanel 元素用于提供 UI 结构，而嵌套的 StackPanel 元素（Grid 和 Canvas）用于在父 DockPanel 内精确定位子元素。

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)


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

<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" WindowTitle="Nested Panels">
  <Border Background="AliceBlue" 
          Width="400" 
          Height="300" 
          BorderBrush="DarkSlateBlue" 
          BorderThickness="2"
          HorizontalAlignment="Left" 
          VerticalAlignment="Top">
    <DockPanel>
      <Border BorderBrush="Black" BorderThickness="1" DockPanel.Dock="Left">
        <StackPanel>
          <Button Margin="5">Left Docked</Button>
          <Button Margin="5">StackPanel</Button>
        </StackPanel>
      </Border>
      <Border BorderBrush="Black" BorderThickness="1" DockPanel.Dock="Top">
        <Grid ShowGridLines="True">
          <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
          </Grid.RowDefinitions>
          <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
          </Grid.ColumnDefinitions>
          <TextBlock FontSize="20" Margin="10" Grid.ColumnSpan="3" Grid.Row="0">Grid Element Docked to the Top.</TextBlock>
          <Button Grid.Row="1" Grid.Column="0" Margin="5">A Row</Button>
          <Button Grid.Row="1" Grid.Column="1" Margin="5">of Button</Button>
          <Button Grid.Row="1" Grid.Column="2" Margin="5">Elements</Button>
        </Grid>
      </Border>
      <Border BorderBrush="Black" BorderThickness="1" DockPanel.Dock="Bottom">
        <StackPanel Orientation="Horizontal">
          <TextBlock Margin="5">This StackPanel is Docked to the Bottom.</TextBlock>
        </StackPanel>
      </Border>
      <Border BorderBrush="Black" BorderThickness="1">
        <Canvas ClipToBounds="True">
          <TextBlock Canvas.Top="50" Canvas.Left="50">
            Content in the Canvas will Fill the remaining Space.
          </TextBlock>
          <Ellipse Height="100" Width="125" Fill="CornflowerBlue" Stroke="Aqua" Canvas.Top="100" Canvas.Left="150"/>
        </Canvas>
      </Border>
    </DockPanel>
  </Border>
</Page>

编译后的应用程序将生成如下所示的新 UI。

利用嵌套面板的 UI。

自定义 Panel 元素

由于 WPF 提供了一组灵活的布局控件，因此也可以通过重写 ArrangeOverride 和 MeasureOverride 方法实现自定义布局行为。可以在这些重写方法内定义新的定位行为来实现自定义的大小调整和定位。

同样，可以通过重写派生类（如 Canvas 或 Grid）的 ArrangeOverride 和 MeasureOverride 方法来基于派生类定义自定义布局行为。

下面的标记演示如何创建自定义 Panel 元素。这个新的 Panel（定义为 PlotPanel）支持通过使用硬编码的 x 和 y 坐标来定位子元素。在此示例中，Rectangle 元素（未显示）定位于绘制点 50 (x) 和 50 (y)。

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

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: 
      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;
         };
      };

若要查看更复杂的自定义面板实现，请参见 Create a Custom Content-Wrapping Panel Sample（创建自定义内容包装面板示例）。

本地化/全球化支持

WPF 支持的许多功能可帮助创建可本地化的 UI。

所有 Panel 元素本身支持 FlowDirection 属性，该属性可用于根据用户的区域设置或语言设置动态重新流动内容。有关更多信息，请参见 FlowDirection。

SizeToContent 属性提供了一种机制，该机制使应用程序开发人员可以预料本地化的 UI 的需要。通过使用此属性的 WidthAndHeight 值，父 Window 始终可以动态地进行大小调整以适合内容，而且不受人为的高度或宽度限制的制约。

DockPanel、Grid 和 StackPanel 都是实现可本地化的 UI 的良好选择。但 Canvas 不适合这一点，因为它以绝对方式定位内容，使得难以进行本地化。

有关创建具有可本地化的user interfaces (UIs) 的 WPF 应用程序的更多信息，请参见使用自动布局概述。

请参见

概念

演练：开始使用 WPF

布局系统

Alignment、Margin 和 Padding 概述

附加属性概述

使用自动布局概述

优化性能：布局和设计

其他资源

WPF Layout Gallery Sample

WPF Controls Gallery Sample

Create a Custom Content-Wrapping Panel Sample

修订记录

日期	修订记录	原因
2010 年 7 月	固定了“WrapPanel”部分中的示例。	客户反馈

2010 年 7 月

固定了“WrapPanel”部分中的示例。

客户反馈