如何使用MVVM Light添加选项卡项?

时间:2019-03-03 06:28:28

标签: c# mvvm-light uwp-xaml

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

1。 BrowserWindowView.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,我有一个如下所示的 ViewModel 类代码,并且它具有 RelayCommand 来处理“ NEW TAB”按钮的单击。

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

我的问题是:为什么每次单击“ NEW TAB” 按钮时,应该将新的 BrowserTabViewModel 对象添加到列表中,并且在UI中创建的其他选项卡不起作用?我不能在第一个XAML的 TabView 元素中添加新的TAB?没有检测到错误。

我已经苦苦挣扎了2天,试图以MVVM方式添加新的 TabViewItem ,还是有可能启用此功能的MVVM框架?

0 个答案:

没有答案