Панель

Panel элементы — это компоненты, которые управляют отрисовкой элементов— их размером и измерениями, их положением и расположением дочернего содержимого. Windows Presentation Foundation (WPF) предоставляет ряд предопределенных Panel элементов, а также возможность создавать пользовательские Panel элементы.

Название	Description
Создание пользовательского элемента панели	Показывает, как создать пользовательский элемент панели.
Переопределите метод Panel OnRender	Показывает, как переопределить метод OnRender панели.
Задание свойств высоты элемента	Показывает, как задать свойства высоты элемента.
Задание свойств ширины элемента	Показывает, как задать свойства ширины элемента.

Стили и шаблоны

Panel — это абстрактный базовый класс, который не определяет шаблон по умолчанию или внешний вид визуального элемента. Производные классы панелей реализуют собственное поведение стилей и шаблонов.

Свойство контента

Этот элемент управления использует Children свойство в качестве свойства содержимого.

Комплектующие

Этот элемент управления не определяет какие-либо части шаблона.

Визуальные состояния

Этот элемент управления не определяет визуальные состояния.

Класс Panel

Panel — базовый класс для всех элементов, которые обеспечивают поддержку макета в Windows Presentation Foundation (WPF). Используйте производные Panel элементы для размещения и упорядочивания элементов в языке разметки приложений (XAML) и коде.

WPF включает полный набор производных реализаций панелей, которые обеспечивают множество сложных макетов. Эти производные классы предоставляют свойства и методы, которые позволяют выполнять большинство стандартных сценариев пользовательского интерфейса. Если вы не можете найти расположение дочерних элементов, которое соответствует вашим потребностям, создайте новые макеты, переопределив методы ArrangeOverride и MeasureOverride.

Общие элементы панели

Все элементы Panel поддерживают базовые свойства размера и расположения, определенные в FrameworkElement, в том числе Height, Width, HorizontalAlignment, VerticalAlignment, Margin и LayoutTransform. Для получения дополнительной информации о свойствах позиционирования, определенных в FrameworkElement, см. раздел Обзор выравнивания, полей и заполнения.

Panel предоставляет дополнительные свойства, важные для понимания и использования макета. Используйте свойство Background для заполнения области между границами производного элемента панели элементом Brush. Children представляет дочернюю коллекцию элементов, составляющих Panel . InternalChildren представляет содержимое Children коллекции, а также эти элементы, созданные привязкой данных. Оба состоят из UIElementCollection дочерних элементов, размещенных в родительском Panelэлементе.

Панель также предоставляет присоединенное Panel.ZIndex свойство, которое можно использовать для достижения иерархического порядка в производном Panel. Элементы коллекции панели Children с более Panel.ZIndex высоким значением отображаются перед элементами с более низким Panel.ZIndex значением. Это поведение особенно полезно для таких панелей, как Canvas и Grid позволяет дочерним пользователям совместно использовать одно и то же пространство координат.

Panel также определяет метод OnRender, который можно использовать для переопределения шаблонного поведения презентации элемента Panel.

Вложенные свойства

Производные элементы панели используют широкое использование присоединенных свойств. Присоединенное свойство — это специализированная форма свойства зависимости, которое не имеет стандартной "оболочки" свойства исполняемой среды общего языка (CLR). Присоединенные свойства имеют специализированный синтаксис в языке разметки расширяемых приложений (XAML), который можно увидеть в нескольких приведенных ниже примерах.

Одной из целей присоединенного свойства является разрешение дочерних элементов хранить уникальные значения свойства, которое фактически определяет родительский элемент. Применение этой функции позволяет дочерним элементам сообщать родительскому элементу, как они хотят быть представлены в пользовательском интерфейсе, что крайне полезно для макета приложения. Дополнительные сведения см. в разделе "Общие сведения о присоединенных свойствах".

Производные элементы панели

Многие объекты наследуются от Panel, но не все из них предназначены для использования в качестве провайдеров корневого макета. Шесть определенных классов панелей (Canvas, , DockPanelGridStackPanel, VirtualizingStackPanelиWrapPanel) предназначены специально для создания пользовательского интерфейса приложения.

Каждый элемент панели инкапсулирует свои собственные специальные функциональные возможности, как показано в следующей таблице.

Имя элемента	Панель пользовательского интерфейса?	Description
Canvas	Да	Определяет область, в которой можно явно размещать дочерние элементы по координатам относительно Canvas области.
DockPanel	Да	Определяет область, в которой можно упорядочить дочерние элементы по горизонтали или по вертикали относительно друг друга.
Grid	Да	Определяет гибкую область сетки, состоящую из столбцов и строк. С помощью свойства Margin можно точно разместить дочерние элементы Grid.
StackPanel	Да	Упорядочивает дочерние элементы в одну строку, которая может быть ориентирована по горизонтали или по вертикали.
TabPanel	нет	Обрабатывает макет кнопок вкладок в объекте TabControl.
ToolBarOverflowPanel	нет	Упорядочивает содержимое в элементе управления ToolBar.
UniformGrid	нет	UniformGrid используется для размещения дочерних элементов в сетке, где все ячейки имеют одинаковый размер.
VirtualizingPanel	нет	Предоставляет базовый класс для панелей, которые могут виртуализировать коллекцию своих дочерних элементов.
VirtualizingStackPanel	Да	Упорядочивает и виртуализирует содержимое в одной строке, ориентированной по горизонтали или по вертикали.
WrapPanel	Да	WrapPanel позиционирует дочерние элементы в последовательной позиции слева направо, разбивая содержимое на следующую строку по краю содержащего поля. Последующее упорядочение происходит последовательно от верхнего до нижнего Orientation или справа налево в зависимости от значения свойства.

