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 { get; set; } 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 { get; set; } public string Content { get; set; } 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.
Hello,
From the code you have provided, I did not find where you are binding your command to the Close button. Let me know if I am missing something.
You would need to get the default template of the TabItemEx element (which you can find in the DefaultStyles directory) and replace our command with yours.
Hi, thanks for the reply.
I couldn't find the place that I had to bind my command. That was my problem.
As you've said I've found the DefaultStyles directory and the TabItemEx style for my theme. Now should I have to clone the whole style just to change the Close button command?
Thanks in advance
Yes, you will need the whole style. In the style, you will find the close button declared with the following xaml :
<Button
Name="CloseButton"
Grid.Column="1"
Command="igWindows:TabItemExCommands.Close"
CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"
Visibility="{TemplateBinding ComputedCloseButtonVisibility}"
Style="{DynamicResource {x:Static igWindows:XamTabControl.CloseButtonStyleKey}}"
Margin="10,0,0,0"
/>
You will need to change the Command and bind it to your exposed command.
Thanks!