Как tabcontrol сделать по размеру окна
Обновлено: 27.04.2024
Коротко: необходимо сделать так, чтобы вкладки элемента TabControl масштабировались в соответствии с размером самого приложения (грубо говоря, если увеличить размер окна в ширину, то и вкладки должны стать шире, но с сохранением пропорций).
Более подробно: только начинаю изучать WPF. XAML осваиваю методом тыка. Если важно, то это первая программа WPF, до этого были WinForms. Сейчас возникла необходимость написать приложение для заметок. Использовать именно элемент TabControl хочу как некий главный "контейнер". То есть первая вкладка - сам текстовый редактор, вторая - "сборник" всех заметок и так далее.
- Если с масштабированием самого элемента TabControl на всё окно всё оказалось довольно легко, то вот с вкладками непонятно, как и что писать, куда смотреть, чтобы они тоже увеличивались, и картинка развёрнутого на весь экран приложения была некой увеличенной копией того, что делается в конструкторе. Будет очень здорово, если объяснение будет максимально подробным, доступным и понятным, чтобы была возможность не только списать, но и понять
- Как разместить календарь, чтобы он тоже масштабировался с сохранением пропорций? Я хочу разместить его в левом верхнем углу, сместив вкладки вниз, а также сделать для него отдельную кнопку, при нажатии на которую он бы увеличивался практически на всё окно, а то, что находится "под ним" (TabControl с текстовым редактором), как бы тускнело/темнело.
- Как разместить элемент в TabItem без написания руками? Имеется в виду исключительно при помощи конструктора, всё-таки мне так пока гораздо проще.
MVVM. Если окно содержит 1 TabControl, который в себе содержит много вкладок и в каждой может быть другой TabControl с вкладками
Я сделал так: Создал UserControl, в него поместил TabControl создал вкладки, во вкладки начал.
Копирование вкладок TabControl
Как быть если я хочу по созданной в XAML вкладке создать много вкладок-копий, но со своим.
Добавление вкладок в элемент TabControl
в XAML объявлен tabControl <TabControl HorizontalAlignment="Left" Name="tabControl1".
Получить контент вкладок tabcontrol
Добрый день! У меня есть tabContorol, на каждом контроле создается TextEditor, в текстедиторе.
Размещение элементов управления в Windows Forms определяется не только элементом управления, но и родительским элементом управления. В этой статье описываются различные параметры элементов управления, а также различные типы родительских контейнеров, которые влияют на компоновку.
Фиксированное расположение и размер
Расположение на родительском элементе определяется значением свойства Location относительно левого верхнего угла поверхности родительского элемента управления. Координата верхнего левого угла в родительском элементе — (x0,y0) . Размер элемента управления определяется свойством Size и представляет ширину и высоту элемента управления.
При добавлении элемента управления на родительский элемент, который применяет автоматическое размещение, положение и размер элемента управления изменяются. В этом случае в зависимости от типа родительского элемента скорректировать расположение и размер элемента управления вручную не удастся.
Свойства MaximumSize и MinimumSize помогают задать минимальное и максимальное пространство, которое может использовать элемент управления.
Поля и заполнение
Существует два свойства элемента управления, помогающие точно размещать элементы управления: Margin и Padding .
Свойство Margin определяет поле вокруг элемента управления, благодаря которому обеспечивается определенное расстояние между границами этого элемента и другими элементами.
Свойство Padding определяет поле внутри элемента управления, благодаря которому обеспечивается определенное расстояние между содержимым элемента управления (например, значением свойства Text) и его границами.
На следующем рисунке показаны Margin Свойства и Padding элемента управления.
конструктор Visual Studio будет учитывать эти свойства при размещении и изменении размеров элементов управления. Линии привязки отображаются в виде руководств, помогающих остаться за пределами указанного поля элемента управления. например, Visual Studio отображает линию привязки при перетаскивании элемента управления рядом с другим элементом управления:
Автоматическое размещение и размер
Элементы управления могут размещаться в родительском элементе автоматически. Некоторые родительские контейнеры выполняют размещение принудительно, в то время как другие используют параметры управления, определяющие размещение. Существует два свойства элемента управления, которые помогают автоматически размещать и изменять размер в пределах родительского элемента: Dock и Anchor.
На автоматическое размещение может влиять порядок отображения. Порядок, в котором отображается элемент управления, определяется индексом элемента управления в коллекции Controls родительского элемента. Этот индекс называется Z-order . Каждый элемент управления отображается в порядке, в котором он представлен в коллекции. Это означает, что первый элемент в коллекции отображается последним, а последний элемент — первым.
Свойства MinimumSize и MaximumSize помогают задать минимальное и максимальное пространство, которое может использовать элемент управления.
Панель закрепления
Свойство Dock задает, какая граница элемента управления выравнивается по соответствующей стороне родительского элемента и как изменяется размер элемента управления в пределах родительского элемента.
Когда элемент управления закреплен, контейнер определяет пространство, которое он должен занимать, а затем соответствующим образом изменяет размер элемента управления и помещает его. Ширина и высота элемента управления по-прежнему соблюдаются с учетом стиля закрепления. Например, если элемент управления закреплен в верхней части, Height элемента управления соблюдается, тогда как Width корректируется автоматически. Если элемент управления закреплен слева, Width элемента управления соблюдается, тогда как Height корректируется автоматически.
Location элемента управления нельзя задать вручную, поскольку при закреплении элемента управления его положение контролируется автоматически.
Индекс Z-order элемента управления влияет на закрепление. После размещения закрепленных элементов управления они занимают выделенное для них пространство. Например, если элемент управления отображается первым и закрепляется в верхней части, он займет всю ширину контейнера. Если следующий элемент управления закреплен слева, ему будет выделено меньше свободного места.
При изменении индекса Z-order доступное начальное пространство элемента управления, закрепленного слева, будет больше. Элемент управления использует всю высоту контейнера. Элемент управления, закрепленный вверху, имеет меньше свободного места.
По мере расширения и сжатия контейнера элементы управления, закрепленные в контейнере, перемещаются и изменяют свой размер для сохранения заданных параметров.
Если на одной стороне контейнера закреплены несколько элементов управления, они группируются в соответствии с их индексами Z-order .
Привязка
Привязка элемента управления позволяет привязать элемент управления к одной или нескольким сторонам родительского контейнера. По мере изменения размера контейнера любой дочерний элемент управления будет сохранять заданное расстояние до привязанной стороны.
Элемент управления можно привязать к одной или нескольким сторонам без ограничений. Привязка задается свойством Anchor.
Автоматическое изменение размеров
Свойство AutoSize позволяет элементу управления изменять свой размер, если это необходимо, в соответствии с размером, заданным свойством PreferredSize. Изменение размеров конкретных элементов управления регулируется заданием свойства AutoSizeMode .
Свойство AutoSize поддерживают только некоторые элементы управления. Кроме того, некоторые элементы управления, поддерживающие свойство AutoSize, также поддерживают свойство AutoSizeMode .
AutoSizeMode - свойство
AutoSizeModeСвойство обеспечивает более детализированный контроль над поведением по умолчанию AutoSize . AutoSizeMode Свойство определяет, как размер элемента управления изменяется в соответствии с его содержимым. Например, содержимым может быть текст для Button элемента управления или дочерние элементы управления для контейнера.
В следующем списке приведены AutoSizeMode значения и их поведение.
Элемент управления растет или сжимается, чтобы охватывать его содержимое.
MinimumSizeЗначения и MaximumSize учитываются, но текущее значение Size свойства игнорируется.
Это то же поведение, что и элементы управления со AutoSize свойством и без AutoSizeMode Свойства.
Элемент управления растет столько же, сколько необходимо для того, чтобы охватывать его содержимое, но не будет уменьшаться меньше, чем значение, заданное Size свойством.
Это значение по умолчанию для AutoSizeMode .
Элементы управления, поддерживающие свойство AutoSize
В следующей таблице описывается уровень поддержки автоматического изменения размера с помощью элемента управления.
| Control | AutoSize поддерживается | AutoSizeMode поддерживается |
|---|---|---|
| Button | ✔️ | ✔️ |
| CheckedListBox | ✔️ | ✔️ |
| FlowLayoutPanel | ✔️ | ✔️ |
| Form | ✔️ | ✔️ |
| GroupBox | ✔️ | ✔️ |
| Panel | ✔️ | ✔️ |
| TableLayoutPanel | ✔️ | ✔️ |
| CheckBox | ✔️ | ❌ |
| DomainUpDown | ✔️ | ❌ |
| Label | ✔️ | ❌ |
| LinkLabel | ✔️ | ❌ |
| MaskedTextBox | ✔️ | ❌ |
| NumericUpDown | ✔️ | ❌ |
| RadioButton | ✔️ | ❌ |
| TextBox | ✔️ | ❌ |
| TrackBar | ✔️ | ❌ |
| CheckedListBox | ❌ | ❌ |
| ComboBox | ❌ | ❌ |
| DataGridView | ❌ | ❌ |
| DateTimePicker | ❌ | ❌ |
| ListBox | ❌ | ❌ |
| ListView | ❌ | ❌ |
| MaskedTextBox | ❌ | ❌ |
| MonthCalendar | ❌ | ❌ |
| ProgressBar | ❌ | ❌ |
| PropertyGrid | ❌ | ❌ |
| RichTextBox | ❌ | ❌ |
| SplitContainer | ❌ | ❌ |
| TabControl | ❌ | ❌ |
| TabPage | ❌ | ❌ |
| TreeView | ❌ | ❌ |
| WebBrowser | ❌ | ❌ |
| ScrollBar | ❌ | ❌ |
Автоподбор размеров в среде разработки
В следующей таблице описывается поведение элемента управления во время разработки в зависимости от значения AutoSize свойств и AutoSizeMode .
SelectionRulesПереопределите свойство, чтобы определить, находится ли данный элемент управления в изменяемом пользователем состоянии. В следующей таблице "не удается изменить размер" означает Moveable , что "может изменять размер" означает AllSizeable и Moveable .
чтобы повысить производительность, конструктор Windows Forms в Visual Studio затеняет AutoSize свойство для Form класса. Во время разработки форма ведет себя так, будто AutoSize свойство имеет значение false , независимо от его фактической настройки. Во время выполнения не выполняется никаких специальных размещений, а AutoSize свойство применяется в соответствии с параметром свойства.
Контейнер: Form
Form является основным объектом Windows Forms. Формы обычно всегда отображаются в приложении Windows Forms. Формы содержат элементы управления и учитывают Location Свойства и Size элемента управления для размещения вручную. Формы также учитывают свойство Dock для автоматического размещения.
Как правило, на краях формы имеются маркеры, позволяющие пользователю изменить ее размер. Свойство Anchor элемента управления позволяет увеличивать и уменьшать размер элемента управления при изменении размера формы.
Контейнер: Panel
Элемент управления Panel аналогичен форме в том, что он просто группирует элементы управления вместе. Он поддерживает те же стили автоматического размещения, что и форма. Подробнее см. в разделе Контейнер: Form.
Панель сливается с родительским элементом и обрезает все области элемента управления, находящиеся за границами панели. Если элемент управления выходит за границы панели, а свойство AutoScroll имеет значение true , появляются полосы прокрутки, с помощью которых пользователь может прокручивать панель.
В отличие от группы панель не содержит заголовок и границу.
На изображении выше показана панель с заданным свойством BorderStyle, чтобы продемонстрировать границы панели.
Контейнер: Группа
Элемент управления GroupBox предоставляет возможность идентифицируемой группировки других элементов управления. Как правило, группа используется для разделения формы на функциональные области. Например, у вас может быть форма для ввода персональных данных, в которой следует сгруппировать поля, связанные с адресом. Во время разработки можно с легкостью переместить группу вместе со всеми содержащимися в ней элементами управления.
Группа поддерживает те же стили автоматического размещения, что и форма. Подробнее см. в разделе Контейнер: Form. Группа также обрезает любую часть элемента управления, которая выходит за пределы панели.
В отличие от панели, в группе нет возможности прокрутить содержимого и нет полос прокрутки.
Контейнер: Потоковый макет
Элемент управления FlowLayoutPanel упорядочивает свое содержимое в горизонтальном или вертикальном направлении. Его содержимое может переноситься из одной строки или столбца в следующую строку или столбец. Кроме того, вместо переноса содержимое может обрезаться.
Чтобы определить направление содержимого, задайте свойство FlowDirection. Содержимое элемента управления FlowLayoutPanel размещается правильно при использовании направления справа налево. С помощью свойства WrapContents можно указать, должно ли содержимое элемента управления FlowLayoutPanel переноситься или обрезаться.
Если свойству AutoSize присвоено значение true , размер элемента управления FlowLayoutPanel автоматически изменяется в соответствии с содержимым. Дочерние элементы управления также получают свойство FlowBreak . Если свойству FlowBreak присвоено значение true , элементы управления внутри элемента FlowLayoutPanel перестают размещаться в текущем направлении и переносятся на следующую строку или в следующий столбец.
На изображении выше представлены два элемента управления FlowLayoutPanel с заданным свойством BorderStyle, чтобы продемонстрировать границы панели.
Контейнер: табличный макет
Элемент управления TableLayoutPanel упорядочивает содержимое в сетке. Так как макет строится как во время разработки, так и во время выполнения, его можно изменять динамически по мере изменения среды приложения. Это позволяет пропорционально изменять размер элементов управления на панели с учетом изменений, например изменения размера родительского элемента управления или изменения длины текста в результате локализации.
Любой элемент управления Windows Forms, включая другие экземпляры TableLayoutPanel, может быть дочерним относительно элемента TableLayoutPanel. Это позволяет создавать сложные макеты, динамически меняющиеся во время выполнения.
Также можно управлять направлением расширения элемента управления TableLayoutPanel (горизонтальное или вертикальное) после его заполнения дочерними элементами управления. По умолчанию элемент управления TableLayoutPanel развертывается вниз путем добавления строк.
Для изменения размера и стиля строк и столбцов можно использовать свойства RowStyles и ColumnStyles. Свойства строк и столбцов можно задавать по отдельности.
Элемент управления TableLayoutPanel добавляет следующие свойства в свои дочерние элементы управления: Cell , Column , Row , ColumnSpan и RowSpan .
На изображении выше показана таблица с заданным свойством CellBorderStyle, чтобы продемонстрировать границы каждой ячейки.
Контейнер: контейнер разбиения
Элемент управления Windows Forms SplitContainer состоит из двух панелей, разделенных подвижной полосой. При наведении указателя мыши на полосу его форма изменяется, показывая, что полоса является перемещаемой.
С помощью элемента управления SplitContainer можно создавать сложные пользовательские интерфейсы. Часто выбор на одной панели определяет объекты, представленные на другой. Такой подход является эффективным для отображения и просмотра информации. Две панели позволяют группировать информацию, а полоса или разделитель упрощают изменение размера панелей.
На изображении выше имеется контейнер разбиения для создания левой и правой областей. В правой панели содержится второй контейнер разбиения, для которого свойству Orientation задано значение Vertical. Свойство BorderStyle задается, чтобы продемонстрировать границы каждой панели.
Контейнер: Элемент управления табуляции
Элемент управления TabControl используется для отображения нескольких вкладок, аналогичных разделителям в записной книжке или меткам в наборе папок в картотеке. Вкладки могут содержать изображения и другие элементы управления. Используйте вкладки для создания многостраничного диалогового окна, которое появляется во многих местах в операционной системе Windows, например на панели управления и в свойствах отображения. Кроме того, TabControl можно использовать для создания страниц свойств, которые используются для задания группы связанных свойств.
Наиболее важным свойством TabControl является TabPages, которое содержит отдельные вкладки. Каждая отдельная вкладка является объектом TabPage.
The standard System.Windows.Forms.TabControl component draws a border around the TabPages it contains. If you set its Dock to Fill, these borders run up to the edge of the parent control, but they're still there, taking up screen space.
In Visual Studio, if you dock two windows in the same place, you get a TabControl-like set of tabs along the bottom, but no borders along the sides.
Is it possible to get a TabControl to display its TabPages in this manner, with no wasted screen space at the sides? If possible, I'd like to avoid solutions that involve painting the control myself.
@Simon, You can use Phil Wright's solution and dynamically set the width of your TabControl at runtime to take into account different user settings.
@Stewbob: If I have to do anything at runtime to take into account different user settings, then it's not the solution I'm after.
8 Answers 8
- Remove the height and width attributes from TabControl
- Set horizontal and vertical alignment to stretch
e.g. won't stretch;
e.g. will stretch;
Instead of using the Dock property you should try using the Anchor to anchor each of the four sides. Then you need to position the TabControl so it is positioned a couple of pixels bigger on all sides that the parent. That way the borders are hidden because they cannot be drawn when behind the parent control.
The other responses about using the Anchor property in combination with setting the size so it is just a bit larger than the actual window might work, but I think it might look a bit odd visually. It should work regardless of the theme and accessibility settings, but you may end up having to programmatically set the size to be a few pixels larger than the parent.
Is it possible to get a TabControl to display its TabPages in this manner, with no wasted screen space at the sides? If possible, I'd like to avoid solutions that involve painting the control myself.
If I understand your question correctly, and reading through the currently accepted answer, you want to know how to make the Tabs for a TabControl stretch across the whole Control with no wasted space like below:
To do this, set cTabControl.Dock = Fill, then make the following function and call it in Form1_Shown() and Form1_Resize(), or whatever "Resize()" functions you've created.
Элемент TabControl позволяет создать элемент управления с несколькими вкладками. И каждая вкладка будет хранить некоторый набор других элементов управления, как кнопки, текстовые поля и др. Каждая вкладка представлена классом TabPage.
Чтобы настроить вкладки элемента TabControl используем свойство TabPages. При переносе элемента TabControl с панели инструментов на форму по умолчанию создаются две вкладки - tabPage1 и tabPage2. Изменим их отображение с помощью свойства TabPages:
Нам откроется окно редактирования/добавления и удаления вкладок:
Каждая вкладка представляет своего рода панель, на которую мы можем добавить другие элементы управления, а также заголовок, с помощью которого мы можем переключаться по вкладкам. Текст заголовка задается с помощью свойства Text.
Управление вкладками в коде
Для добавления новой вкладки нам надо ее создать и добавить в коллекцию tabControl1.TabPages с помощью метода Add:
Удаление так же просто:
Получая в коллекции tabControl1.TabPages нужную вкладку по индексу, мы можем ей легко манипулировать:
SplitContainer
Элемент SplitContainer позволяет создавать две разделенные сплитером панели. Изменяя положение сплитера, можно изменить размеры этих панелей.
Используя свойство Orientation , можно задать горизонтальное или вертикальное отображение сплитера на форму. В данном случае это свойство принимает значения Horisontal и Vertical соответственно.
В случае, когда надо запретить изменение положения сплиттера, то можно присвоить свойству IsSplitterFixed значение true . Таким образом, сплитер окажется фиксированным, и мы не сможем поменять его положение.
По умолчанию при растяжении формы или ее сужении также будет меняться размер обеих панелей сплитконтейнера. Однако мы можем закрепить за одной панелью фиксированную ширину (при вертикальной ориентации сплиттера) или высоту (при горизонтальной ориентации сплиттера). Для этого нам надо установить у элемента SplitContainer свойство FixedPanel . В качестве значения оно принимает панель, которую надо зафиксировать:
Чтобы изменить положение сплитера в коде, мы можем управлять свойством SplitterDistance , которое задает положение сплиттера в пикселях от левого или верхнего края элемента SplitContainer. А с помощью свойства SplitterIncrement можно задать шаг, на который будет перемещаться сплиттер при движении его с помощью клавиш-стрелок.
Чтобы скрыть одну из двух панелей, мы можем установить свойство Panel1Collapsed или Panel2Collapsed в true
Также мы можем установить позицию элемента в коде:
Установка размеров
С помощью свойства Size можно задать размеры элемента:
Дополнительные свойства MaximumSize и MinimumSize позволяют ограничить минимальный и максимальный размеры.
Установка свойств в коде:
Свойство Anchor
Дополнительные возможности по позиционировании элемента позволяет определить свойство Anchor. Это свойство определяет расстояние между одной из сторон элемента и стороной контейнера. И если при работе с контейнером мы будем его растягивать, то вместе с ним будет растягиваться и вложенный элемент.
По умолчанию у каждого добавляемого элемента это свойство равно Top, Left :
Это значит, что если мы будем растягивать форму влево или вверх, то элемент сохранит расстояние от левой и верхней границы элемента до границ контейнера, в качестве которого выступает форма.
Мы можем задать четыре возможных значения для этого свойства или их комбинацию:
Например, если мы изменим значение этого свойства на противоположное - Bottom, Right , тогда у нас будет неизменным расстояние между правой и нижней стороной элемента и формой.
При этом надо отметить, что данное свойство учитывает расстояние до границ контейнера, а не формы. То есть если у нас на форме есть элемент Panel, а на Panel расположена кнопка, то на кнопку будет влиять изменение границ Panel, а не формы. Растяжение формы будет в этом случае влиять только, если оно влияет на контейнер Panel.
Чтобы задать это свойство в коде, надо использовать перечисление AnchorStyles :
Свойство Dock
Свойство Dock позволяет прикрепить элемент к определенной стороне контейнера. По умолчанию оно имеет значение None, но также позволяет задать еще пять значений:
Читайте также: