使用 Prism 关闭动态添加的选项卡项 - WPF

Question

我正在使用 Prism RegionManager，用 MainView 内的 TabControl 区域注册不同的视图。

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>

在 MainViewViewModel 中，我添加了具有相同基础的不同视图 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);
}

我可以在视图中添加新的标签项。

如何关闭选项卡项，上面XAML代码中的<TabControl.ItemTemplate>，在ProjectSettingsViewModel中添加一个带有CloseCommand的关闭按钮，使用TabItem绑定到它。

ProjectSettingsViewModel.cs

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

Answer 1

我在我的 Pluralsight 课程中介绍了这个 "Prism Problems & Solutions: Mastering the Tab Control"。您可以在此处查看解决方案：https://app.pluralsight.com/library/courses/prism-mastering-tabcontrol/table-of-contents

基本上，您只需要创建一个 TriggerAction 来为您完成所有工作。简单的。 VM 中不需要任何内容。

Answer 2

您只需要获取对 IRegionManager 的引用。然后你得到你的视图所属的区域，并在该区域上调用 Remove 并传递 tabItem 引用以将其删除。

例如：

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

您实际上可以将它放在您的 MainViewViewModel 中并在 DataTemplate 中绑定到它，然后您不必为每个选项卡项的视图模型重写关闭命令。

Answer 3

将 Button 的 CommandParameter 属性绑定到 TabItem 的 DataContext:

<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" />

然后您可以在视图模型中像这样删除视图：

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

使用 Prism 关闭动态添加的选项卡项 - WPF

Close dynamically added Tab Items using Prism - WPF

c#

wpf

tabcontrol

prism

mvvm