mirror of
https://github.com/Stone-Red-Code/docs-desktop.git
synced 2026-09-04 09:06:04 +02:00
merge main branch
This commit is contained in:
CXWTool Service Account
@@ -399,6 +399,30 @@
|
||||
{
|
||||
"source_path": "dotnet-desktop-guide/framework/winforms/controls/how-to-set-the-tab-order.md",
|
||||
"redirect_url": "/dotnet/desktop/winforms/controls/how-to-set-the-tab-order-on-windows-forms?view=netframeworkdesktop-4.8"
|
||||
},
|
||||
{
|
||||
"source_path": "dotnet-desktop-guide/net/winforms/controls/index.md",
|
||||
"redirect_url": "/dotnet/desktop/winforms/controls/overview?view=netdesktop-5.0"
|
||||
},
|
||||
{
|
||||
"source_path": "dotnet-desktop-guide/framework/winforms/controls/overview.md",
|
||||
"redirect_url": "/dotnet/desktop/winforms/controls/index?view=netframeworkdesktop-4.8"
|
||||
},
|
||||
{
|
||||
"source_path": "dotnet-desktop-guide/net/winforms/controls/autosize-property-overview.md",
|
||||
"redirect_url": "/dotnet/desktop/winforms/controls/layout?view=netdesktop-5.0#automatic-sizing"
|
||||
},
|
||||
{
|
||||
"source_path": "dotnet-desktop-guide/net/winforms/controls/how-to-anchor-controls-on-windows-forms.md",
|
||||
"redirect_url": "/dotnet/desktop/winforms/controls/how-to-dock-and-anchor?view=netdesktop-5.0"
|
||||
},
|
||||
{
|
||||
"source_path": "dotnet-desktop-guide/framework/winforms/controls/how-to-dock-and-anchor.md",
|
||||
"redirect_url": "/dotnet/desktop/winforms/controls/how-to-anchor-controls-on-windows-forms?view=netframeworkdesktop-4.8"
|
||||
},
|
||||
{
|
||||
"source_path": "dotnet-desktop-guide/net/winforms/controls/how-to-dock-controls-on-windows-forms.md",
|
||||
"redirect_url": "/dotnet/desktop/winforms/controls/how-to-dock-and-anchor?view=netdesktop-5.0"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -0,0 +1,118 @@
|
||||
---
|
||||
title: How to dock and anchor controls
|
||||
description: Learn how to s
|
||||
ms.date: 05/25/2021
|
||||
dev_langs:
|
||||
- "csharp"
|
||||
- "vb"
|
||||
helpviewer_keywords:
|
||||
- "Anchor property [Windows Forms], enabling resizable forms"
|
||||
- "Windows Forms controls, screen resolutions"
|
||||
- "resizing forms [Windows Forms]"
|
||||
- "Windows Forms controls, size"
|
||||
- "screen resolution and control display"
|
||||
- "controls [Windows Forms], anchoring"
|
||||
- "forms [Windows Forms], resizing"
|
||||
- "Windows Forms, resizing"
|
||||
- "controls [Windows Forms], positioning"
|
||||
- "controls [Windows Forms], docking"
|
||||
- "Explorer-style applications [Windows Forms], creating"
|
||||
- "Windows Forms controls, filling client area"
|
||||
---
|
||||
# How to dock and anchor controls (Windows Forms .NET)
|
||||
|
||||
If you're designing a form that the user can resize at run time, the controls on your form should resize and reposition properly. Controls have two properties that help with automatic placement and sizing, when the form changes size.
|
||||
|
||||
[!INCLUDE [desktop guide under construction](../../includes/desktop-guide-preview-note.md)]
|
||||
|
||||
- <xref:System.Windows.Forms.Control.Dock%2A?displayProperty=nameWithType>
|
||||
|
||||
Controls that are docked fill the edges of the control's container, either the form or a container control. For example, Windows Explorer docks its <xref:System.Windows.Forms.TreeView> control to the left side of the window and its <xref:System.Windows.Forms.ListView> control to the right side of the window. The docking mode can be any side of the control's container, or set to fill the remaining space of the container.
|
||||
|
||||
:::image type="content" source="./media/how-to-dock-and-anchor/dock-modes.png" alt-text="A windows form demonstrating the different dock modes for a control":::
|
||||
|
||||
Controls are docked in reverse z-order and the <xref:System.Windows.Forms.Control.Dock%2A> property interacts with the <xref:System.Windows.Forms.Control.AutoSize%2A> property. For more information, see [Automatic sizing](layout.md#automatic-sizing).
|
||||
|
||||
- <xref:System.Windows.Forms.Control.Anchor%2A?displayProperty=nameWithType>
|
||||
|
||||
When an anchored control's form is resized, the control maintains the distance between the control and the anchor positions. For example, if you have a <xref:System.Windows.Forms.TextBox> control that is anchored to the left, right, and bottom edges of the form, as the form is resized, the <xref:System.Windows.Forms.TextBox> control resizes horizontally so that it maintains the same distance from the right and left sides of the form. The control also positions itself vertically so that its location is always the same distance from the bottom edge of the form. If a control isn't anchored and the form is resized, the position of the control relative to the edges of the form is changed.
|
||||
|
||||
:::image type="content" source="./media/how-to-dock-and-anchor/anchor-resize.gif" alt-text="A Windows form demonstrating the different anchor modes for a control":::
|
||||
|
||||
For more information, see [Position and layout of controls](layout.md).
|
||||
|
||||
## Dock a control
|
||||
|
||||
A control is docked by setting its <xref:System.Windows.Forms.Control.Dock%2A> property.
|
||||
|
||||
> [!NOTE]
|
||||
> Inherited controls must be `Protected` to be able to be docked. To change the access level of a control, set its **Modifier** property in the **Properties** window.
|
||||
|
||||
### Use the designer
|
||||
|
||||
Use the Visual Studio designer **Properties** window to set the docking mode of a control.
|
||||
|
||||
01. Select the control in the designer.
|
||||
|
||||
01. In the **Properties** window, select the arrow to the right of the **Dock** property.
|
||||
|
||||
:::image type="content" source="media/how-to-dock-and-anchor/vs-dock-property.png" alt-text="Visual Studio Properties pane for .NET Windows Forms with Dock property shown.":::
|
||||
|
||||
01. Select the button that represents the edge of the container where you want to dock the control. To fill the contents of the control's form or container control, press the center box. Press **(none)** to disable docking.
|
||||
|
||||
:::image type="content" source="media/how-to-dock-and-anchor/vs-dock-property-expanded.png" alt-text="Visual Studio Properties pane for .NET Windows Forms with Dock property expanded.":::
|
||||
|
||||
The control is automatically resized to fit the boundaries of the docked edge.
|
||||
|
||||
### Set Dock programmatically
|
||||
|
||||
01. Set the `Dock` property on a control. In this example, a button is docked to the right side of its container:
|
||||
|
||||
```csharp
|
||||
button1.Dock = DockStyle.Right;
|
||||
```
|
||||
|
||||
```vb
|
||||
button1.Dock = DockStyle.Right
|
||||
```
|
||||
|
||||
## Anchor a control
|
||||
|
||||
A control is anchored to an edge by setting its <xref:System.Windows.Forms.Control.Anchor%2A> property to one or more values.
|
||||
|
||||
> [!NOTE]
|
||||
> Certain controls, such as the <xref:System.Windows.Forms.ComboBox> control, have a limit to their height. Anchoring the control to the bottom of its form or container cannot force the control to exceed its height limit.
|
||||
>
|
||||
> Inherited controls must be `Protected` to be able to be anchored. To change the access level of a control, set its `Modifiers` property in the **Properties** window.
|
||||
|
||||
### Use the designer
|
||||
|
||||
Use the Visual Studio designer **Properties** window to set the anchored edges of a control.
|
||||
|
||||
01. Select the control in the designer.
|
||||
|
||||
01. In the **Properties** window, select the arrow to the right of the **Anchor** property.
|
||||
|
||||
:::image type="content" source="media/how-to-dock-and-anchor/vs-anchor-property.png" alt-text="Visual Studio Properties pane for .NET Windows Forms with Anchor property shown.":::
|
||||
|
||||
01. To set or unset an anchor, select the top, left, right, or bottom arm of the cross.
|
||||
|
||||
:::image type="content" source="media/how-to-dock-and-anchor/vs-anchor-property-expanded.png" alt-text="Visual Studio Properties pane for .NET Windows Forms with Anchor property expanded.":::
|
||||
|
||||
### Set Anchor programmatically
|
||||
|
||||
01. Set the `Anchor` property on a control. In this example, a button is anchored to the right and bottom sides of its container:
|
||||
|
||||
```csharp
|
||||
button1.Anchor = AnchorStyles.Bottom | AnchorStyles.Right;
|
||||
```
|
||||
|
||||
```vb
|
||||
button1.Anchor = AnchorStyles.Bottom Or AnchorStyles.Right
|
||||
```
|
||||
|
||||
## See also
|
||||
|
||||
- [Position and layout of controls](layout.md).
|
||||
- <xref:System.Windows.Forms.Control.Anchor%2A?displayProperty=fullName>
|
||||
- <xref:System.Windows.Forms.Control.Dock%2A?displayProperty=fullName>
|
||||
@@ -94,6 +94,82 @@ Only some controls support the <xref:System.Windows.Forms.Control.AutoSize%2A> p
|
||||
| If a control does not implement the <xref:System.Windows.Forms.Control.GetPreferredSize%2A> method, the <xref:System.Windows.Forms.Control.GetPreferredSize%2A> method returns last value assigned to the <xref:System.Windows.Forms.Control.Size%2A> property. | This means that setting <xref:System.Windows.Forms.Control.AutoSize%2A> to `true` will have no effect. |
|
||||
| A control in a <xref:System.Windows.Forms.TableLayoutPanel> cell always shrinks to fit in the cell until its <xref:System.Windows.Forms.Control.MinimumSize%2A> is reached. | This size is enforced as a maximum size. This is not the case when the cell is part of an <xref:System.Windows.Forms.SizeType.AutoSize> row or column. |
|
||||
|
||||
#### AutoSizeMode property
|
||||
|
||||
The <xref:System.Windows.Forms.AutoSizeMode> property provides more fine-grained control over the default <xref:System.Windows.Forms.Control.AutoSize%2A> behavior. The `AutoSizeMode` property specifies how a control sizes itself to its content. The content, for example, could be the text for a <xref:System.Windows.Forms.Button> control or the child controls for a container.
|
||||
|
||||
The following list shows the `AutoSizeMode` values and its behavior.
|
||||
|
||||
- <xref:System.Windows.Forms.AutoSizeMode.GrowAndShrink?displayProperty=nameWithType>
|
||||
|
||||
The control grows or shrinks to encompass its contents.
|
||||
|
||||
The <xref:System.Windows.Forms.Control.MinimumSize%2A> and <xref:System.Windows.Forms.Control.MaximumSize%2A> values are honored, but the current value of the <xref:System.Windows.Forms.Control.Size%2A> property is ignored.
|
||||
|
||||
This is the same behavior as controls with the <xref:System.Windows.Forms.Control.AutoSize%2A> property and no `AutoSizeMode` property.
|
||||
|
||||
- <xref:System.Windows.Forms.AutoSizeMode.GrowOnly?displayProperty=nameWithType>
|
||||
|
||||
The control grows as much as necessary to encompass its contents, but it will not shrink smaller than the value specified by its <xref:System.Windows.Forms.Control.Size%2A> property.
|
||||
|
||||
This is the default value for `AutoSizeMode`.
|
||||
|
||||
#### Controls that support the AutoSize property
|
||||
|
||||
The following table describes the level of auto sizing support by control:
|
||||
|
||||
| Control | `AutoSize` supported | `AutoSizeMode` supported |
|
||||
|----------------------------------------------|----------------------|--------------------------|
|
||||
| <xref:System.Windows.Forms.Button> | ✔️ | ✔️ |
|
||||
| <xref:System.Windows.Forms.CheckedListBox> | ✔️ | ✔️ |
|
||||
| <xref:System.Windows.Forms.FlowLayoutPanel> | ✔️ | ✔️ |
|
||||
| <xref:System.Windows.Forms.Form> | ✔️ | ✔️ |
|
||||
| <xref:System.Windows.Forms.GroupBox> | ✔️ | ✔️ |
|
||||
| <xref:System.Windows.Forms.Panel> | ✔️ | ✔️ |
|
||||
| <xref:System.Windows.Forms.TableLayoutPanel> | ✔️ | ✔️ |
|
||||
| <xref:System.Windows.Forms.CheckBox> | ✔️ | ❌ |
|
||||
| <xref:System.Windows.Forms.DomainUpDown> | ✔️ | ❌ |
|
||||
| <xref:System.Windows.Forms.Label> | ✔️ | ❌ |
|
||||
| <xref:System.Windows.Forms.LinkLabel> | ✔️ | ❌ |
|
||||
| <xref:System.Windows.Forms.MaskedTextBox> | ✔️ | ❌ |
|
||||
| <xref:System.Windows.Forms.NumericUpDown> | ✔️ | ❌ |
|
||||
| <xref:System.Windows.Forms.RadioButton> | ✔️ | ❌ |
|
||||
| <xref:System.Windows.Forms.TextBox> | ✔️ | ❌ |
|
||||
| <xref:System.Windows.Forms.TrackBar> | ✔️ | ❌ |
|
||||
| <xref:System.Windows.Forms.CheckedListBox> | ❌ | ❌ |
|
||||
| <xref:System.Windows.Forms.ComboBox> | ❌ | ❌ |
|
||||
| <xref:System.Windows.Forms.DataGridView> | ❌ | ❌ |
|
||||
| <xref:System.Windows.Forms.DateTimePicker> | ❌ | ❌ |
|
||||
| <xref:System.Windows.Forms.ListBox> | ❌ | ❌ |
|
||||
| <xref:System.Windows.Forms.ListView> | ❌ | ❌ |
|
||||
| <xref:System.Windows.Forms.MaskedTextBox> | ❌ | ❌ |
|
||||
| <xref:System.Windows.Forms.MonthCalendar> | ❌ | ❌ |
|
||||
| <xref:System.Windows.Forms.ProgressBar> | ❌ | ❌ |
|
||||
| <xref:System.Windows.Forms.PropertyGrid> | ❌ | ❌ |
|
||||
| <xref:System.Windows.Forms.RichTextBox> | ❌ | ❌ |
|
||||
| <xref:System.Windows.Forms.SplitContainer> | ❌ | ❌ |
|
||||
| <xref:System.Windows.Forms.TabControl> | ❌ | ❌ |
|
||||
| <xref:System.Windows.Forms.TabPage> | ❌ | ❌ |
|
||||
| <xref:System.Windows.Forms.TreeView> | ❌ | ❌ |
|
||||
| <xref:System.Windows.Forms.WebBrowser> | ❌ | ❌ |
|
||||
| <xref:System.Windows.Forms.ScrollBar> | ❌ | ❌ |
|
||||
|
||||
#### AutoSize in the design environment
|
||||
|
||||
The following table describes the sizing behavior of a control at design time, based on the value of its <xref:System.Windows.Forms.Control.AutoSize%2A> and `AutoSizeMode` properties.
|
||||
|
||||
Override the <xref:System.Windows.Forms.Design.ControlDesigner.SelectionRules%2A> property to determine whether a given control is in a user-resizable state. In the following table, "can't resize" means <xref:System.Windows.Forms.Design.SelectionRules.Moveable> only, "can resize" means <xref:System.Windows.Forms.Design.SelectionRules.AllSizeable> and <xref:System.Windows.Forms.Design.SelectionRules.Moveable>.
|
||||
|
||||
| `AutoSize` setting | `AutoSizeMode` setting | Behavior |
|
||||
|--------------------|--------------------------------------------------------|----------|
|
||||
| `true` | Property not available. | The user can't resize the control at design time, except for the following controls:<br /><br /> - <xref:System.Windows.Forms.TextBox><br />- <xref:System.Windows.Forms.MaskedTextBox><br />- <xref:System.Windows.Forms.RichTextBox><br />- <xref:System.Windows.Forms.TrackBar> |
|
||||
| `true` | <xref:System.Windows.Forms.AutoSizeMode.GrowAndShrink> | The user can't resize the control at design time. |
|
||||
| `true` | <xref:System.Windows.Forms.AutoSizeMode.GrowOnly> | The user can resize the control at design time. When the <xref:System.Windows.Forms.Control.Size%2A> property is set, the user can only increase the size of the control. |
|
||||
| `false` or `AutoSize` is hidden | Not applicable. | User can resize the control at design time. |
|
||||
|
||||
> [!NOTE]
|
||||
> To maximize productivity, the Windows Forms Designer in Visual Studio shadows the <xref:System.Windows.Forms.Control.AutoSize%2A> property for the <xref:System.Windows.Forms.Form> class. At design time, the form behaves as though the <xref:System.Windows.Forms.Control.AutoSize%2A> property is set to `false`, regardless of its actual setting. At runtime, no special accommodation is made, and the <xref:System.Windows.Forms.Control.AutoSize%2A> property is applied as specified by the property setting.
|
||||
|
||||
## Container: Form
|
||||
|
||||
The <xref:System.Windows.Forms.Form> is the main object of Windows Forms. A Windows Forms application will usually have a form displayed at all times. Forms contain controls and respect the <xref:System.Windows.Forms.Control.Location> and <xref:System.Windows.Forms.Control.Size> properties of the control for manual placement. Forms also respond to the [Dock](#dock) property for automatic placement.
|
||||
|
||||
BIN
Binary file not shown.
|
After Width: | Height: | Size: 855 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 8.5 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 7.9 KiB |
@@ -51,6 +51,8 @@ items:
|
||||
href: controls/how-to-set-the-display-text.md
|
||||
- name: Set the the tab order of a control
|
||||
href: controls/how-to-set-the-tab-order.md
|
||||
- name: Dock and anchor controls
|
||||
href: controls/how-to-dock-and-anchor.md
|
||||
- name: Set the image displayed by a control
|
||||
href: controls/how-to-add-a-picture-to-a-control.md
|
||||
- name: User input - keyboard
|
||||
|
||||
Reference in New Issue
Block a user