Лабораторная работа № 2-4
.pdfЛабораторная работа № 2-4 Компоновка элементов управления с помощью контейнерных элементов управления
Цель работы: научиться добавлять элементы управления в форму или в контейнерный элемент управления. А также настраивать разные виды контейнерных элементов управления для создания динамических и разнообразных компоновок элементов управления в своей форме.
Теоретические сведения:
Контейнерные элементы управления — это специализированные элементы управления, выступающие в роли настраиваемого вместилища для других элементов управления. К контейнерным элементам управления относятся Panel, FlowLayoutPanel и SplitContainer. Они предоставляют форме логические и физические подразделы, которые могут группировать другие элементы управления в единообразные подгруппы пользовательского интерфейса. Например, элемент управления GroupBox содержит в себе набор связанных элементов управления RadioButton. Контейнерные элементы управления помогут вам создать ощущение стиля или информационного потока в пользовательском интерфейсе и позволят согласованно управлять элементами управления, которые содержатся в них.
Если внести изменения в свойства контейнерного элемента управления, который содержит другие элементы управления, то на них также могут отразиться эти изменения. К примеру, если свойство Enabled панели задать значение False, то все элементы управления, которые содержит в себе панель, будут блокированы. Подобным образом, изменения свойств, связанных с пользовательским интерфейсом, например BackColor, Visible или Font, также распространяются и на элементы управления, которые он в себе содержит. Обратите внимание, что вы можете вручную внести изменения в любое свойство содержащегося в контейнере элемента управления, но если контейнер заблокирован, то все элементы управления внутри него будут недоступны, несмотря на индивидуальные настройки их свойств.
Коллекция Controls
У каждой формы и контейнерного элемента управления есть свойство Controls, представляющее собой коллекцию элементов управления, которые содержит в себе эта форма или элемент управления. Если во время разработки добавить элемент управления в форму или в контейнерный элемент управления, конструктор автоматически добавит его в коллекцию элементов управления этой формы или контейнерного элемента управления и задаст новому элементу управления соответствующее свойство, определяющее его расположение. Кроме того, можно динамически добавить новый элементам управления во время выполнения, создав его самостоятельно и добавив в коллекцию элементов управления.
Добавление в конструкторе элемента управления в форму или контейнерный элемент управления
Существует четыре способа добавления в конструкторе элемента управления в форму или контейнерный элемент управления.
1.Перетащить элемент управления из Toolbox в форму или в контейнерный элемент управления;
2.Выбрать элемент управления в Toolbox и нарисовать его в форме с помощью мыши;
3.Выбрать элемент управления в Toolbox и дважды щелкнуть форму;
4.Дважды щелкнуть элемент управления в Toolbox.
Добавление элемента управления в форму или контейнерный элемент управления во время выполнения
Чтобы добавить элемент управления в форму или контейнерный элемент управления во время выполнения, самостоятельно создайте новый экземпляр элемента управления и добавьте его в коллекцию Controls формы, как показано в следующем примере. Любые свойства элемента управления, например Location или Text, должны задаваться до того, как они будут добавлены в коллекцию элементов управления. Следующий пример кода предполагает, что вы добавили контейнер Panel с именем Panel1:
Dim aButton As New Button() aButton.Location = New Point(20, 20) aButton.Text = ''Text Button'' Panel1.Controls.Add(aButton) Me.Controls.Add(aButton)
СвойствоAnchor
Свойство Anchor и Dock элемента управления определяют его поведение внутри формы или родительского элемента управления. Свойство Anchor позволяет определить постоянное расстояние между границами элемента управления и границами формы или другого контейнера. Таким образом, если пользователь изменяет размеры формы во время выполнения, края элемента управления всегда будут находиться на определенном расстоянии от краев формы. Значением по умолчанию свойства Anchor является Top, Left, означающее, что верхний и левый края элемента управления всегда будут оставаться на одном расстоянии от верхнего и левого краев формы. Если свойству Anchor задать, например, значение Bottom, Right, элемент управления будет «плавать», когда размеры формы будут изменять, чтобы сохранить постоянное расстояние между нижними и правым краями формы. Если свойству Anchor задать противоположные свойства, такие как Top и Bottom, элемент управления растянется, чтобы сохранить постоянное расстояние от краев элемента управления до краев формы.
Свойству Anchor можно задать любую комбинацию значений Top, Bottom, Left, Right или не задать ни одно из них. В окне Properties представлен визуальный интерфейс, который
поможет вам выбрать значение для свойстваAnchor Рис. 1. СвойствоAnchor.
Свойство Dock
Свойство Dock позволяет прикрепить элемент управления к краю родительского элемента. Родительский элемент управления может быть формой или контейнерным элементом управления, например Panel или TabControl.
Свойство Dock, как и свойство Anchor, предоставляет специальный визуальный интерфейс, позволяющий графически выбирать значение свойства. Интерфейс показан на рис. 2.
Рис. 2. Свойство Dock.
Чтобы задать свойство Dock, щелкните тот раздел интерфейса, который соответствует месту, к которому вы бы хотели прикрепить элемент управления. Например, чтобы обеспечить стыковку элемента управления с правой стороной формы, щелкните полоску с левой стороны интерфейса. Для отключения стыковки выберите None. Щелкнув в центре интерфейс свойство Dock, вы задаете ему значение Fill, означающее, что элемент управления будет прикреплен ко всем четырем сторонам формы и заполнит элемент управления, в котором находится.
Элемент управления GroupBox
GroupBox — это контейнерный элемент управления, который представляет собой подраздел формы, окруженный границей. В отличие от элемента управления Panel, он не предоставляет ни полос прокрутки, ни каких-либо специализированных возможностей разбивки. Элемент управления GroupBox может иметь заголовок, который задается свойством Text, либо не иметь его, если это свойство содержит пустую строку.
Чаще всего элементы управления GroupBox применяют для группировки элементов управления RadioButton. Последние, расположенные в одном элементе GroupBox, являются взаимоисключающими, но при этом не исключают других элементов RadioButton формы или других элементов GroupBox.
Элемент управления Panel
Элемент управления Panel создает пораздел формы, который может содержать другие элементы упралвения. Рассматриваемый элемент управления может не выделяться на фоне окружающей его формы или охватываться границей, что определяет свойство BorderStyle в зависимости от присваиваемого ему значения: None — без границы, FixedSingle — тонкая граница или Fixed3D — объемная граница.
Элемент управления Panel — прокручиваемый элемент. Это значит, что он поддерживает горизонтальную и вертикальную полосы прокрутки. Элемент управления Panel может содержать элементы за пределами своих видимых границ. Когда свойству AutoScroll задано значение True, полосы прокрутки автоматически становятся доступными, если какой-либо элемент управления помещается за пределами видимых границ элемента. В случае присвоения свойству AutoScroll значения False элементы за пределами видимых границ панели делаются недоступными. Основные свойства элемента управления Panel представлены ниже.
Элемент управления FlowLayoutPanel
Элемент управления FlowLayoutPanel — это подкласс элемента управления Panel. Так же как и элемент управления Panel, он часто используется при создании особых подразделов формы, содержащих соответствующие элементы управления. Однако FlowLayoutPanel, в отличие от элемента управления Panel, динамически переставляет
элементы, которые содержит, когда его размеры изменяются во время разработки или выполнения. Это значительно упрощает работу пользовательского интерфейса, поскольку расположение элемента управления автоматически подстраивается под размеры FlowLayoutPanel и обеспечивает динамическую перестройку пользовательского интерфейса, если размеры FlowLayoutPanel изменяются во время выполнения.
Как и Panel, элемент управления FlowLayoutPanel тоже является прокручиваемым элементом управления. Полосы прокрутки активны, когда свойству AutoScroll задано значение True, и отключены, если этому свойству задано значение False.
По умолчанию порядок следования элементов управления в FlowLayoutPanel — справа налево. Это значит, что элементы управления, расположенные в FlowLayoutPanel, будут находиться в левом верхнем углу и размещаются вправо до тех пор, пока не достигнут края панели. Такое поведение контролируется свойством FlowDirection, которому может быть задано четыре значения заливки в FlowLayoutPanel: LeftToRight — по умолчанию, RightToLeft — справо налево, TopDown — сверху вниз и BottomUp — снизу вверх.
Когда будет достигнут конец строки (при назначении свойство FlowDirection значение
LeftToRight или RightToLeft) или столбца (в случае значения TopDown или BottomUp),
следующие элементы управления будут перенесены либо не перенесены в начало следующей строки или столбца в зависимости от того, какое значение задано свойству WrapContents. Если это значение True (которое является значением по умолчанию), элементы управления автоматически переходят в следующий столбец или на следующую строку, а если False — элементы управления не формируют новые строки или столбцы автоматически.
Вы можете самостоятельно создавать разрывы в порядке следования элементов
управления, аналогичные разрыву строк в тексте. Для управления заливкой элементов управления вы должны самостоятельно задать разрывы заливки, когда свойству WrapContents элементы управления FlowLayoutPanel присвоено значение False. Если же вы хотите задать индивидуальные разрывы заливки, то присвойте этому свойству значение True. Прервать заливку на каком-либо элементе управления можно, вызвав метод SetFlowBreak элемента управления FlowLayoutPanel.
Создание разрыва заливки на элементе, содержащем элемент управления
FlowLayoutPanel
1.Задайте разрыв заливки с помощью метода SetFlowBreak, как показано в следующем примере (который предполагает, что элемент управления FlowLayoutPanel с именем Flp и кнопка aButton уже созданы):
Flp.SetFlowBreak(aButton, True)
2.Независимо от того, есть ли в элементе управления FlowLayoutPanel свободное место для продолжения заливки элементов, элемент управления, которому с помощью этого метода был задан разрыв заливки, перейдет на следующую строку (или в следующий столбец, в зависимости от значения свойства FlowDirection) элемента управления
FlowLayoutPanel.
3.Вы можете узнать, был ли задан разрыв заливки конкретному элементу управления, вызвав метод GetFlowBreak, как показано в следующем примере:
If Flp.GetFlowBreak(aButton) Then
'обработка
End If
Ниже перечислены основные свойства и методы элемента управления
FlowLayoutPanel.
Элемент управления TableLayoutPanel
Элемент управления TableLayoutPanel, как и FlowLayoutPanel, является специализированной панелью, помогающей при проектировании и компоновке пользовательского интерфейса. По сути, элемент управления TableLayoutPanel — это таблица с ячейками для индивидуального размещения элементов управления. Подобно другим панелям, она представляет собой прокручиваемый контейнер, предлагающий полосы прокрутки, когда свойствуAutoScroll задано значение True.
Во время разработки элемент управления TableLayoutPanel выглядит в форме как таблица, состоящая из отдельных ячеек. Элементы управления можно перетаскивать из Toolbox в любую ячейку. Как правило. В одну ячейку помещается только один элемент управления, хотя при сложном оформлении пользовательского интерфейса в ячейки элемента управления TableLayoutPanel можно поместить другие контейнерные элементы управления, каждый из которых может содержать множество элементов.
Во время выполнения вид ячеек таблицы и их поведение определяется свойством
CellBorderStyle в зависимости от заданного ему значения: Single, Inset, InsetDouble, Outset, OutsetDouble или OutsetPartial. Когда этому свойству присваивается значение None, то линии ячеек отображаться не будут.
Столбцами и строками TableLayoutPanel управляют коллекции ColumnStyles и RowStyles. Во время разработки вы можете задать стили полям и столбцам, выбрав в окне
Properties коллекцию ColumnStyles или RowStyles и открыв редактор Column And Row Styles,
показанный ниже.
Рис.3. Редактор Colum and Row Styles.
С помощью этого редактора можно изменять стили столбцов и строк, присваивая им различные значения. Так, в случае значения Absolute столбцам и строкам будет назначен фиксированный размер в пикселях, значение Relative задает процентную часть от размера всех столбцов или строк этого стиля, а значениеAutoSize определяет размер столбцов и строк автоматически.
Стили столбцам и полям задаются также в коде при обращении к коллекциям ColumnStyles и RowStyles. Получить доступ к стилю конкретного столбца или строк можно с
помощью его индекса. Следующий пример демонстрирует, как задавать стили:
TableLayoutPanel1.ColumnStyles(0).SizeType = SizeType.Absolute TableLayoutPanel1.ColumnStyles(0).Width = 20 TableLayoutPanel1.ColumnStyles(0).SizeType = SizeType.Percent TableLayoutPanel1.ColumnStyles(0).Height = 50
Если вы задаете стилю строки или столбца тип размера, отличный от SizeType. Absolute, можете также задать значение Width (для столбцов) или Height (для строк) в пикселях или процентах — в зависимости от значения свойств SizeType элемента коллекции
ColumnStyles.
При добавление в TableLayoutPanel новых элементов управления во время выполнения можно использовать одну из двух перегрузок метода TableLayoutPanel.Controls.Add. Первая перегрузка представляет собой стандартный метода
Add:
TableLayoutPanel1.Controls.Add(aButton)
Данный метод просто добавляет элемент управления в коллекцию TableLayoutPanel — и элемент размещается в следующей доступной ячейке таблицы. Если открытых ячеек больше нет, поведение элемента управления TableLayoutPanel определяется значением свойства GrowStyle. Так, в случае значения AddRows для размещения новых элементов управления добавляются дополнительные строки, а значение AddColumns — новые столбцы. При назначении свойству GrowStyle значения FixedSize новые ячейки добавлены не будут. Если вы попытаетесь добавить элемент управления в TableLayoutPanel, когда свойству задано значение FixedSize, появится исключение.
Добавить элемент упралвения в отдельную ячейку можно также с помощью метода Controls.Add, как показано ниже:
TableLayoutPanel1.Controls.Add(aButton, 3, 3)
Нумерация столбцов в элементе управления TableLayoutPanel начинается с 1, а нумерация строк — с 0. Таким образом, приведенный выше пример добаввляет aButton в ячейку, расположенную на пересечении столбца 3 и строки 3, которые пользователь на самом деле видит как столбец 3 и строку 4. Однако обратите внимание, что если ячейка уже занята каким-либо элементом управления, то, возможно, ваш элемент в эту ячейку добавлен не будет. Элементы управления, добавленные в ячейки во время разработки, как правило, имеют преимущество над элементами управления, добавленными во время выполнения. В таких случаях элемент управления просто будет добавлен в следующую доступную ячейку. Если элемент управления добавить в ячейку, где находится другой элемент управления, добавленный во время выполнения, то ячейка, которая уже занимает эту позицию, обычно перемещается на строку ниже в следующую доступную ячейку, освобождая место только что добавленному элемента управления.
Добавление элемента управления в TableLayoutPanel во время выполнения
1.Объявите и создайте экземпляр нового элемента управления в коде;
2.Добавьте элемент управления с помощью метода TableLayoutPanel.Controls.Add. Далее следует пример:
Dim aButton As New Button()
'добавление кнопки в следующую доступную ячейку
TableLayoutPanel1.Controls.Add(aButton)
'добавление кнопки в ячейку (2, 2)
TableLayoutPanel1.Controls.Add(aButton, 2, 2)
Ниже приведен список основных свойств и методов элемента управления
TableLayoutPanel.
Элемент управления TabControl
TabControl дает возможность группировать наборы элементов управления на вкладках, похожих на записи в картотеке или разделители в записной книжке. Например, можно создать страницы свойств для приложения, в котором каждая страница представляет свойства определенного компонента. Элемент управления TabControl служит в качестве контейнера для одного или более элементов управления TabPage, которые, в свою очередь, тоже содержат элементы управления. Пользователь может переходить от одной вкладки к другой (и ее элементам управления), выбирая их в элементе управления TabControl.
TabPages — самое важное свойство элемента управления TabControl. Элементы управления TabPages являются специализированными контейнерными элементами управления, которые могут находиться только в элементах управления TabControl. У каждого элемента управления TabPage есть свой сбоственный набор свойств, который можно отредактировать во время разработки. Для этого необходимо открыть TabPage Collection Editor, как показано на рис. 4.
Рис. 4. Окно TabPage Collection Editor.
Отдельные элементы управления TabPage во многом похожи на элементы управления Panel. Их можно прокручивать, а если свойству AutoScroll задать значение True, они будут отображать полосы прокрутки. У элементов управления TabPage есть свойство Text, которое представляет текст на корешке вкладки в элементе управления TabControl. Кроме того, у элементов управления TabPage, как и у элементов управления Panel, есть свойство BorderStyle с теми же значениями None, FixedSingle и Fixed3D. Основные свойства элемента управления TabPage приведены ниже.
У элемента управления TabControl есть несколько свойств, с помощью которых можно настроить его внешний вид и поведение. Так, свойство Appearance отвечает за внешний вид вкладки. Ему можно задать значение Normal, Buttos и FlatButtons, генерирующие различные визуальные стили. Значения Top, Bottom, Left и Right свойства Alignment определяют расположение вкладок в элементе управления TabControl. У элемента управления TabControl есть также свойство Multiline, которое определяет, может ли он отображать корешки более чем в один ряд. Если данному свойству задано значение True — корешки отображаются в несколько рядов, если False — только в один. Основные свойства элемента управления TabControl приведены ниже.
Элемент управления SplitContainer
Элемент управления SplitContainer создает пораздел формы, где Splitter разделяет его на два элемента управления SplitterPanel, функционирующих подобно элементам управления Panel. Пользователь с помощью мыши может переместить Splitter, изменяя таким образом относительный размер каждого элемента управления SplitterPanel, По умолчанию свойству SplitContainer.Dock задано значение Fill, поскольку чаще всего элементы управления SplitContainer используются для создания разделенных форм Windows.
Два дочерних элемента управления SplitterPanel доступны благодаря свойствам элемента управления SplitContainer — Panel1 и Panel2. С их помощью можно также получать доступ к свойствам элементов управления SplitterPanel, которые находятся в SplitContainer.
Каждый элемент управления SplitterPanel, расположенный в SplitContainer, функционирует, как правило, подобно элементу управления Panel. Элементы управления SplitterPanel содержат в себе элементы управления и отделены от других форм. SplitterPanel могут отображать полосы прокрутки, если свойству AutoScroll задано значение True. У отдельных элементов управления SplitterPanel контейнера SplitContainer нет собственных границ, поэтому в отличие от отдельных элементов управления Panel у них нет свойства BorderStyle. У самого же элемента управления SplitContainer данное свойство присутствует. Подобно свойству BorderStyle элемента управления Panel, ему можно задать значение None, FixedSingle или Fixed3D. С установкой свойства BorderStyle изменяется внешний вид Splitter.
Свойство Orientation определяет ориентацию Splitter. Если ему задано значение Vertical, то Splitter будет расположен в элементе управления SplitContainer вертикально, а если значение Horizontal — горизонтально.
Свойство FixedPanel дает возможность указать в элементе управления SplitContainer панель, которая при изменении размера элемента управления будет сохранять свой размер. Если данному свойству задать значение Panel1, то размеры будет изменять только Panel2, при значении Panel2 — только Panel1, а в случае None — обе панели при изменении размера элемента управления будут пропорционально изменять свои размеры. Обратите внимание, что панель настраивается с помощью свойства FixedPanel толлько тогда, когда изменяются размеры элемента управления SplitContainer. Пользователь может изменить размеры панелей, потяну Splitter мышью.
Чтобы заблокировать возможность передвижения Splitter пользователем с помощью свойства IsSplitterFixed, задайте последнему значение True. Вы можете самостоятельно передвинуть Splitter в коде, изменив в нем свойство SplitterDistance. Это свойство указывает расстояние в пикселях от Splitter до левого края (когда свойству Orientation задано значение Horizontal) или до верхнего края (когда свойству Orientaion задано значение Vertical). Ширину Splitter можно изменить, задав значение свойству SplitterWidth, которое также представлено в пикселях.
Скрыть одну из панелей элемента управления SplitContainer можно с помощью свойства Panel1Collapsed или Panel2Collapsed. Когда будет задано значениеTrue,