TabbedContainer Class

Presents items as tab pages with tab headers displayed at the top.

Namespace: DevExpress.UI.Xaml.Layout

Assembly: DevExpress.UI.Xaml.Layout.v21.2.dll

NuGet Package: DevExpress.Uwp.Controls

Declaration

C#
VB.NET

[TemplatePart(Name = "PART_SelectedContent", Type = typeof(TabbedContainerContentPresenter))]
public class TabbedContainer :
    ContentSelectorContainer

<TemplatePart(Name:="PART_SelectedContent", Type:=GetType(TabbedContainerContentPresenter))>
Public Class TabbedContainer
    Inherits ContentSelectorContainer

Remarks

The TabbedContainer displays its elements (TabbedContainerItem objects) as tab pages. The TabbedContainerItem.Header property allows you to specify a tab header for each page.

TabbedContainer

In code, you can switch between tab pages via the veSelector.SelectedIndex inherited property. The currently selected item is specified by the veSelector.SelectedItem property.

Items can also be populated via the ItemsSource inherited property. To render these items, use the following templates and template selectors:

ItemTemplate and ItemTemplateSelector properties - Specify templates used to render item headers.
ContentTemplate and ContentTemplateSelector properties - Specify templates used to render item content.

Example

This example creates a TabbedContainer with three tabs, each of which displays custom controls:

TabbedContainer-ex

XAML

xmlns:Layout="using:DevExpress.UI.Xaml.Layout"

<Page.Resources>
    <Style TargetType="TextBlock">
        <Setter Property="FontSize" Value="15"/>
        <Setter Property="TextWrapping" Value="Wrap"/>
    </Style>
</Page.Resources>

<StackPanel Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Layout:TabbedContainer SelectedIndex="0" Width="300" >
        <Layout:TabbedContainerItem Header="Brief">
            <Grid x:Name="LayoutRoot" Margin="5" >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="160" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="42" />
                    <RowDefinition Height="42" />
                    <RowDefinition Height="42" />
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <TextBlock VerticalAlignment="Center" Grid.Column="0" Grid.Row="0" Text="Albert Einstein"/>
                <TextBlock Grid.Column="0" Grid.Row="1" Text="Theoretical physicist"/>
                <TextBlock FontSize="12" Grid.Column="0" Grid.Row="3"  Grid.ColumnSpan="3" Text="Developed the general theory of relativity, effecting a revolution in physics. For this achievement, Einstein is often regarded as the father of modern physics and the most influential physicist of the 20th century."/>
                <Image Grid.Column="1" Grid.Row="0" Grid.RowSpan="3" Source="Images/AlbertEinstein.png"/>
            </Grid>
        </Layout:TabbedContainerItem>
        <Layout:TabbedContainerItem Header="Awards">
            <TextBlock Margin="5" Text="Nobel Prize in Physics (1921)&#x0a;Matteucci Medal (1921)&#x0a;Copley Medal (1925)&#x0a;Max Planck Medal (1929)&#x0a;Time Person of the Century (1999)"/>
        </Layout:TabbedContainerItem>
        <Layout:TabbedContainerItem Header="Biography">
            <StackPanel Margin="5">
                <TextBlock Text="14 March 1879 - 18 April 1955"/>
                <TextBlock Text="Germany, Italy, Switzerland, Austria, Belgium, United Kingdom, United States"/>
            </StackPanel>
        </Layout:TabbedContainerItem>
    </Layout:TabbedContainer>
</StackPanel>