具有可关闭的选项卡项标头的选项卡控件

本文关键字：选项 控件 | 更新日期: 2023-09-27 18:36:41

我正在尝试创建带有按钮的 TabItem 标题，使用户能够关闭选项卡。对象的可视表示形式和数据绑定都很好。

我已经尝试了DataContext，但到目前为止，我还没有找到可行的解决方案。

我的 XAML：

<TabControl     
                    Grid.Column="3" 
                    Grid.Row="2"
                    x:Name="TabControlTargets" 
                    ItemsSource="{Binding Path=ViewModelTarget.IpcConfig.DatabasesList, UpdateSourceTrigger=PropertyChanged}"
                    SelectedItem="{Binding Path=ViewModelTarget.SelectedTab, UpdateSourceTrigger=PropertyChanged}">
                        <TabControl.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                                    <TextBlock FontFamily="Calibri" FontSize="15" FontWeight="Bold" Foreground="{Binding FontColor}" Text="{Binding Name, UpdateSourceTrigger=PropertyChanged}" HorizontalAlignment="Center" Margin="0,0,20,0"/>
                                    <Button HorizontalAlignment="Left" DataContext="{Binding RelativeSource={RelativeSource AncestorType=Window}, Path=DataContext}" Command="{Binding Path = ViewModelTarget.buttonRemoveDatabaseCommand}" 
                                            CommandParameter="**?**"
                                        >
                                        <Button.Content>
                                            <Image Height="15" Width="15" Source="pack://application:,,,/Images/cancel.png" />
                                        </Button.Content>
                                    </Button>
                                </StackPanel>
                            </DataTemplate>

我无法弄清楚如何设置按钮的命令参数，以便它引用正确的对象。

这是我的中继命令：

    public ICommand buttonRemoveDatabaseCommand
    {
        get
        {
            if (_buttonRemoveDatabaseCommand == null)
            {
                _buttonRemoveDatabaseCommand = new RelayCommand(
                    param => RemoveDatabase(param)
                    );
            }
            return _buttonRemoveDatabaseCommand;
        }
    }

这是我的删除数据库函数：

public void RemoveDatabase(object dB)
    {
        this.IpcConfig.RemoveDataBase((PCDatabase)dB);
    }

我强烈希望采用"无代码落后"方法的解决方案。

具有可关闭的选项卡项标头的选项卡控件

如注释中所述，您可以使用CommandParameter="{Binding}"将TabItem上下文传递给命令。

更好的方法是将命令移动到TabItem的视图模型。

下面是一个使用 Prism 和 Prism EventAggregator的示例实现。当然，您可以使用其他所有 MVVM 框架来实现这一点，甚至可以自己实现它，但这取决于您。

这将是您的TabControl ViewModel，其中包含所有数据库的列表或它要表示的任何内容。 

public class DatabasesViewModel : BindableBase
{
    private readonly IEventAggregator eventAggregator;
    public ObservableCollection<DatabaseViewModel> Databases { get; private set; }
    public CompositeCommand CloseAllCommand { get; }
    public DatabasesViewModel(IEventAggregator eventAggregator)
    {
        if (eventAggregator == null)
            throw new ArgumentNullException(nameof(eventAggregator));
        this.eventAggregator = eventAggregator;
        // Composite Command to close all tabs at once
        CloseAllCommand = new CompositeCommand();
        Databases = new ObservableCollection<DatabaseViewModel>();
        // Add a sample object to the collection
        AddDatabase(new PcDatabase());
        // Register to the CloseDatabaseEvent, which will be fired from the child ViewModels on close
        this.eventAggregator
            .GetEvent<CloseDatabaseEvent>()
            .Subscribe(OnDatabaseClose);
    }
    private void AddDatabase(PcDatabase db)
    {
        // In reallity use the factory pattern to resolve the depencency of the ViewModel and assing the
        // database to it
        var viewModel = new DatabaseViewModel(eventAggregator)
        {
            Database = db
        };
        // Register to the close command of all TabItem ViewModels, so we can close then all with a single command
        CloseAllCommand.RegisterCommand(viewModel.CloseCommand);
        Databases.Add(viewModel);
    }
    // Called when the event is received
    private void OnDatabaseClose(DatabaseViewModel databaseViewModel)
    {
        Databases.Remove(databaseViewModel);
    }
}

每个选项卡都会获得一个DatabaseViewModel作为上下文。这是定义关闭命令的位置。

public class DatabaseViewModel : BindableBase
{
    private readonly IEventAggregator eventAggregator;
    public DatabaseViewModel(IEventAggregator eventAggregator)
    {
        if (eventAggregator == null)
            throw new ArgumentNullException(nameof(eventAggregator));
        this.eventAggregator = eventAggregator;
        CloseCommand = new DelegateCommand(Close);
    }
    public PcDatabase Database { get; set; }
    public ICommand CloseCommand { get; }
    private void Close()
    {
        // Send a refence to ourself
        eventAggregator
            .GetEvent<CloseDatabaseEvent>()
            .Publish(this);
    }
}

当您单击TabItem上的关闭按钮时，将调用CloseCommand并发送一个事件，该事件将通知所有订阅者，应关闭此选项卡。在上面的示例中，DatabasesViewModel侦听此事件并将接收它，然后可以从ObservableCollection<DatabaseViewModel>集合中删除它。

为了使这种方式的优势更加明显，我添加了一个CloseAllCommand，这是一个CompositeCommand，当它被添加到Databases可观察集合时，它会注册到每个DatabaseViewModel的CloseCommand，该集合将在调用时调用所有注册的命令。

CloseDatabaseEvent是一个非常简单且只是一个标记，它决定了它接收的有效载荷类型，在这种情况下DatabaseViewModel。 

public class CloseDatabaseEvent : PubSubEvent<DatabaseViewModel> { }

在实际应用程序中，您希望避免将 ViewModel（此处DatabaseViewModel）用作有效负载，因为这会导致紧密耦合，事件聚合器模式旨在避免。

在这种情况下，它可以被认为是可以接受的，因为DatabasesViewModel需要知道DatabaseViewModel，但如果可能的话，最好使用 ID（Guid、int、string）。

这样做的好处是，您还可以通过其他方式（即菜单、功能区或上下文菜单）关闭选项卡，在这些方式中，您可能没有对DatabasesViewModel数据上下文的引用。

相关文章：