Панели пользовательского интерфейса

WPF предоставляет шесть классов панелей, оптимизированных для поддержки сценариев пользовательского интерфейса: Canvas, , DockPanelGrid, StackPanelVirtualizingStackPanelи WrapPanel. Эти элементы панели легко использовать, универсальные и расширяемые достаточно для большинства приложений.

Каждый производный Panel элемент обрабатывает ограничения размера по-разному. Понимание того, как Panel управляет ограничениями в горизонтальном или вертикальном направлении, может сделать макет более предсказуемым.

Имя панели	X-Измерение	Измерение y
Canvas	Ограниченный содержанием	Ограниченный содержанием
DockPanel	Вынужденный	Вынужденный
StackPanel (вертикальная ориентация)	Вынужденный	Ограниченный содержанием
StackPanel (горизонтальная ориентация)	Ограниченный содержанием	Вынужденный
Grid	Вынужденный	Ограничение, за исключением случаев, когда Auto применяются к строкам и столбцам
WrapPanel	Ограниченный содержанием	Ограниченный содержанием

Более подробные описания и примеры использования каждого из этих элементов можно найти в следующих разделах.

Холст

Элемент Canvas позволяет размещать содержимое в соответствии с абсолютными координатами x и y . Элементы можно нарисовать в уникальном месте. Если элементы занимают те же координаты, порядок, в котором они отображаются в разметке, определяет порядок рисования элементов.

Canvas обеспечивает наиболее гибкую поддержку макета любого Panel. Свойства высоты и ширины используются для определения области холста, а элементы внутри присваиваются абсолютные координаты относительно области родительского Canvasэлемента. Четыре присоединенных свойства, Canvas.LeftCanvas.TopCanvas.Right и Canvas.Bottom, позволяют точно управлять размещением объектов в пределах, Canvasчто позволяет разработчику размещать и упорядочивать элементы точно на экране.

ClipToBounds на холсте

Canvas может размещать дочерние элементы в любой позиции на экране, даже в координатах, которые находятся вне его собственных определенных Height и Width. Кроме того, Canvas не влияет на размер своих дочерних элементов. В результате дочерний элемент может перезаписывать другие элементы за пределами ограничивающего прямоугольника родительского Canvasэлемента. По умолчанию дочерние элементы Canvas могут быть нарисованы вне границ родительского элемента Canvas. Если вы не хотите, чтобы это поведение имело место, установите свойству ClipToBounds значение true. Этот параметр заставляет Canvas обрезаться до собственных размеров. Canvas является единственным элементом макета, который позволяет отрисовывать дочерние элементы вне своих границ.

Это поведение показано в примере сравнения свойств ширины.

DockPanel

Элемент DockPanel использует присоединенное свойство, заданное DockPanel.Dock в дочерних элементах содержимого, для размещения содержимого по краям контейнера. Если установить DockPanel.Dock на Top или Bottom, он размещает дочерние элементы выше или ниже друг друга. Если вы устанавливаете DockPanel.Dock в Left или Right, то дочерние элементы позиционируются слева или справа друг от друга. Свойство LastChildFill определяет положение конечного элемента, добавленного в качестве дочернего DockPanelэлемента.

Можно использовать DockPanel для размещения группы связанных элементов управления, таких как набор кнопок. Кроме того, его можно использовать для создания пользовательского интерфейса с панелями, аналогичного тому, который используется в Microsoft Outlook.

Подгонка размера под содержимое

Если вы не указываете свойства Height и Width, то DockPanel подстраивает свои размеры под содержимое. Размер может увеличиваться или уменьшаться, чтобы приспособиться к размеру дочерних элементов. Однако при указании этих свойств, если нет места для следующего дочернего элемента, DockPanel не отображает этот дочерний элемент или последующие дочерние элементы и не измеряет их.

LastChildFill

По умолчанию последний дочерний элемент DockPanel заполняет оставшееся нераспределенное пространство. Если вы не хотите этого поведения, установите для свойства LastChildFill значение false.

Примеры

В следующем примере показано, как с помощью Canvas абсолютно позиционировать содержимое. Этот код создает три квадрата 100 пикселей. Первый квадрат красный, и его верхняя левая позиция (x, y) указана как (0, 0). Второй квадрат зеленый, а его верхняя левая позиция — (100, 100), чуть ниже и справа от первой площади. Третий квадрат синий, и его верхняя левая позиция — (50, 50), таким образом, охватывая нижний правый квадрант первого квадрата и верхний левый квадрант второго. Поскольку третий квадрат выложен последним, он визуально находится поверх других двух квадратов, то есть перекрывающиеся части принимают цвет третьего квадрата.

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

Скомпилированное приложение дает новый пользовательский интерфейс, который выглядит следующим образом.

В следующем примере показано, как секционировать пространство с помощью элемента DockPanel. В примере добавляются пять Border элементов в качестве дочерних элементов родительского DockPanel элемента. Каждый дочерний элемент использует разное свойство позиционирования DockPanel, чтобы разделить пространство. Последний элемент "заполняет" оставшееся нераспределированное пространство.

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

См. также

• Обзор выравнивания, полей и заполнения
• Общие сведения о присоединенных свойствах
• Создание примера настраиваемой панели упаковки содержимого
• Макет
• Макет и проектирование
• Просмотрщик прокрутки
• Использование автоматического отображения макета
• Пошаговое руководство: Моё первое настольное приложение WPF
• Пример коллекции элементов управления WPF
• Пример коллекции макетов WPF