我有一个带有关联视图模型的选项卡式页面。
设置一些带有视图模型的内容页面作为子页面
如何使用选项卡式页面视图模型将页面子项与视图模型绑定
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>
答案 0 :(得分:0)
根据您的描述,您想使用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));
}
}
}
屏幕截图: