1
votes

I have a custom tab control, which displays a frame inside the TabItem, and a custom header. Setting the binding in ItemContainerStyle to display the TabItem works, but I can not get the binding in the DataTemplate to set the header text to work correctly. Note that the TabControl is bound to an ObservableCollection of items, which contain two properties - TI, the frame to display in the TabItem, and DisplayName, the string to display in the header.

===============XAML================

<TabControl Height="Auto" Name="mainTabControl" Width="Auto" IsSynchronizedWithCurrentItem="True" Margin="4" >
  <TabControl.ItemTemplate>
    <DataTemplate>
      <DockPanel Width="Auto">
        <Button 
            Content="X"
            Cursor="Hand"
            DockPanel.Dock="Right"
            Focusable="False"
            FontFamily="Courier" 
            FontSize="9"
            FontWeight="Bold"  
            Margin="0,1,0,0"
            Padding="0"
            VerticalContentAlignment="Bottom"
            Width="16" Height="16"               
            >
          <!-- Command=""      //Command binding TBD later
            CommandParameter="" -->
        </Button>
        <ContentPresenter 
            Content ="{Binding DisplayName}"
            VerticalAlignment="Center" 
            Margin="0,0,7,0"
          />
      </DockPanel>
    </DataTemplate>
  </TabControl.ItemTemplate>

  <TabControl.Style>
    <Style TargetType="TabControl">
      <Style.Triggers>
        <DataTrigger Binding="{Binding Items.Count, RelativeSource={RelativeSource Self}}"
                        Value="0">
          <Setter Property="Visibility" Value="Hidden" />
        </DataTrigger>
      </Style.Triggers>
    </Style>
  </TabControl.Style>
  <TabControl.ItemContainerStyle  >
    <Style TargetType="TabItem">
      <Setter Property="Content" Value="{Binding TI}"/>
    </Style>
  </TabControl.ItemContainerStyle>
</TabControl>

============BOUND ITEM=============

  class TabItemContainer : Frame
  {
    public event DependencyPropertyChangedEventHandler PropertyChanged;

    private void NotifyPropertyChanged(String info)
    {
      if (PropertyChanged != null)
      {
        PropertyChanged(this, new DependencyPropertyChangedEventArgs());
      }
    }

    private string displayname;

    public string DisplayName
    {
      get { return displayname; }
      set
      {
        if (value != this.displayname)
        {
          displayname = value;
          NotifyPropertyChanged("DisplayName");
        }
      }
    }

    public Frame TI { get; set; }
  }

===========CODE BEHIND=============

ObservableCollection<TabItemContainer> Tablist;

public MainWindow()
{
  InitializeComponent();

  Tablist = new ObservableCollection<TabItemContainer>();

  TabItemContainer tic = new TabItemContainer();
  tic.DataContext = tic;
  tic.DisplayName = "Untitled";
  tic.TI = new Frame();
  tic.TI.Navigate(new Page1());
  Tablist.Add(tic);
  mainTabControl.ItemsSource = Tablist;
  mainTabControl.SelectedIndex = Tablist.Count - 1;
}
1
What do you mean by "doesn't work"? Do you get an error? Does nothing show up? From what I can see, the binding that displays DisplayName in the header looks correct and should work.Rachel
No errors, and nothing shows up. It should display "Untitled" in the tab header.Drew
Do you at least see your Close button?Rachel
Yes, the Close button appears. If I replace the ContentPresenter, Content to text, eg "hello", hello is displayed in the tab header.Drew

1 Answers

1
votes

Add a Header binding to your TabItem Style

<TabControl.ItemContainerStyle>
    <Style TargetType="TabItem">
        <Setter Property="Content" Value="{Binding TI}"/>
        <Setter Property="Header" Value="{Binding }" />
    </Style>
</TabControl.ItemContainerStyle>

The DataContext in your Header isn't automatically getting set to your TabItemContainer (I thought it did.... must be mistaken)