CODEWITHSUNDEEP
c#wpfmvvmprismtabcontrol
IBRA
IBRA

Reputation: 1782

Close dynamically added Tab Items using Prism - WPF

I'm using Prism RegionManager, to register different views with a TabControl region inside the MainView.

MainView.xaml

    <TabControl regions:RegionManager.RegionName="MainViewTabRegion">
        <TabControl.ItemTemplate>
            <DataTemplate>
                <DockPanel Width="Auto">
                    <Button Command="{Binding DataContext.DataContext.CloseTabCommand, RelativeSource={RelativeSource AncestorType={x:Type TabItem}}}"
                            CommandParameter="{Binding RelativeSource={RelativeSource AncestorType={x:Type TabItem}}}"
                            Content="X"
                            Cursor="Hand"
                            DockPanel.Dock="Right"
                            Focusable="False"
                            FontFamily="Courier"
                            FontWeight="Bold"
                            Margin="4,0,0,0"
                            FontSize="10"
                            VerticalContentAlignment="Center"
                            Width="15" Height="15" />

                            <ContentPresenter Content="{Binding DataContext.DataContext.HeaderText, RelativeSource={RelativeSource AncestorType={x:Type TabItem}}}" />
                 </DockPanel>
             </DataTemplate>
        </TabControl.ItemTemplate>
    </TabControl>

In MainViewViewModel I'm Adding different views with the same base class.

MainViewViewModel.cs:

private void AddProjectView() {
     var view = _container.Resolve<ProjectSettingsView>();
     var dataContext = _container.Resolve<ProjectSettingsViewModel>();
     dataContext.HeaderText = "test header txt";
     view.DataContext = dataContext;
     _regionManager.RegisterViewWithRegion("MainViewTabRegion", () => view);
}

I can add new tab item with the view.

How can I close the tab item, the <TabControl.ItemTemplate> in the XAML code above, adds a close button with CloseCommand in the ProjectSettingsViewModel, with the TabItem bonded to it.

ProjectSettingsViewModel.cs

private void OnExecuteCloseCommand(object tabItem) {
     //Close this TabItem
}

Upvotes: 1

Views: 2296

Answers (3)

mm8
mm8

Reputation: 169228

Bind the CommandParameter property of the Button to the DataContext of the TabItem:

<Button Command="{Binding DataContext.DataContext.CloseTabCommand, RelativeSource={RelativeSource AncestorType={x:Type TabItem}}}"
                            CommandParameter="{Binding Path=DataContext, RelativeSource={RelativeSource AncestorType={x:Type TabItem}}}"
                            Content="X"
                            Cursor="Hand"
                            DockPanel.Dock="Right"
                            Focusable="False"
                            FontFamily="Courier"
                            FontWeight="Bold"
                            Margin="4,0,0,0"
                            FontSize="10"
                            VerticalContentAlignment="Center"
                            Width="15" Height="15" />

You could then remove the view like this in the view model:

public class ProjectSettingsViewModel
{
    private readonly IRegionManager _regionManager;

    public ProjectSettingsViewModel(IRegionManager regionManager)
    {
        _regionManager = regionManager;
        CloseTabCommand = new DelegateCommand<object>(OnExecuteCloseCommand);
    }

    private void OnExecuteCloseCommand(object tabItem)
    {
        _regionManager.Regions["MainViewTabRegion"].Remove(tabItem);
    }

    public DelegateCommand<object> CloseTabCommand { get; }
}

Upvotes: 5

Brandon Kramer
Brandon Kramer

Reputation: 1118

You just need to get the reference to your IRegionManager. Then you get the Region that your view belongs to, and call Remove on the region and pass the tabItem reference to remove it.

Ex:

private void OnExecuteCloseCommand(object tabItem) {
     regionManager.Regions["MainViewTabRegion"].Remove(tabItem);
}

You can actually just place this in your MainViewViewModel and bind to it in the DataTemplate, then you don't have to rewrite the close command for each tab item's view model.

Upvotes: 3

user5420778
user5420778

Reputation:

I cover this in my Pluralsight course "Prism Problems & Solutions: Mastering the Tab Control". You can see the solution here: https://app.pluralsight.com/library/courses/prism-mastering-tabcontrol/table-of-contents

Essentially, you just need to create a TriggerAction that does all the work for you. Simple. Nothing is needed in the VM.

Upvotes: 0

Related Questions