Xamarin开发iOS购物车应用：TabbedPage子页面标题与ListView绑定求助

嘿，我来帮你搞定这个数据绑定的问题！结合你用C#、Visual Studio 2017和Xamarin开发iOS购物车应用的场景，我整理了几个关键步骤，帮你解决TabbedPage子ContentPage的标题绑定和ListView数据加载的问题：

1. 先搞定基础：实现INotifyPropertyChanged接口 #

数据绑定的核心是让UI能感知到数据变化，所以你的ViewModel必须实现这个接口。最好写一个基类让所有ViewModel继承：

using System.ComponentModel;
using System.Runtime.CompilerServices;

namespace SalesRep.SalesOrderPages
{
    public class BaseViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

2. 设计子页面的ViewModel #

以购物车子页面为例，ViewModel需要包含页面标题和商品集合属性，还要写加载REST数据的方法：

using System.Collections.ObjectModel;
using System.Threading.Tasks;

namespace SalesRep.SalesOrderPages
{
    public class CartViewModel : BaseViewModel
    {
        private string _pageTitle;
        public string PageTitle
        {
            get => _pageTitle;
            set
            {
                _pageTitle = value;
                OnPropertyChanged(); // 通知UI标题变化
            }
        }

        // *一定要用ObservableCollection代替List*，它会自动通知UI数据更新
        private ObservableCollection<CartItem> _cartItems;
        public ObservableCollection<CartItem> CartItems
        {
            get => _cartItems;
            set
            {
                _cartItems = value;
                OnPropertyChanged();
            }
        }

        // 加载REST数据的异步方法，避免阻塞UI
        public async Task LoadCartDataAsync()
        {
            // 替换成你的REST服务调用逻辑
            var restResponse = await YourRestService.GetShoppingCartItemsAsync();
            
            if (restResponse.IsSuccessStatusCode)
            {
                var cartItems = await restResponse.Content.ReadAsAsync<List<CartItem>>();
                CartItems = new ObservableCollection<CartItem>(cartItems);
                // 动态设置标题，比如显示商品数量
                PageTitle = $"购物车 ({CartItems.Count})";
            }
            else
            {
                PageTitle = "购物车（加载失败）";
                CartItems = new ObservableCollection<CartItem>();
            }
        }
    }

    // 商品实体类，根据你的REST返回结构调整
    public class CartItem
    {
        public int ProductId { get; set; }
        public string ProductName { get; set; }
        public decimal UnitPrice { get; set; }
        public int Quantity { get; set; }
    }
}

3. TabbedPage中子页面的标题绑定 #

在TabbedPage的XAML里，给每个子ContentPage绑定标题，并指定对应的ViewModel：

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:SalesRep.SalesOrderPages"
            x:Class="SalesRep.SalesOrderPages.TabbedPage1">

    <!-- 购物车子页面 -->
    <local:CartPage BindingContext="{Binding CartViewModel}"
                    Title="{Binding PageTitle}" />

    <!-- 其他子页面类似配置 -->
    <local:OrderHistoryPage BindingContext="{Binding OrderHistoryViewModel}"
                            Title="{Binding PageTitle}" />
</TabbedPage>

然后在TabbedPage的后台代码中设置BindingContext，初始化ViewModel并加载数据：

namespace SalesRep.SalesOrderPages
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class TabbedPage1 : TabbedPage
    {
        public TabbedPage1()
        {
            InitializeComponent();
            // 创建TabbedPage的根ViewModel，管理所有子页面ViewModel
            var tabbedVm = new TabbedRootViewModel
            {
                CartViewModel = new CartViewModel(),
                OrderHistoryViewModel = new OrderHistoryViewModel()
            };
            BindingContext = tabbedVm;

            // 异步加载购物车数据，注意不能在构造函数直接用await，要包装一下
            _ = LoadInitialDataAsync(tabbedVm);
        }

        private async Task LoadInitialDataAsync(TabbedRootViewModel vm)
        {
            await vm.CartViewModel.LoadCartDataAsync();
            // 可以在这里加载其他页面的数据
            // await vm.OrderHistoryViewModel.LoadOrdersAsync();
        }
    }

    // TabbedPage的根ViewModel
    public class TabbedRootViewModel
    {
        public CartViewModel CartViewModel { get; set; }
        public OrderHistoryViewModel OrderHistoryViewModel { get; set; }
    }
}

4. ListView的数据绑定实现 #

在子ContentPage（比如CartPage.xaml）中，给ListView绑定ItemsSource，并设置ItemTemplate展示每个商品：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SalesRep.SalesOrderPages.CartPage">

    <StackLayout Padding="10">
        <ListView ItemsSource="{Binding CartItems}"
                  HasUnevenRows="True">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout Orientation="Horizontal" Padding="5" Spacing="15">
                            <Label Text="{Binding ProductName}" 
                                   FontSize="Medium" 
                                   FontAttributes="Bold" />
                            <Label Text="{Binding UnitPrice, StringFormat='{0:C}'}" 
                                   HorizontalOptions="EndAndExpand" 
                                   TextColor="Gray" />
                            <Label Text="{Binding Quantity}" 
                                   TextColor="DarkBlue" />
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

常见问题排查 #

• BindingContext未正确设置：检查每个子页面的BindingContext是否指向对应的ViewModel，或者是否在TabbedPage中正确传递。
• 数据加载时机错误：不要在构造函数中同步调用REST接口，一定要用async/await异步加载，避免UI阻塞。
• 属性名不匹配：XAML中的绑定路径（比如{Binding PageTitle}）必须和ViewModel中的属性名完全一致，大小写敏感。
• 忘记用ObservableCollection：如果用List<CartItem>，数据更新后UI不会自动刷新，必须用ObservableCollection。

内容的提问来源于stack exchange，提问作者P.Thiyagu