如何使用mvvm light添加选项卡项?

我有2个 XAML 其中第一个将在运行时显示第二个的列表。下面是第一个xaml代码。

1。浏览器窗口视图.xaml

<Page
    x:Class="AffiliaTool.Lib.View.BrowserWindowView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:core="using:Microsoft.Xaml.Interactions.Core"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:i="using:Microsoft.Xaml.Interactivity"
    xmlns:local="using:AffiliaTool.Lib.View"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:tk="using:Microsoft.Toolkit.Uwp.UI.Controls"
    xmlns:vm="using:AffiliaTool.Lib.ViewModel"
    mc:Ignorable="d">
    <Page.DataContext>
        <vm:BrowserWindowViewModel />
    </Page.DataContext>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="41" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid>
            <Button Width="100" Content="NEW TAB">
                <i:Interaction.Behaviors>
                    <core:EventTriggerBehavior EventName="Click">
                        <core:InvokeCommandAction Command="{Binding OnNewTabClicked}" />
                    </core:EventTriggerBehavior>
                </i:Interaction.Behaviors>
            </Button>
        </Grid>
        <tk:TabView
            Name="TabViewBar"
            Grid.Row="1"
            ItemsSource="{Binding Tabs, Mode=TwoWay}">
            <i:Interaction.Behaviors>
                <core:EventTriggerBehavior EventName="Loaded">
                    <core:ChangePropertyAction
                        PropertyName="TabViewBar"
                        TargetObject="{Binding}"
                        Value="{Binding ElementName=TabViewBar, Mode=TwoWay}" />
                    <core:InvokeCommandAction Command="{Binding OnTabViewLoaded}" />
                </core:EventTriggerBehavior>
            </i:Interaction.Behaviors>
            <tk:TabView.ItemHeaderTemplate>
                <DataTemplate>
                    <TextBlock Text="Hello Tab" />
                </DataTemplate>
            </tk:TabView.ItemHeaderTemplate>
            <tk:TabView.ItemTemplate>
                <DataTemplate>
                    <local:BrowserTabWidget DataContext="{Binding}" />
                </DataTemplate>
            </tk:TabView.ItemTemplate>
        </tk:TabView>
    </Grid>
</Page>

第一个xaml用于生成一个新窗口并显示第一个 WebVIEW 初始选项卡项中的对象。将呈现webview的第二个xaml代码如下。

2。BrowserTabWidget.xaml

<UserControl
    x:Class="AffiliaTool.Lib.View.BrowserTabWidget"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:core="using:Microsoft.Xaml.Interactions.Core"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:i="using:Microsoft.Xaml.Interactivity"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:vm="using:AffiliaTool.Lib.ViewModel"
    mc:Ignorable="d">
    <UserControl.DataContext>
        <vm:BrowserTabViewModel />
    </UserControl.DataContext>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="41" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid x:Name="Toolbar" Grid.Row="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="42" />
                <ColumnDefinition Width="42" />
                <ColumnDefinition Width="42" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="42" />
            </Grid.ColumnDefinitions>
            <Button Grid.Column="0" Background="Transparent">
                <Button.Content>
                    <TextBlock
                        Margin="0,0,4,0"
                        VerticalAlignment="Center"
                        FontFamily="Segoe MDL2 Assets"
                        FontSize="18"
                        Foreground="#f06a35"
                        Text="&#xE760;" />
                </Button.Content>
            </Button>
            <Button Grid.Column="1" Background="Transparent">
                <Button.Content>
                    <TextBlock
                        Margin="0,0,4,0"
                        VerticalAlignment="Center"
                        FontFamily="Segoe MDL2 Assets"
                        FontSize="18"
                        Foreground="#f06a35"
                        Text="&#xE761;" />
                </Button.Content>
            </Button>
            <Button Grid.Column="2" Background="Transparent">
                <Button.Content>
                    <TextBlock
                        Margin="0,0,4,0"
                        VerticalAlignment="Center"
                        FontFamily="Segoe MDL2 Assets"
                        FontSize="18"
                        Foreground="#f06a35"
                        Text="&#xEDAB;" />
                </Button.Content>
            </Button>
            <TextBox
                Grid.Column="3"
                Height="32"
                Margin="4,0"
                Background="White"
                BorderBrush="#f06a35"
                BorderThickness="1"
                FontSize="18" />
            <Button Grid.Column="4" Background="Transparent">
                <Button.Content>
                    <TextBlock
                        Margin="0,0,4,0"
                        VerticalAlignment="Center"
                        FontFamily="Segoe MDL2 Assets"
                        FontSize="18"
                        Foreground="#f06a35"
                        Text="&#xE896;" />
                </Button.Content>
            </Button>
        </Grid>
        <WebView x:Name="WebBrowser" Grid.Row="1">
            <i:Interaction.Behaviors>
                <core:EventTriggerBehavior EventName="Loaded">
                    <core:ChangePropertyAction
                        PropertyName="WebBrowser"
                        TargetObject="{Binding}"
                        Value="{Binding ElementName=WebBrowser, Mode=TwoWay}" />
                    <core:InvokeCommandAction Command="{Binding OnBrowserLoaded}" />
                </core:EventTriggerBehavior>
            </i:Interaction.Behaviors>
        </WebView>
    </Grid>
</UserControl>

对于第一个xaml我有一个 视图模型 类代码如下,它有 中继命令 要处理“新建选项卡”按钮,请单击。

namespace AffiliaTool.Lib.ViewModel
{
    public class BrowserWindowViewModel : ViewModelBase
    {
        private List<BrowserTabViewModel> _tabs;
        private RelayCommand _onNewTabClicked;
        private RelayCommand _onTabViewLoaded;
        private IWebScrapper _scrapper;
        private TabView _tabView;

        public BrowserWindowViewModel()
        {
            _tabs = new List<BrowserTabViewModel>();
        }

        public IWebScrapper Scrapper
        {
            set
            {
                _scrapper = value;
            }
        }

        public TabView TabViewBar
        {
            get
            {
                return _tabView;
            }
            set
            {
                Set("TabViewBar", ref _tabView, value);
            }
        }

        public List<BrowserTabViewModel> Tabs
        {
            get
            {
                return _tabs;
            }
            private set { }
        }

        public RelayCommand OnTabViewLoaded
        {
            get
            {
                return _onTabViewLoaded ?? (_onTabViewLoaded = new RelayCommand(() =>
                {
                    Debug.WriteLine(">>> TAB VIEW LOADED...");
                }));
            }
        }

        public RelayCommand OnNewTabClicked
        {
            get
            {
                return _onNewTabClicked ?? (_onNewTabClicked = new RelayCommand(() =>
                {
                    var tab = new BrowserTabViewModel
                    {
                        Scrapper = _scrapper
                    };
                    Tabs.Add(tab);
                }));
            }
        }
    }
}

我的问题是:为什么每次我点击 “新标签” 应该添加新的按钮 浏览器选项卡视图模型 对象并导致在用户界面中创建的其他选项卡不工作?我无法将新标签添加到 TabVIEW 第一个xaml中的元素?未检测到错误。

我已经挣扎了两天了,想增加新的 TabVIEW项 以mvvm的方式,或者是否还有mvvm框架可以启用此功能?