数据绑定在两个标签页子项之间不起作用

Question

我是 Xamarin.Forms 开发的新手，我正在尝试构建一个小型 Xamarin 应用程序来开始。 我的应用目前有一个主 TabbedPage，它有两个 ContentPages 子级。在 ListePage 上，我有一个带有 ObservableCollection 的 ListView，其中 OlonaModel 是一个带有 int Numero 和一个文本字符串的对象。我希望详细信息页面从 ListePage 的列表视图中显示所选 OlonaModel 的详细信息，但是当我从列表视图中选择一个项目时，详细信息页面似乎没有更新为更改。 两个内容页面都绑定到同一个 ListPageViewModel。当我从列表视图中选择一个项目时，视图模型会更新，但更改不会反映在详细信息页面上，我真的很困惑。 设置视图模型的 SelectedItem 后，如何使 Details 自行刷新？

主页：

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage 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:local="clr-namespace:App.Views"
             xmlns:viewmodels="clr-namespace:App.ViewModels"
             mc:Ignorable="d"
             x:Class="App.MainPage">
    <TabbedPage.Children>
        <local:ListePage/>
        <local:Details/>
    </TabbedPage.Children>
</TabbedPage>

ListePage.xaml（帖子中的ContentPage1）：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage 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"
             mc:Ignorable="d"
             x:Class="App.Views.ListePage"
             Title="Liste">
    <ContentPage.Content>
        <StackLayout>
            <ListView x:Name="ListeMipoitra" ItemSelected="ListeMipoitra_ItemSelected">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="auto"></ColumnDefinition>
                                </Grid.ColumnDefinitions>
                                <Label Text="{Binding Numero}" Grid.Column="0" FontSize="Medium" FontAttributes="Bold"/>
                            </Grid>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

ListePage.xaml.cs ：

namespace App.Views
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class ListePage : ContentPage
    {
        public static ListePageViewModel viewModel;
        public ListePage()
        {
            InitializeComponent();
            viewModel = new ListePageViewModel();
            this.BindingContext = viewModel;
            ListeMipoitra.ItemsSource = viewModel.listeOlonaVM;
        }

        private void ListeMipoitra_ItemSelected(object sender, SelectedItemChangedEventArgs e)
        {
            viewModel.setSelected((OlonaModel)e.SelectedItem);
        }
    }
}

Details.xaml（帖子中的ContentPage2）：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage 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"
             mc:Ignorable="d"
             x:Class="App.Views.Details"
             Title="Détails">
    <ContentPage.Content>
        <StackLayout>
            <Label Text="{Binding Text}"/>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Details.xaml.cs ：

namespace App.Views
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class Details : ContentPage
    {
        public Details()
        {
            InitializeComponent();
            this.BindingContext = ListePage.viewModel.selected;
        }
    }
}

ListePageViewModel.cs：

注意：我正在使用 Fody 和 PropertyChanged.Fody 织布器，因此当属性更改时会自动调用 RaisePropertyChanged() 事件（应该）

namespace App.ViewModels
{

    public class ListePageViewModel : INotifyPropertyChanged 
    {
        public ObservableCollection<OlonaModel> listeOlonaVM;

        public OlonaModel selected { get; set; }

        public ListePageViewModel()
        {
            listeOlonaVM = new ObservableCollection<OlonaModel>();
            listeOlonaVM = ListeOlona.liste;
        }

        public event PropertyChangedEventHandler PropertyChanged;

        public void setSelected(OlonaModel olona)
        {
            selected = olona;
        }
    }
}

Olona 对象的模型：

namespace App.Models
{
    public class OlonaModel
    {
        public int Numero { get; set; }
        public string Text { get; set; }

        public OlonaModel(int num, string text)
        {
            this.Numero = num;
            this.Text= text;
        }
    }
}

存储列表模型的ListeOlona.cs：

InitializeList() 方法在应用启动时调用。

namespace App.ViewModels
{
    public static class ListeOlona 
    {
        public static ObservableCollection<OlonaModel> liste = new ObservableCollection<OlonaModel>();

        public static void InitializeList()
        {
            liste.Add(new OlonaModel(1,
                "FirstItem"));
            liste.Add(new OlonaModel(2,
                "Second Item"));
        }
    }
}

Answer 1

根据你的描述，有tabbedpage，有两个页面，一个是Listpage，另一个是detailpage，你想在listpage中选择listview项，那么其他detail info会显示detailpage，对吗？

如果是，我建议你可以这样做：

标签页：

<TabbedPage
x:Class="App4.TabbedPage2"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:App4"
x:Name="tabbedpage2">
<!--  Pages can be added as references or inline  -->
<TabbedPage.Children>
    <local:ListPage Title="Mian page" BindingContext="{Binding}" />
    <local:DetailPage Title="Detail page" BindingContext="{Binding select}" />
</TabbedPage.Children>

  public partial class TabbedPage2 : TabbedPage
{
    public TabbedPage2 ()
    {
        InitializeComponent();
        this.BindingContext = new ListePageViewModel();
    }     
}

public class OlonaModel
{
    public int Numero { get; set; }
    public string Text { get; set; }
}

public class ListePageViewModel : ViewModelBase
{
    public ObservableCollection<OlonaModel> listeOlonaVM { get; set; }
    private OlonaModel _select;
    public OlonaModel select
    {
        get { return _select; }
        set
        {
            _select = value;
            RaisePropertyChanged("select");
        }
    }
    public ListePageViewModel()
    {
        listeOlonaVM = new ObservableCollection<OlonaModel>()
        {
            new OlonaModel(){Numero=1,Text="first item"},
            new OlonaModel(){Numero=2,Text="second item"},
            new OlonaModel(){Numero=3,Text="third item"},
            new OlonaModel(){Numero=4,Text="fouth item"}

        };
        select = listeOlonaVM[0];
    }
}

列表页面：

 <StackLayout>
        <ListView ItemsSource="{Binding listeOlonaVM}" SelectedItem="{Binding select}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout>
                            <Label Text="{Binding Numero}" />
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>

详细信息页面：

  <StackLayout>
        <Label
            HorizontalOptions="CenterAndExpand"
            Text="{Binding Text}"
            VerticalOptions="CenterAndExpand" />
    </StackLayout>

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