Style TabItem

image_pdfimage_print


   
    

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="TabControlStyles.Page1">
  <Page.Resources>
    <Style TargetType="TabItem">
      <Setter Property="BorderThickness" Value="3"/>
      <Setter Property="BorderBrush" Value="Red"/>
      <Setter Property="Background" Value="LightBlue"/>
      <Setter Property="VerticalContentAlignment" Value="Center"/>
      <Setter Property="HorizontalContentAlignment" Value="Center"/>
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="{x:Type TabItem}">
            <Border>
              <Grid>
                <Grid>
                  <Border CornerRadius="3,3,0,0" Background="{TemplateBinding Background}" 
                       BorderBrush="{TemplateBinding BorderBrush}" 
                       BorderThickness="{TemplateBinding BorderThickness}"/>
                </Grid>
                <Border BorderThickness="{TemplateBinding BorderThickness}" 
                     Padding="{TemplateBinding Padding}">
                  <ContentPresenter ContentSource="Header" 
                     HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                     VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Border>
              </Grid>
            </Border>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>

  </Page.Resources>


  <StackPanel Background="Ivory">
    <TextBlock FontSize="24">Styled Tab Control</TextBlock>
    <TabControl Width="250">
      <TabItem Header="One">
        <Ellipse Width="200" Height="200" Fill="#CABCAB"/>
      </TabItem>
      <TabItem Header="Two">
        <Ellipse Width="200" Height="200" Fill="#BADDF00D"/>
      </TabItem>
      <TabItem Header="Three">
        <Ellipse Width="200" Height="200" Fill="#654321"/>
      </TabItem>
      <TabItem Header="Four">
        <Ellipse Width="200" Height="200" Fill="#123456"/>
      </TabItem>
      <TabItem Header="Five">
        <Ellipse Width="200" Height="200" Fill="#F11001"/>
      </TabItem>
    </TabControl>
  </StackPanel>


</Page>

   
    
    
    
     


Style a TabControl using templates for the TabControl and TabItem elements.

image_pdfimage_print


   
    
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="TabControlStyles.Page1">
    <Page.Resources>
        <Style x:Key="{x:Type TabControl}" TargetType="{x:Type TabControl}">
            <Setter Property="BorderThickness" Value="3"/>
            <Setter Property="BorderBrush" Value="Red"/>
            <Setter Property="Background" Value="LightBlue"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TabControl">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <Border BorderThickness="0,0,1,1" BorderBrush="#D0CEBF" Grid.Row="1">
                                <Border BorderThickness="{TemplateBinding BorderThickness}" 
                    BorderBrush="{TemplateBinding BorderBrush}">
                                    <Border Background="{TemplateBinding Background}">
                                        <ContentPresenter ContentSource="SelectedContent"/>
                                    </Border>
                                </Border>
                            </Border>
                            <TabPanel Grid.Row="0" IsItemsHost="true"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>


    <StackPanel Background="Ivory">
        <TextBlock FontSize="24">Styled Tab Control</TextBlock>
        <TabControl Width="250">
            <TabItem Header="One">
                <Ellipse Width="200" Height="200" Fill="#CABCAB"/>
            </TabItem>
        </TabControl>
    </StackPanel>


</Page>

   
    
    
    
     


TabItem Header

image_pdfimage_print


   
    

<Window x:Class="SimpleStyles.Window1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="SimpleStyles"
  Background="#F8F8F8">
  <ScrollViewer>
    <WrapPanel>
      <HeaderedItemsControl Header="TabControl">
        <StackPanel Orientation="Horizontal">
          <TabControl Margin="8" Height="100" Width="225">
            <TabItem Header="One" />
            <TabItem Header="Two" />
            <TabItem Header="Three" />
            <TabItem Header="Four" />
          </TabControl>
        </StackPanel>
      </HeaderedItemsControl>
   
    </WrapPanel>
  </ScrollViewer>
</Window>

   
    
    
    
     


Tab page headers

image_pdfimage_print


   
     

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      HorizontalAlignment="Center" VerticalAlignment="Center">
<TabControl>
  <TabItem Header="_Button">
    <Button>Click!</Button>
  </TabItem>
  <TabItem>
    <TabItem.Header>
      <TextBlock FontSize="18">
        <AccessText>_Text</AccessText>
      </TextBlock>
    </TabItem.Header>
    <TextBlock>Hello, world</TextBlock>
  </TabItem>
  <TabItem>
    <TabItem.Header>
      <Ellipse Fill="Blue" Width="30" Height="20" />
    </TabItem.Header>
    <StackPanel Orientation="Horizontal">
      <TextBlock>Ellipse:</TextBlock>
      <Ellipse Fill="Blue" Width="100" />
    </StackPanel>
  </TabItem>
</TabControl>
</Page>

   
    
    
    
    
     


Put Different Objects to TabItem

