没有框架将TabbedPage绑定到ViewModel

Question

我有一个带有关联视图模型的选项卡式页面。

设置一些带有视图模型的内容页面作为子页面

如何使用选项卡式页面视图模型将页面子项与视图模型绑定

public class OrderFormViewModel : BaseViewModel
{
    #region Public Properties


    public ObservableCollection<Page> Items { get; set; } = new ObservableCollection<Page>();

    #endregion

    #region Constructor

    public OrderFormViewModel(List<object> ViewModelParms)
    {

        var page = ViewFactory.CreatePage<OrderViewModel>(ViewModelParms);
        Items.Add(page);

    }

    #endregion
}

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage x:Name="tab" xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:local="clr-namespace:HPl"
             x:Class="HPl.OrderForm"
            >
    <local:OrderPage x:Name="orderPage" Title="Order" />
    <local:OrderPage x:Name="HistoryPage" Title="History" />
</TabbedPage>

Answer 1

根据您的描述，您想使用ViewModel对TabbedPage的绑定，我做了一个示例，您可以看一下该步骤：

首先，创建包含一个BindableProperty ChildrenListProperty的自定义TabbedPage。

 public class BindableTabbedPage: TabbedPage
{
    public BindableTabbedPage()
    {
    }

    public static BindableProperty ChildrenListProperty =BindableProperty.Create<BindableTabbedPage, IList>(o => o.ChildrenList, new List<Page>(), propertyChanged: UpdateList);

    public IList ChildrenList
    {
        get { return (IList)GetValue(ChildrenListProperty); }
        set { SetValue(ChildrenListProperty, value); }
    }

    private static void UpdateList(BindableObject bindable, IList oldValue, IList newValue)
    {
        var tabbedPage = bindable as BindableTabbedPage;
        if (tabbedPage != null)
        {
            tabbedPage.Children.Clear();
            foreach (var page in newValue)
            {
                tabbedPage.Children.Add((Page)page);
            }
        }
    }
}

然后像下面这样使用此BindableTabbedPage：

<tab:BindableTabbedPage
x:Class="TabbedPageWithNavigationPage.TabbedPage1"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:tab="clr-namespace:TabbedPageWithNavigationPage"
ChildrenList="{Binding tabs}"
SelectedItem="{Binding selectedtab}"
mc:Ignorable="d">
<!--  Pages can be added as references or inline  -->

 </tab:BindableTabbedPage>

  public partial class TabbedPage1 : BindableTabbedPage
{      
    public TabbedPage1()
    {
        InitializeComponent();
        this.BindingContext = new tabbedpageviewmodel();
    }      
}

这是TabbedPage ViewModel：

 public class tabbedpageviewmodel : ViewModelBase
{
    public ObservableCollection<Page> tabs { get; set; }
    private Page _selectedtab;
    public Page selectedtab
    {
        get { return _selectedtab; }
        set
        {

            RaisePropertyChanged("selectedtab");
        }
    }   
    public tabbedpageviewmodel()
    {
        tabs = new ObservableCollection<Page>();
        tabs.Add(new Page1() { BindingContext = new page1viewmodel() });
        tabs.Add(new Page2() { BindingContext = new page2viewmodel() });
        selectedtab = tabs[0];
    }
}

page1和Page2 ViewModel如下：

public class page1viewmodel : ViewModelBase
{
    private string _content;
    public string content
    {
        get { return _content; }
        set
        {
            _content = value;
            RaisePropertyChanged("content");
        }
    }

    public page1viewmodel()
    {
        content = "Page 1";
    }
}

public class page2viewmodel : ViewModelBase
{
    private string _str;
    public string str
    {
        get { return _str; }
        set
        {
            _str = value;
            RaisePropertyChanged("content");
        }
    }
    public page2viewmodel()
    {
        str = "Page 2";
    }
}

ViewModelBase是实现INotifyPropertyChanged的类

 public class ViewModelBase : INotifyPropertyChanged
{

    public event PropertyChangedEventHandler PropertyChanged;

           public void RaisePropertyChanged(string propertyName)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

屏幕截图：