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: hub/apps/design/controls/tab-view.md
+30-17Lines changed: 30 additions & 17 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -12,7 +12,7 @@ ms.localizationpriority: medium
12
12
13
13
The TabView control is a way to display a set of tabs and their respective content. TabView controls are useful for displaying several pages (or documents) of content while letting a user rearrange, close, or open new tabs.
14
14
15
-

15
+
:::image type="content" source="images/tabview/tab-introduction.png" alt-text="Example of a TabView":::
16
16
17
17
## Is this the right control?
18
18
@@ -111,11 +111,11 @@ For each TabViewItem, you can set a header and an icon, and specify whether the
111
111
112
112
- The [Header](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.tabviewitem.header) property is typically set to a string value that provides a descriptive label for the tab. However, the `Header` property can be any object. You can also use the [HeaderTemplate](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.tabviewitem.headertemplate) property to specify a [DataTemplate](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.datatemplate) that defines how bound header data should be displayed.
113
113
- Set the [IconSource](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.tabviewitem.iconsource) property to specify an icon for the tab.
114
-
- By default, the tab shows a close button. You can set the [IsClosable](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.tabviewitem.isclosable) property to `false` to ensure that a user can't close the tab.
114
+
- By default, the tab shows a _close button_ (X). You can set the [IsClosable](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.tabviewitem.isclosable) property to `false` to hide the close button and ensure that a user can't close the tab. (If you close tabs in your app code outside of a _close requested_ event, you should first check that `IsClosable` is `true`.)
115
115
116
116
For the TabView, you can configure several options that apply to all tabs.
117
117
118
-
- By default, the _close button_ (X) is always shown for closable tabs. You can set the [CloseButtonOverlayMode](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.tabview.closebuttonoverlaymode) property to `OnPointerOver` to change this behavior. In this case, the selected tab always shows the close button if it is closable, but unselected tabs show the close button only when the tab is closable and the user has their pointer over it.
118
+
- By default, the close button is always shown for closable tabs. You can set the [CloseButtonOverlayMode](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.tabview.closebuttonoverlaymode) property to `OnPointerOver` to change this behavior. In this case, the selected tab always shows the close button if it is closable, but unselected tabs show the close button only when the tab is closable and the user has their pointer over it.
119
119
- You can set the [TabWidthMode](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.tabview.tabwidthmode) property to change how tabs are sized. (The `Width` property is ignored on `TabViewItem`.) These are the options in the [TabViewWidthMode](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.tabviewwidthmode) enumeration:
120
120
-`Equal` - Each tab has the same width. This is the default.
121
121
-`SizeToContent` - Each tab adjusts its width to the content within the tab.
If all tabs in your app are closeable and your app window should close when the last tab is closed, you should also close the window in the [TabCloseRequested](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.tabview.tabcloserequested) event handler.
227
227
228
-
First, in the `App.xaml.cs` file, add a public property that will let you access the `Window` instance from the `Page` that hosts the TabView.
228
+
First, in the `App.xaml.cs` file, add a `public static`property that will let you access the `Window` instance from the `Page` that hosts the TabView. (See [User interface migration](../../windows-app-sdk/migrate-to-windows-app-sdk/guides/winui3.md#change-windowsuixamlwindowcurrent-to-appwindow).)
229
229
230
230
```csharp App.xaml.cs
231
231
publicpartialclassApp : Application
232
232
{
233
233
// ... code removed.
234
234
235
-
publicWindow? Window=>m_window; // Add this.
236
-
privateWindow? m_window;
235
+
// Add this.
236
+
publicstaticWindowWindow { get { returnm_window; } }
> How you get a reference to the window (`currentWindow`) may vary depending on how you track windows in your app. For more information, see [Close the window when the last tab is closed](#close-the-window-when-the-last-tab-is-closed) and [Create and track a new window](#create-and-track-a-new-window) in this article.
516
+
> How you get a reference to the window may vary depending on how you track windows in your app. For more information, see [Close the window when the last tab is closed](#close-the-window-when-the-last-tab-is-closed) and [Create and track a new window](#create-and-track-a-new-window) in this article.
0 commit comments