DOUHADJI
DOUHADJI

Reputation: 21

How can I bind the Header of an TabItem with a text in my TabItem DataTemplate for the header?

I create this Template for my TabItems in App.xaml file so that I can use a custom style for my TabItem's Headers.

<Style x:Key="MyTabItemHeader" TargetType="{x:Type TabItem}">
        <Setter Property="HeaderTemplate">
            <Setter.Value>
                <DataTemplate DataType="{x:Type TabItem}">

                    <Border BorderBrush="Gray" CornerRadius="6" Background="LightGray" BorderThickness="0.5" Padding="1" Margin="2,4,2,4">
                        
                        <StackPanel Orientation="Horizontal" Height="28" MinWidth="60" MinHeight="20" >
                            
                            <fa:FontAwesome Name="ItemIconXaml" FontSize="22" Margin="10,0" Foreground="#0C0239"  VerticalAlignment="Center"/>
                            <TextBlock Text="{Binding Header}" Name="ItemNamexaml" FontSize="20" VerticalAlignment="Center" Foreground="#0C0239" FontFamily="Segoe Script"/>
                            <fa:FontAwesome Icon="Close" FontSize="18" Margin="10,0" VerticalAlignment="Center" Foreground="#CCA09F9F" HorizontalAlignment="Right" MouseDown="FontAwesome_MouseDown"/>
                                    
                        </StackPanel>
                    </Border>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>

In the code behind of the window which is charge to display the TabControl with it's tabItems. So I'm dynamically adding TabItems to the TabControl.

public partial class Accueil : Window
{
    public Accueil()
    {
        InitializeComponent();

        // Definition des contents des Tabitems

        AjouterPatientTabItem.Content = ajouterPatientUserControl;
        FacturesDuJourTabItem.Content = facturesDuJourUserControl;
        MainHomeTabItem.Content = mainHomeUserControl;
        RegistreTabItem.Content = registreUserControl;
        ParamètresTabItem.Content = paramètresUserControl;

        // Attribution des names des TabItem
        
        //Ajouter Patient TabItem
        AjouterPatientTabItem.Header = "Nouveau patient";
     //   AjouterPatientTabItem.Style = (Style)Application.Current.Resources["MyTabItemHeader"];
        

        //Facture du patient TabItem
        FacturesDuJourTabItem.Header = "Factures du jour";
      //  FacturesDuJourTabItem.Style = (Style)Application.Current.Resources["MyTabItemHeader"];

        //MainHome 
        MainHomeTabItem.Header = "Accueil";
      //  MainHomeTabItem.Style = (Style)Application.Current.Resources["MyTabItemHeader"];

        //Registre
        RegistreTabItem.Header = "Registre";
           
      //  RegistreTabItem.Style = (Style)Application.Current.Resources["MyTabItemHeader"];
        
        //Paramêtres 
        ParamètresTabItem.Header = "Paramètres";
        //  ParamètresTabItem.Style = (Style)Application.Current.Resources["MyTabItemHeader"];



        //

     //   TabControlItems.ItemContainerStyle = (Style)Application.Current.Resources["TabItemStyle"];
        TabControlItems.ItemContainerStyle = (Style)Application.Current.Resources["MyTabItemHeader"];

        displayedItems.Add(MainHomeTabItem);

        this.TabControlItems.ItemsSource = displayedItems;    
    }

    private ObservableCollection<TabItem> displayedItems = new ObservableCollection<TabItem>();

    public ObservableCollection<TabItem> DisplayedItems
    {
        get { return displayedItems; }
        set { displayedItems = value; }
    }

    //Instanciation des Usercontrols 

    public Home ajouterPatientUserControl = new Home("Accueil", "Home");
    public FacturesDuJour facturesDuJourUserControl = new FacturesDuJour();
    public mainHome mainHomeUserControl = new mainHome();
    public Paramètres paramètresUserControl = new Paramètres();
    public Registre registreUserControl = new Registre();

    // Instanciation des Tabs items 

    public TabItem AjouterPatientTabItem = new TabItem();
    public TabItem FacturesDuJourTabItem = new TabItem();
    public TabItem MainHomeTabItem = new TabItem();
    public TabItem ParamètresTabItem = new TabItem();

    public TabItem RegistreTabItem = new TabItem();

