Reputation: 21
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
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
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