How to programmatically close TabItem in MVVM pattern.
This article describes how to programmatically close TabItem through button click in MVVM pattern.
TabItemExt can be closed programmatically by passing SelectedIndex as a parameter to RemoveAt method of Collection Class to remove the TabItem at the specified position from tab collection in view model. Adding command and command parameter on the button to close the TabitemExt in a button click in MVVM.
Added a Command binding for closing the TabItem in TabControlExt. By Binding ElementName and Path of TabControlExt as a CommandParameter to a button in order to close the selected TabItem in the view model.
The following code example demonstrates the same.
XAML
MainWindow.xaml
<Grid> <local:Tab></local:Tab> </Grid>
Tab.xaml
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Button HorizontalContentAlignment="Left" Content="CloseTab" CommandParameter="{Binding ElementName=Tabcontrol,Path=SelectedIndex}" Command="{Binding CloseItem,RelativeSource={RelativeSource AncestorType={x:Type local:Tab}}}" Grid.Row="0"></Button>
<syncfusion:TabControlExt x:Name="Tabcontrol" Grid.Row="1" ItemsSource="{Binding TabCollection}" DisplayMemberPath="Header">
<syncfusion:TabControlExt.ContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding Header}"></TextBlock>
</DataTemplate>
</syncfusion:TabControlExt.ContentTemplate>
</syncfusion:TabControlExt>
</Grid>
C#
TabControlModel.cs
Public class TabControlModel
{
private string header;
public string Header
{
get
{
return header;
}
set
{
header = value;
}
}
}
TabControlViewModel.cs
public class TabcontrolViewModel
{
private ObservableCollection<Model.TabControlModel>tabcollection;
public ObservableCollection<Model.TabControlModel>TabCollection
{
get
{
return tabcollection;
}
set
{
tabcollection = value;
}
}
public TabcontrolViewModel()
{
TabCollection = new ObservableCollection<Model.TabControlModel>();
TabCollection.Add(new Model.TabControlModel { Header = "Tab1" });
TabCollection.Add(new Model.TabControlModel { Header = "Tab2" });
TabCollection.Add(new Model.TabControlModel { Header = "Tab3" });
TabCollection.Add(new Model.TabControlModel { Header = "Tab4" });
TabCollection.Add(new Model.TabControlModel { Header = "Tab5" });
TabCollection.Add(new Model.TabControlModel { Header = "Tab6" });
}
}
Tab.xaml.cs
public partial class Tab : UserControl
{
private ICommand _closeitem;
public Tab()
{
InitializeComponent();
this.DataContext = new ViewModel.TabcontrolViewModel();
_closeitem = new DelegateCommand(Closeitemtab, _canexecute);
}
private void Closeitemtab(object obj)
{
int index = (int)obj;
if(index>=0)
{
(this.DataContext as ViewModel.TabcontrolViewModel).TabCollection.RemoveAt(index);
}
}
public ICommand CloseItem
{
get
{
return _closeitem;
}
}
private bool _canexecute(object arg)
{
return true;
}
}
The output for the above code is shown below:
