You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/ide/customizing-window-layouts-in-visual-studio.md
+36-37Lines changed: 36 additions & 37 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,7 +1,7 @@
1
1
---
2
-
title: Customize & save layouts of windows and tabs
2
+
title: Customize and Save Layouts of Windows and Tabs
3
3
description: Learn how to customize tabs and windows in Visual Studio to create layouts that work best for your development workflows.
4
-
ms.date: 08/23/2024
4
+
ms.date: 08/08/2025
5
5
ms.topic: how-to
6
6
f1_keywords:
7
7
- vs.windows
@@ -30,24 +30,24 @@ ms.subservice: general-ide
30
30
31
31
# Customize window layouts and personalize tabs
32
32
33
-
In Visual Studio, you can customize the position, size, and behavior of windows to create window layouts that work best for various development workflows. You can also personalize how you use [tabs](#personalize-tabs) to interact with your code.
33
+
In Visual Studio, you can customize the position, size, and behavior of windows to create window layouts that work best for various development workflows. You can also personalize how you use [tabs](#personalize-tabs) to interact with your code. This article describes various ways to customize the Visual Studio UI.
34
34
35
35
## Customize window layouts
36
36
37
-
When you customize a window layout, the Visual Studio [integrated development environment](../get-started/visual-studio-ide.md) (IDE) remembers it. For example, if you change the docking location of [Solution Explorer](use-solution-explorer.md) and then close Visual Studio, the next time that you open Visual Studio, Solution Explorer will be docked in the same location. The Visual Studio IDE remembers the docking location even if you're working on another computer.
37
+
When you customize a window layout, the Visual Studio [integrated development environment](../get-started/visual-studio-ide.md) (IDE) retains it. For example, if you change the docking location of [Solution Explorer](use-solution-explorer.md) and then close Visual Studio, the next time that you open Visual Studio, Solution Explorer will be docked in the same location. The Visual Studio IDE retains the docking location even if you're working on another computer.
38
38
39
39
You can also name and save a custom layout and then switch between layouts with a single command. For example, you could create a layout for editing and a layout for debugging, and switch between them by selecting **Window** > **Apply Window Layout**.
40
40
41
41
::: moniker range=">=vs-2022"
42
42
43
43
> [!TIP]
44
-
> Starting with Visual Studio 17.9, the list of open documents was moved from a binary format in the .suo file to a plain text format in a JSON file. The JSON file is saved in the hidden .vs folder in the same location as the .suo file (**solutionFolder**.vs\\**solutionName**\v17). This JSON file contains the list of open documents and their properties, the layout of document groups and containers, and vertical tab column width. Storing in plain text as JSON enables easier backup and the ability to check in different sets of open documents that can be restored as needed.
44
+
> Starting with Visual Studio 17.9, the list of open documents was moved from a binary format in the .suo file to a plain text format in a JSON file. The JSON file is saved in the hidden .vs folder in the same location as the .suo file (<solutionFolder\>\\.vs\\<solutionName\>\v17). This JSON file contains the list of open documents and their properties, the layout of document groups and containers, and vertical tab column width. Storing this information in plain text as JSON enables easier backup and the ability to check in different sets of open documents that can be restored as needed.
45
45
46
46
::: moniker-end
47
47
48
48
### Tool and document windows
49
49
50
-
The IDE has two basic window types: *tool windows* and *document windows*. Tool windows include Solution Explorer, Server Explorer, the Output window, Error List, the designers, and the debugger windows. Document windows contain source code files, arbitrary text files, config files, and so on. You can resize tool windows and drag them by their title bar. You can drag document windows by their tab.
50
+
The IDE has two basic window types: *tool windows* and *document windows*. Tool windows include Solution Explorer, Server Explorer, the Output window, the Error List, the designers, and the debugger windows. Document windows contain source code files, arbitrary text files, config files, and so on. You can resize tool windows and drag them by their title bar. You can drag document windows by their tab.
51
51
52
52
The **Window** menu contains options for docking, floating, and hiding windows in the IDE. Right-click a window's tab or title bar to see more options for that specific window. You can display more than one instance of certain tool windows at a time. For example, you can display more than one web browser window, and you can create extra instances of some tool windows by selecting **New Window** on the **Window** menu.
53
53
@@ -57,7 +57,7 @@ When you need to view or edit two locations simultaneously in a document, you ca
57
57
58
58
#### Toolbars
59
59
60
-
You can arrange toolbars by dragging them to where you want them, or by using the **Customize** dialog. For more information about how to position and customize toolbars, see [Customize menus and toolbars](how-to-customize-menus-and-toolbars-in-visual-studio.md).
60
+
You can arrange toolbars by dragging them to where you want them, or by using the **Tools** > **Customize** dialog. For more information about how to position and customize toolbars, see [Customize menus and toolbars](how-to-customize-menus-and-toolbars-in-visual-studio.md).
61
61
62
62
### Arrange and dock windows
63
63
@@ -67,7 +67,6 @@ You can dock a tool window anywhere inside the IDE frame. You can also dock some
67
67
68
68
You can also arrange windows in the following ways:
69
69
70
-
- Dock multiple windows to float together in a *raft* over or outside of the IDE.
71
70
- Hide tool windows along the edge of the IDE.
72
71
- Minimize tool windows.
73
72
- Display windows on different monitors.
@@ -97,7 +96,7 @@ The following screenshot shows the guide diamond for document windows, which can
97
96
98
97
::: moniker-end
99
98
100
-
You can fasten tool windows to one side of a frame in the IDE or within the editing frame. To help you to easily redock the window, a guide diamond appears when you drag the window to another location.
99
+
You can fasten tool windows to one side of a frame in the IDE or within the editing frame. To help you easily redock the window, a guide diamond appears when you drag the window to another location.
101
100
102
101
:::image type="content" source="media/tool-window-guide-diamond-sml.png" alt-text="Screenshot of the Tool window guide diamond.":::
103
102
@@ -114,21 +113,21 @@ If you right-click the title bar of a tool window and then select **Auto Hide**,
114
113
:::image type="content" source="media/auto-hide-sml.png" alt-text="Set of two screenshots that show the Auto Hide menu item and the associated set of tabbed tool windows that appear when Auto Hide is selected." lightbox="media/auto-hide-lrg.png":::
115
114
116
115
> [!TIP]
117
-
> To specify whether auto hide operates on tool windows individually or as docked groups, select or clear **Auto Hide button affects active tool window only** in the **Options** dialog. For more information, see [Options dialog box: Environment > General](reference/general-environment-options-dialog-box.md).
116
+
> To specify whether auto hide operates on tool windows individually or as docked groups, select or clear **Auto Hide button affects active tool window only** in the **Tools** > **Options** dialog. For more information, see [Options dialog box: Environment > General](reference/general-environment-options-dialog-box.md).
118
117
119
118
> [!NOTE]
120
119
> When auto hide is enabled on a tool window, the window might temporarily slide into view when it has focus. To hide the window again, select an item outside of the current window. When the window loses focus, it slides back out of view.
121
120
122
121
#### Use a second monitor
123
122
124
-
If you have a second monitor and your operating system supports the use of dual monitors, you can select which monitor displays a window. You can even group multiple windows together in *rafts* on other monitors.
123
+
If you have a second monitor and your operating system supports the use of dual monitors, you can select which monitor displays a window.
125
124
126
125
> [!TIP]
127
126
> You can create multiple instances of Solution Explorer and move them to another monitor. Right-click the [Solution node](use-solution-explorer.md#solution-explorer-ui) and select **[New Solution Explorer View](use-solution-explorer.md#solution-node-menu-options)**. To close an extra instance, double-click the title bar while selecting the **Ctrl** key.
128
127
129
128
#### Reset window layouts
130
129
131
-
You can return the IDE to the original window layout for your settings collection by selecting **Windows** > **Reset Window Layout**from the menu bar. When you run this command, the following actions occur:
130
+
You can return the IDE to the original window layout for your settings collection by selecting **Windows** > **Reset Window Layout**in the main menu. When you run this command, the following actions occur:
132
131
133
132
- All windows are moved to their default positions.
134
133
@@ -138,7 +137,7 @@ You can return the IDE to the original window layout for your settings collectio
138
137
139
138
#### Create and save custom layouts
140
139
141
-
Visual Studio enables you to save up to 10 custom window layouts and quickly switch among them. The following steps show how to create, save, invoke, and manage two custom layouts that take advantage of multiple monitors and have both docked and floating tool windows.
140
+
Visual Studio enables you to save as many as 10 custom window layouts and quickly switch among them. The following steps show how to create, save, invoke, and manage two custom layouts that take advantage of multiple monitors and have both docked and floating tool windows.
142
141
143
142
##### Create a project and customize the layout
144
143
@@ -154,15 +153,15 @@ First, create a user interface (UI) project. The idea is to maximize the space f
154
153
155
154
1. When your layout is how you want it, select **Window** > **Save Window Layout**. Name the layout **Designer**.
156
155
157
-
Notice that your new layout is assigned the next keyboard shortcut from the reserved list of **Ctrl**+**Alt**+**1...0** shortcuts.
156
+
Your new layout is assigned the next keyboard shortcut from the reserved list of **Ctrl**+**Alt**+**1...0** shortcuts.
158
157
159
158
##### Create a database project and layout
160
159
161
-
Next, add a new SQL Server database project to the solution.
160
+
Next, add a new SQL Server database project to the solution:
162
161
163
162
1. Right-click the **Solution** node in **Solution Explorer** to open its [context menu](use-solution-explorer.md#solution-explorer-context-menu), select **Add**, and then select **New Project**.
164
163
165
-
1. In the **Add a new project** dialog, select **SQL** from the **All project types** list, and then select **SQL Server Database Project**. (You might need to clear the other filters.)
164
+
1. In the **Add a new project** dialog, select **SQL** from the **All project types** list, and then select **SQL Server Database Project**. (You might need to clear the other filters.) Select **Next** and then select **Create**.
166
165
167
166
(You can also use the search box to find the template. To do so, enter **SQL** in the box that contains the text **Search for templates (Alt+S)**.)
168
167
@@ -174,7 +173,7 @@ Next, add a new SQL Server database project to the solution.
174
173
175
174
##### Switch between the layouts
176
175
177
-
To switch between layouts, use the keyboard shortcuts from the reserved list of **Ctrl**+**Alt**+**1...0** shortcuts. Or, from the main menu, select **Window** > **Apply Window Layout**.
176
+
To switch between layouts, use the keyboard shortcuts from the reserved list of **Ctrl**+**Alt**+**1...0** shortcuts. Or, in the main menu, select **Window** > **Apply Window Layout**.
178
177
179
178
:::image type="content" source="media/apply-window-layout-sml.png" alt-text="Screenshot of the Apply Window Layout menu.":::
180
179
@@ -185,7 +184,7 @@ If you have a multi-monitor setup at work and a single monitor laptop at home, y
185
184
186
185
#### Manage and roam your layouts
187
186
188
-
You can remove, rename, or reorder your custom layout by selecting **Window** > **Manage Window Layouts**. If you move a layout, the key binding is automatically adjusted to reflect the new position in the list. The key bindings themselves can't be modified, but you can store up to 10 layouts at a time.
187
+
You can remove, rename, or reorder your custom layout by selecting **Window** > **Manage Window Layouts**. If you move a layout, the key binding is automatically adjusted to reflect the new position in the list. The key bindings themselves can't be modified, but you can store as many as 10 layouts at a time.
189
188
190
189
:::image type="content" source="media/manage-window-layouts-sml.png" alt-text="Screenshot of the Manage Window Layouts dialog.":::
191
190
@@ -195,7 +194,7 @@ These layouts automatically roam between Visual Studio [editions](https://visual
195
194
196
195
## Personalize tabs
197
196
198
-
You can personalize tabs to interact with document windows in several different ways. For example, you can view a preview of a file in the editor without opening the file, you can group your tabs, arrange them in multiple rows, and more.
197
+
You can personalize tabs to interact with document windows in several ways. For example, you can view a preview of a file in the editor without opening the file, you can group your tabs, arrange them in multiple rows, and more.
199
198
200
199
> [!TIP]
201
200
> To learn more about how to manage tabs in Visual Studio 2022 and later, see the following blog post: [Too many tabs open? No problem!](https://devblogs.microsoft.com/visualstudio/too-many-tabs-open-no-problem/).
@@ -206,7 +205,7 @@ On the **Preview** tab, you can view files in the editor without opening them. Y
206
205
207
206
### Tab groups
208
207
209
-
Tab groups extend your ability to manage limited workspace while you're working with two or more open documents in the IDE. You can organize multiple document windows and tool windows into either vertical or horizontal tab groups and shuffle documents from one tab group to another.
208
+
Tab groups extend your ability to manage limited workspace while you're working with two or more open documents in the IDE. You can organize multiple document windows and tool windows into either vertical or horizontal tab groups and move documents from one tab group to another.
210
209
211
210
#### Vertical document tabs
212
211
@@ -218,7 +217,7 @@ You can manage your document tabs in a vertical list on either the left or right
218
217
219
218
::: moniker range="vs-2019"
220
219
221
-
[New in Visual Studio 2019 version 16.4 and later](/visualstudio/releases/2019/release-notes-v16.4/). These versions support one of the top feature requests: [vertical document tabs](https://developercommunity.visualstudio.com/idea/467369/vertical-group-tab.html). You can now manage your document tabs in a vertical list on either the left or right side of the editor.
220
+
[New in Visual Studio 2019 version 16.4 and later](/visualstudio/releases/2019/release-notes-v16.4/). These versions support one of the top feature requests: [vertical document tabs](https://developercommunity.visualstudio.com/idea/467369/vertical-group-tab.html). You can manage your document tabs in a vertical list on either the left or right side of the editor.
222
221
223
222
:::image type="content" source="./media/vs-2019/vertical-tabs.gif" alt-text="Animation that shows vertical document tabs.":::
224
223
@@ -244,47 +243,47 @@ You can apply vertical document tabs in the following ways:
244
243
245
244
### Color-code document tabs
246
245
247
-
Visual Studio 2022 and later include personalization options that can help you work more efficiently. You can now color-code file tabs by project so that you don't need to hunt for your open files.
246
+
In Visual Studio 2022 and later, you can color-code file tabs by project so that you don't need to hunt for your open files.
248
247
249
248
To color-code tabs, go to **Tools** > **Options** > **Environment** > **Tabs and Windows**. Then select the **Colorize document tabs by** checkbox and select either **Project**, **File extension**, or **Regular Expression** in the dropdown list.
250
249
251
250
#### Colorize tabs in different views
252
251
253
252
You can colorize tabs in both vertical and horizontal views in the editor.
254
253
255
-
The following screenshot shows an example of color tabs in the vertical view:
254
+
The following screenshot shows an example of colorized tabs in the vertical view:
256
255
257
-
:::image type="content" source="media/vs-2022/color-tabs-vertical.png" alt-text="Screenshot of color tabs in the vertical view.":::
256
+
:::image type="content" source="media/vs-2022/color-tabs-vertical.png" alt-text="Screenshot of colorized tabs in the vertical view.":::
258
257
259
-
The following screenshot shows an example of color tabs in the horizontal view:
258
+
The following screenshot shows an example of colorized tabs in the horizontal view:
260
259
261
-
:::image type="content" source="media/vs-2022/color-tabs-horizontal.png" alt-text="Screenshot of color tabs in the horizontal view.":::
260
+
:::image type="content" source="media/vs-2022/color-tabs-horizontal.png" alt-text="Screenshot of colorized tabs in the horizontal view.":::
262
261
263
262
#### Select your own colors
264
263
265
264
You can also select your own tab colors. To do so, right-click a tab, select **Set Tab Color**, and then select a color.
266
265
267
-
The following screenshot shows an example of how to personalize the color scheme of tabs:
266
+
The following screenshot shows how to personalize the color scheme of tabs:
268
267
269
-
:::image type="content" source="media/vs-2022/color-tabs-personalize-schemes.png" alt-text="Screenshot of the Set Tab Option that you can use to personalize the colors of tabs.":::
268
+
:::image type="content" source="media/vs-2022/color-tabs-personalize-schemes.png" alt-text="Screenshot of the Set Tab Color option that you can use to personalize the colors of tabs.":::
270
269
271
270
### Multiple rows of tabs
272
271
273
-
You can now wrap tabs into multiple rows. This enables you to have more horizontal tabs open at once. Pinned tabs show up in a separate row from unpinned tabs.
272
+
You can wrap tabs into multiple rows. This enables you to have more horizontal tabs open at once. Pinned tabs show up in a separate row from unpinned tabs.
274
273
275
-
:::image type="content" source="media/vs-2022/tabs-multiple-rows-sml.png" alt-text="Screenshot of an example of tabs arranged in multiple rows.":::
274
+
:::image type="content" source="media/vs-2022/tabs-multiple-rows-sml.png" alt-text="Screenshot of tabs arranged in multiple rows.":::
276
275
277
-
To change these options, go to **Tools** > **Options** > **Environment** > **Tabs and Windows** > **Show tabs in multiple rows**.
276
+
To change this behavior, go to **Tools** > **Options** > **Environment** > **Tabs and Windows** > **Show tabs in multiple rows**.
278
277
279
-
### Custom organization system
278
+
### Other tab options
280
279
281
-
You can now apply bold formatting to your current active tab, change your tab width, and add an extra close button at the top of a document.
280
+
You can apply bold formatting to your current active tab, change your tab width, and add an extra close button at the top of a document.
282
281
283
-
:::image type="content" source="media/vs-2022/custom-tab-organization-sml.png" alt-text="Screenshot of the new custom organization options for tabs in Visual Studio.":::
282
+
To change these options, go to **Tools** > **Options** > **Environment** > **Tabs and Windows**.
284
283
285
-
To change these options, navigate to **Tools** > **Options** > **Environment** > **Tabs and Windows**.
284
+
:::image type="content" source="media/vs-2022/custom-tab-organization-sml.png" alt-text="Screenshot options for tabs in Visual Studio.":::
286
285
287
-
### Improved accessibility
286
+
### Unsaved changes indicator
288
287
289
288
You can change the indicator for documents that have unsaved changes to a larger, more visible dot.
290
289
@@ -302,7 +301,7 @@ To enable this option, go to **Tools** > **Options** > **Environment** > **Tabs
302
301
303
302
### Restore closed tabs
304
303
305
-
You can reopen the last tab you closed by right-clicking a tab, by using the **Ctrl**+**K**, **Ctrl**+**Z** keyboard shortcut, or by selecting **Window** > **Restore Closed Tab**.
304
+
You can reopen the last tab you closed by right-clicking a tab and selecting **Restore Closed Tab**, by using the **Ctrl**+**K**, **Ctrl**+**Z** keyboard shortcut, or by selecting **Window** > **Restore Closed Tab**.
306
305
307
306
:::image type="content" source="media/vs-2022/tabs-restore-recent-documents.png" alt-text="Screenshot of the Restore Closed Tab menu item.":::
0 commit comments