How to: Customize DXTabControl's Content Header, Content Footer and Control Box Areas

• Aug 01, 2019

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-customize-dxtabcontrols-content-header-content-footer-and-control-box-areas-t245606.

XAML

<UserControl x:Class="DXTabControlExample.View.MainView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
    xmlns:dxb="http://schemas.devexpress.com/winfx/2008/xaml/bars"
    xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm"
    xmlns:vm="clr-namespace:DXTabControlExample.ViewModel"
    xmlns:v="clr-namespace:DXTabControlExample.View"
    DataContext="{dxmvvm:ViewModelSource Type=vm:MainViewModel}"
    mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="1000">
    <Grid>
        <Grid.Resources>

            <DataTemplate x:Key="TabItemHeaderTemplate">
                <TextBlock Text="{Binding}" FontWeight="Medium"/>
            </DataTemplate>

            <DataTemplate x:Key="TabItemContentTemplate">
                <v:ContactView/>
            </DataTemplate>

            <Style x:Key="TabItemStyle" TargetType="dx:DXTabItem">
                <Setter Property="Header" Value="{Binding FirstName}"/>
                <Setter Property="Content" Value="{Binding}"/>
            </Style>


            <!--Content Headers and Footers-->

            <DataTemplate x:Key="ContentHeaderTemplate">
                <dxb:MainMenuControl>
                    <dxb:BarButtonItem Name="Main" Content="Update All" BarItemDisplayMode="ContentAndGlyph"  Command="{Binding UpdateAllCommand}" Glyph="{dx:DXImage Image=Refresh_16x16.png}"/>
                </dxb:MainMenuControl>
            </DataTemplate>

            <DataTemplate x:Key="ContentFooterTemplate">
                <Border Background="Khaki" Height="20"/>
            </DataTemplate>

            <!--Control Box Templates-->
            <DataTemplate x:Key="ControlBoxLeftTemplate">
                <TextBlock Text="Employees: " FontWeight="Medium"  Margin="0,2,0,0"/>
            </DataTemplate>

            <DataTemplate x:Key="ControlBoxRightTemplate">
                <Button Margin="5,2,0,0" Command="{Binding ShowStatisticsCommand}">
                    <Image Source="{dx:DXImage Image=3DCylinder_16x16.png}"/>    
                </Button>
            </DataTemplate>

            <DataTemplate x:Key="ControlBoxPanelTemplate">
                <Button Margin="5,2,0,0" Command="{Binding AnalizeCommand}">
                    <Image Source="{dx:DXImage Image=3DLine_16x16.png}"/>
                </Button>
            </DataTemplate>
        </Grid.Resources>
        <dx:DXTabControl x:Name="tabControl" ItemsSource="{Binding Contacts}" ItemContainerStyle="{StaticResource TabItemStyle}" ItemTemplate="{StaticResource TabItemContentTemplate}"
                         ItemHeaderTemplate="{StaticResource TabItemHeaderTemplate}"
                         ContentHeaderTemplate="{StaticResource ContentHeaderTemplate}"
                         ContentFooterTemplate="{StaticResource ContentFooterTemplate}"
                         ControlBoxLeftTemplate="{StaticResource ControlBoxLeftTemplate}"
                         ControlBoxRightTemplate="{StaticResource ControlBoxRightTemplate}"
                         ControlBoxPanelTemplate="{StaticResource ControlBoxPanelTemplate}">
            <dx:DXTabControl.View>
                <dx:TabControlScrollView />
            </dx:DXTabControl.View>
        </dx:DXTabControl>
    </Grid>
</UserControl>