image_pdfimage_print


   
      

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      WindowTitle="Canvas Sample">

    <StackPanel>
        <TabControl MinHeight="500" MinWidth="400">
            <TabItem  Header="Canvas" IsSelected="True">
                <Canvas Height="400" Width="400">
                     <Rectangle Width="100" Height="100" Fill="red"/>
                </Canvas>
            </TabItem>
            <TabItem Header="XAML Markup">
                <TextBlock  xml:space="preserve">
                       &amp;lt;&amp;gt;
                </TextBlock>
            </TabItem>

            <TabItem  Header="Description">
                <StackPanel>
                    <TextBlock>Sample</TextBlock>
                </StackPanel>
            </TabItem>
        </TabControl>
        <TextBlock >All rights reserved.</TextBlock>
    </StackPanel>

</Page>

   
    
    
    
    
    
     


Tab Test

image_pdfimage_print


   
      
<Window x:Class="Content.TabTest"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="TabTest" Height="300" Width="300">
  <TabControl Margin="5">
    <TabItem Header="Tab One">
      <StackPanel Margin="3">
        <CheckBox Margin="3">Setting One</CheckBox>
        <CheckBox Margin="3">Setting Two</CheckBox>
        <CheckBox Margin="3">Setting Three</CheckBox>
      </StackPanel>
    </TabItem>
    <TabItem Header="Tab Two"></TabItem>
  </TabControl>
</Window>

   
    
    
    
    
    
     


Binds a TabControl to a collection of Employee objects

image_pdfimage_print


   
 

<Window x:Class="TabControlContentTemplateSelector.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:src="clr-namespace:TabControlContentTemplateSelector"  
    Title="TabControlContentTemplateSelector">
  <Window.Resources>
    <src:People x:Key="MyFriends"/>
    <DataTemplate x:Key="DetailTemplate">
        <StackPanel>
          <TextBlock Text="First Name:"/>
          <TextBlock Text="{Binding Path=FirstName}"/>
          <TextBlock Text="Last Name:"/>
          <TextBlock Text="{Binding Path=LastName}"/>
        </StackPanel>
    </DataTemplate>
    <DataTemplate x:Key="SeattleTemplate">
      <DataTemplate.Resources>
        <Style TargetType="TextBlock">
          <Setter Property="FontSize" Value="16"/>
        </Style>
      </DataTemplate.Resources>
     <StackPanel>
          <TextBlock Text="Please welcome"/>
          <TextBlock Text="{Binding Path=FirstName}"/>
          <TextBlock Text=" "/>
          <TextBlock Text="{Binding Path=LastName}"/>
    </StackPanel>
    </DataTemplate>

    <src:EmployeeTemplateSelector x:Key="EmployeeSelector"/>
  </Window.Resources>

  <StackPanel VerticalAlignment="Center">
    <TabControl Name="tabCtrl1" Width="400" Height="200" 
             ItemsSource="{Binding Source={StaticResource MyFriends}}"
             ContentTemplateSelector="{StaticResource EmployeeSelector}"/>
    <Button Width="100" Margin="10" Name="infoBtn"
            Click="infoBtn_Click">
      _Get Information
    </Button>
  </StackPanel>
</Window>
//File:Window.xaml.cs
using System;
using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
using System.ComponentModel;
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Media;
using System.Windows.Shapes;
using System.Collections.ObjectModel;
namespace TabControlContentTemplateSelector
{
    public class Employee : INotifyPropertyChanged
    {
        private string firstname;
        private string lastname;

        public event PropertyChangedEventHandler PropertyChanged;

        public Employee()
        {
        }

        public Employee(string first, string last)
        {
            this.firstname = first;
            this.lastname = last;
        }

        public override string ToString()
        {
            return firstname.ToString();
        }

        public string FirstName
        {
            get { return firstname; }
            set
            {
                firstname = value;
                OnPropertyChanged("FirstName");
            }
        }

        public string LastName
        {
            get { return lastname; }
            set
            {
                lastname = value;
                OnPropertyChanged("LastName");
            }
        }
        protected void OnPropertyChanged(string info)
        {
            PropertyChangedEventHandler handler = PropertyChanged;
            if (handler != null)
            {
                handler(this, new PropertyChangedEventArgs(info));
            }
        }
    }

    public class People : ObservableCollection<Employee>
    {
        public People()
            : base()
        {
            Add(new Employee("A", "B"));
            Add(new Employee("C", "D"));
            Add(new Employee("E", "F"));
            Add(new Employee("G", "H"));
            Add(new Employee("I", "J"));
        }
    }

    public partial class Window1 : System.Windows.Window
    {

        public Window1()
        {
            InitializeComponent();
        }

        void infoBtn_Click(object sender, RoutedEventArgs e)
         {
            if (tabCtrl1.SelectedContent is Employee)
            {
                Employee selectedEmployee = tabCtrl1.SelectedContent as Employee;
                StringBuilder personInfo = new StringBuilder();

                personInfo.Append(selectedEmployee.FirstName);
                personInfo.Append(" ");
                personInfo.Append(selectedEmployee.LastName);
                MessageBox.Show(personInfo.ToString());
            }
        }
    }
    public class EmployeeTemplateSelector : DataTemplateSelector
    {
        public override DataTemplate SelectTemplate(object item, DependencyObject container)
        {
            if (item is Employee)
            {
                Employee person = item as Employee;
                Window win = Application.Current.MainWindow;
                return win.FindResource("SeattleTemplate") as DataTemplate;
                //return win.FindResource("DetailTemplate") as DataTemplate;

            }
            return null;
        }

    }
}