Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
714
How to remove item from XamTabControl's ItemsSource when TabItemEx's close button is clicked
posted

Hi,

I have a pretty basic need but unfortunately I couldn't figure out how to do it.

Below is the markup of my window which has a TabControl bound to TabList property

of it's DataContext:

  <Window.Resources>
    <vm:MainWindowViewModel x:Key="ViewModel"/>

    <DataTemplate x:Key="DocumentItemTemplate" DataType="{x:Type ig:TabItemEx}">
      <TextBlock Text="{Binding Path=Title}" Margin="3,0,0,0" />
    </DataTemplate>

    <DataTemplate x:Key="DocumentContentTemplate">
      <TextBlock Text="{Binding Path=Content}" Margin="3,0,0,0" />
    </DataTemplate>
  </Window.Resources>
  <ig:XamTabControl Theme="Office2k7Black" x:Name="tcMain"
                    DataContext="{StaticResource ViewModel}"
                    ItemsSource="{Binding TabList}"
                    SelectedIndex="0"
                    ItemTemplate="{StaticResource DocumentItemTemplate}"
                    ContentTemplate="{StaticResource DocumentContentTemplate}"
                    AllowTabClosing="True" TabItemCloseButtonVisibility="WhenSelectedOrHotTracked">
  </ig:XamTabControl>
Below is the code of ViewModel that is the DataContext of the window:
  public class MainWindowViewModel {

    private ICommand _RemoveTabCommand;

    public MainWindowViewModel() {
      _RemoveTabCommand = new RelayCommand<TabClass>(RemoveTab, CanRemoveTab);
      TabList = TabClass.GetList();
    }

    public ObservableCollection<TabClass> TabList { getset; }

    public ICommand RemoveTabCommand {
      get { return _RemoveTabCommand; }
    }


    private bool CanRemoveTab(TabClass tab) {
      return tab != null;
    }

    private void RemoveTab(TabClass tab) {
      TabList.Remove(tab);
    }
  }

  public class TabClass {
    public string Title { getset; }
    public string Content { getset; }

    public TabClass(string title, string content) {
      Title = title;
      Content = content;
    }

    public static ObservableCollection<TabClass> GetList() {
      var result = new ObservableCollection<TabClass>();
      result.Add(new TabClass("Tab 1""Content 1"));
      result.Add(new TabClass("Tab 2""Content 2"));
      result.Add(new TabClass("Tab 3""Content 3"));
      result.Add(new TabClass("Tab 4""Content 4"));
      result.Add(new TabClass("Tab 5""Content 5"));
      result.Add(new TabClass("Tab 6""Content 6"));

      return result;
    }
  }
What I want is to call the RemoveTabCommand when the close button of a TabItemEx is clicked. 
This should be easy and straightforward but I couldn't do it. We use MEF and MVVM in our project 
and our views exist as resources in a resource dictionary. Therefore we can't manipulate the view
controls in the code-behind; just bind our ViewModels to our Views manage everything through 
commands.


Does anyone know how to do this?

Thanks in advance.