    private void AccueilBtn_Click(object sender, RoutedEventArgs e)
    {
        // MainHomeTabItem.IsSelected = true;

        if (!displayedItems.Contains(MainHomeTabItem))
        {
            displayedItems.Add(MainHomeTabItem);
            TabControlItems.SelectedItem = MainHomeTabItem;
        }
        else
        {
            TabControlItems.SelectedItem = MainHomeTabItem;
        }
    }

    private void FactureDuJourBtn_Click(object sender, RoutedEventArgs e )
    {
        // FactureDuJourTabItem.IsSelected = true;

        if (!displayedItems.Contains(FacturesDuJourTabItem))
        {
            displayedItems.Add(FacturesDuJourTabItem);
            TabControlItems.SelectedItem = FacturesDuJourTabItem;
        }
        else
        {
            TabControlItems.SelectedItem = FacturesDuJourTabItem;
        }          
    }

    private void QuitterBtn_Click(object sender, RoutedEventArgs e)
    {
        Window Quitter = new QuitterMessageBox();
        Quitter.ShowDialog();
    }

    private void AjouterNouveauPatientBtn_Click(object sender, RoutedEventArgs e)
    {
        // AccueilTabItem.IsSelected = true;

        if (!displayedItems.Contains(item: AjouterPatientTabItem))
        {
            displayedItems.Add(AjouterPatientTabItem);
            TabControlItems.SelectedItem = AjouterPatientTabItem;
        }
        else
        {
            TabControlItems.SelectedItem = AjouterPatientTabItem;
        }
    }

    private void RegistreBtn_Click(object sender, RoutedEventArgs e)
    {
        // RegistreTabItem.IsSelected = true;

        if (!displayedItems.Contains(item: RegistreTabItem))
        {
            displayedItems.Add(RegistreTabItem);
            TabControlItems.SelectedItem = RegistreTabItem;
        }
        else
        {
            TabControlItems.SelectedItem = RegistreTabItem;
        
        }
    }

    private void parametresBtn_Click(object sender, RoutedEventArgs e)
    {
        // ParamètresTabItem.IsSelected = true;

        if (!displayedItems.Contains(item: ParamètresTabItem))
        {
            displayedItems.Add(ParamètresTabItem);
            TabControlItems.SelectedItem = ParamètresTabItem;
        }
        else
        {
            TabControlItems.SelectedItem = ParamètresTabItem;
        }
    }

    private void Window_closing(object sender, CancelEventArgs e)
    {
        e.Cancel = true;
        Window Quitter = new QuitterMessageBox();

        Quitter.ShowDialog();

    }

    private void AccueilTabCloseTabBtn_MouseDown(object sender, MouseButtonEventArgs e)
    {   
        displayedItems.RemoveAt(TabControlItems.SelectedIndex);
    }
}

In the Xaml of Accueil class I create a tabControl

<TabControl x:Name="TabControlItems" ItemsSource="{Binding displayedItems}">
                    

 </TabControl>

When I run the app I doesn't show the header text. It shows nothing. Please help me on it.

Sorry if my english is not perfect.

Upvotes: 1

Views: 637

Answers (2)

mm8
mm8

Reputation: 169200

You should bind to the DataContext itself instead of trying to bind to a Header property:

<TextBlock Text="{Binding}" Name="ItemNamexaml"
           FontSize="20" VerticalAlignment="Center" Foreground="#0C0239" FontFamily="Segoe Script"/>

The DataContext of the root element in the HeaderTemplate is the value of the Header property.

Upvotes: 1

BionicCode
BionicCode

Reputation: 28968

Currently the Binding to TabControl.ItemsSource doesn't resolve. This is because the property displayedItems cannot be found in the current TabControl.DataContext.

Add this.DataContext = this; to the constructor of Accueil:

public Accueil()
{
  InitializeComponent();
  this.DataContext = this;
}

This way Accueil will be implicitly assigned to (inherited) TabControl.DataContext.

Alternatively e.g., in case you don't want to set the DataContext of the parent control and its children to Accueil, change the Binding to

<TabControl ItemsSource="{Binding RelativeSource={RelativeSource AncestorType=Accueil}, Path=displayedItems}" />

The TabControl should not be bound to a collection of TabItem (which are item containers), but to a collection of model classes. The TabControl will generate those containers internally, applying styles and templates automatically.

Upvotes: 0

Related Questions