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
}

回答1:

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; }
}

回答2:

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.

回答3:

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.

来源：https://stackoverflow.com/questions/42652206/close-dynamically-added-tab-items-using-prism-wpf

标签

wpf

mvvm

prism

tabcontrol