DXTabControl Integration

• Jun 30, 2020
• 2 minutes to read

Integration With the ThemedWindow

Use the WindowKind property to integrate the DXTabControl with a window:

XAML

<dx:ThemedWindow x:Class="Example.MainWindow"
 ...
xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core" WindowKind="Tabbed">

    <dx:DXTabControl>
        <dx:DXTabItem Header="Map">
            <!-- Map Control -->   
        </dx:DXTabItem>
        <dx:DXTabItem Header="Grid">
            <!-- Grid Control -->   
        </dx:DXTabItem>     
    </dx:DXTabControl>

</dx:ThemedWindow>

The following image illustrates the result:

DXTabbedWindow

Tip

This section is outdated. Use the WindowKind property to integrate the DXTabControl with a window.

The DXTabbedWindow is a window that supports integration with a DXTabControl. When you define a tab control at the top of the DXTabbedWindow, the control is embedded in the window.

To display tab control item headers within the DXTabbedWindow‘s header, set the DXTabbedWindow.TabbedWindowMode property to DevExpress.Xpf.Core.TabbedWindowMode.Compact value.

Create a DXTabbedWindow

To replace the standard Window class in your application with the DXTabbedWindow, do the following.

• Inherit your window from the DXTabbedWindow class in C# code.

  C#

  public partial class MainWindow : DevExpress.Xpf.Core.DXTabbedWindow {
      public MainWindow() {
          InitializeComponent();      
      }
  }
  

  VB

  Public Partial Class MainWindow
  Inherits DevExpress.Xpf.Core.DXTabbedWindow
  
  Public Sub New()
      InitializeComponent()
  End Sub
  End Class
  

• Edit the XAML file as shown below.

  XAML

  <dx:DXTabbedWindow x:Class="Example.MainWindow"
      xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core" 
      ... >
          <Grid>
              ...
          </Grid>
  </dx:DXTabbedWindow>
  

Adding tabs

Use the DXTabControl to add tabs as shown in the code snippet below.

XAML

<Grid>
    <dx:DXTabControl>
        <dx:DXTabItem Header="Home"></dx:DXTabItem>
        <dx:DXTabItem Header="File"></dx:DXTabItem>     
        <dx:DXTabItem Header="Window"></dx:DXTabItem>
    </dx:DXTabControl>
</Grid>