Get TabItem Header from dynamic populated tabcontrol

Question

I have a tabcontrol that is populated from an observablecollection. Based on the observablecollection the tabitems headers gets set and datagrid in the tabitem gets populated. What I am trying to do is get the tabitem header and set it in a textblock. I was able to get the tabcontrol name and set it to a textblock text but not the header from the selected tabitem.

<TabControl  Grid.Row="1" ItemsSource="{Binding Workspaces}" Height="Auto" Background="Transparent" x:Name="TabsName" >
                    <TabControl.Resources>
                        <localHelper:HeaderAppendConverter x:Key="HeaderAppedConvrter"/>
                    </TabControl.Resources>
                    <TabControl.ItemTemplate >
                        <DataTemplate >
                            <TextBlock  Text="{Binding HeaderText}"  />
                        </DataTemplate>
                    </TabControl.ItemTemplate>

                    <TabControl.ContentTemplate>
                        <DataTemplate x:Name="Tabsitems">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="50"/>
                                    <RowDefinition Height="725" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="1600" />
                                </Grid.ColumnDefinitions>
                                 <dxg:GridControl Grid.Row="1" x:Name="NameGrid" ItemsSource="{Binding Data}" >
                                    <dxgcore:GridControl.Columns>

                                        <dxg:GridColumn Name="Month1" FieldName="Month01"  Visible="True" AllowEditing="False" HorizontalHeaderContentAlignment="Center" CellStyle="{StaticResource NumberCellStyle}">
                                            <dxg:GridColumn.EditSettings>
                                                <dxe:TextEditSettings HorizontalContentAlignment="Right" />
                                            </dxg:GridColumn.EditSettings>
                                            <dxg:GridColumn.Header>
                                                <TextBlock  Text="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type TabControl}}, Path=SelectedItem.Header, Converter={StaticResource HeaderAppendConverter}, ConverterParameter='01'}" />
                                            </dxg:GridColumn.Header>

                                        </dxg:GridColumn>
                                          </dxg:GridColumn>
                                    </dxgcore:GridControl.Columns>
                                    <dxgcore:GridControl.View>
                                        <dxgcore:TableView x:Name="NameGridView" 
                                       AllowEditing="False" 
                                       AllowBestFit="True" 
                                       AllowMoving="True" 
                                       AllowColumnFiltering="True"
                                       IsColumnMenuEnabled="True"
                                       ShowGroupPanel="False"
                                       ShowAutoFilterRow="True"
                                       AutoWidth="False" 
                                       NavigationStyle="Cell"
                                       VerticalScrollbarVisibility="Visible"
                                       HorizontalScrollbarVisibility="Visible"
                                       RowStyle="{StaticResource customRowStyle}" >
                                        </dxgcore:TableView>
                                    </dxgcore:GridControl.View>
                                </dxg:GridControl>

                            </Grid>
                        </DataTemplate>
                    </TabControl.ContentTemplate>
                </TabControl>


public class WorkSpace : INotifyPropertyChanged
{

    private string headerText;
    public string HeaderText { get { return headerText; } set { headerText = value; OnPropertyChanged("HeaderText"); } }

    public override string ToString()
    {
        return HeaderText;
    }

    private List<Data> data;
    public List<Data> Data { get { return data; } set { data = value; OnPropertyChanged("Data"); } }

This line

<TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type TabControl}}, Path=Name}" />

sets the tabcontrol name to the textblock How can I change that to get the selected tabitem header text

@HenkaProgrammer the xaml textblock is in the original post below "This line" that line renders the tabcontrol name — ANewUser
@HenkaProgrammer Its an Observablecollection that contains class workspace, Workspace class contains a property HeaderText that I set a value to and a List<Data> which is another class but both of those are in workspace. List<Data> populates the grid and HeaderText goes to TabItem — ANewUser
@HenkaProgrammer what I am really trying to do, is I have a gridcontrol in the <DataTemplate x:Name="Tabsitems"> I am trying to change the gridcolumn headers for each column. Part of the value is in tabHeader wondering if this is even the right way — ANewUser

Henka Programmer Henka Programmer · Accepted Answer · 2016-03-02T22:00:48

Add the flowing Converter to your Project:

public class HeaderAppendConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return string.Format("{0}{1}",value, parameter);
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return Binding.DoNothing;
    }
}

Then add to your TabControl Container Resource the StaticResource:

  <local:HeaderAppendConverter x:Key="HeaderAppedConvrter"/>

Finally Update the TextBlock ;

<TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type TabControl}}, Path=SelectedItem.Header, Converter={StaticResource HeaderAppendConverter}, ConverterParameter=columnSuffix}" />

in the ConverterParameter you can pass your custom string

the full solution looks like:

the solution struct is:

the Main window XAML code:

<Window x:Class="Twest.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:Twest"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
<Window.Resources>
    <ResourceDictionary>
        <local:HeaderAppendConverter x:Key="HeaderAppendConverter" />
    </ResourceDictionary>
</Window.Resources>
<Grid>
    <TabControl  Grid.Row="1"  Height="Auto" Background="Transparent" x:Name="TabControlMainName">
        <TabControl.ItemTemplate>
            <DataTemplate>
                <TextBlock  Text="{Binding HeaderText}" />
            </DataTemplate>
        </TabControl.ItemTemplate>

        <TabControl.ContentTemplate>
            <DataTemplate x:Name="Tabsitems">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="50" />
                        <RowDefinition Height="725" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="1600" />
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type TabControl}}, Path=SelectedItem.Header, Converter={StaticResource HeaderAppendConverter}, ConverterParameter= columnSuffix}" />
                </Grid>
            </DataTemplate>
        </TabControl.ContentTemplate>
    </TabControl>
</Grid>

The MainWindow Code behind:

using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;

namespace Twest
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
    public MainWindow()
    {
        InitializeComponent();
        Loaded += MainWindow_Loaded;
    }

    private void MainWindow_Loaded(object sender, RoutedEventArgs e)
    {
        List<TabItem> tabs = new List<TabItem>();
        tabs.Add(new TabItem() { Name = "tab1", Header = "TAB 01" });
        tabs.Add(new TabItem() { Name = "tab2", Header = "TAB 02" });
        TabControlMainName.ItemsSource = tabs;
    }
}

}

Get TabItem Header from dynamic populated tabcontrol

1 Answers