Как добавить элемент табуляции с помощью MVVM Light? - PullRequest
0 голосов
/ 03 марта 2019

У меня есть 2 XAML , где первый будет отображать список второго во время выполнения.1-й код 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 в элементе начальной вкладки.Второй код xaml, который будет отображать WebView, выглядит следующим образом.

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 в список и, как результат, дополнительныеВкладка создана в пользовательском интерфейсе не работает?Я не могу добавить новую TAB в элемент TabView в первом XAML?Ошибка не обнаружена.

Я боролся уже 2 дня, пытаясь добавить новый TabViewItem способом MVVM, или уже существует среда MVVM, которая может включать эту функцию?

...