Xamarin.Forms中ListView列表项绑定并更新Microchart图表的方法

作为Xamarin新手，你选的这个场景其实挺常见的，只要调整下数据模型和绑定逻辑，就能轻松实现列表项里的图表随数据更新自动变化。下面一步步来帮你搞定：

1. 完善Person数据模型 #

首先你的Person类里还缺少图表数据的属性，我们需要添加一个ChartData属性，并且确保它能在Kicks或Marks变化时自动更新。另外注意你的Marks属性目前没实现INotifyPropertyChanged，也要补上：

namespace People.Models {
    [Table("people")]
    public class Person : INotifyPropertyChanged {
        [SQLite.PrimaryKey, SQLite.AutoIncrement]
        public int Id { get; set; }
        [MaxLength(250)]
        public string Name { get; set; }
        public string GNumber { get; set; }
        public DateTime Date { get; set; }

        private int kicks;
        public int Kicks {
            get { return kicks; }
            set { 
                this.kicks = value; 
                OnPropertyChanged(nameof(Kicks));
                // Kicks变化时，触发ChartData更新
                OnPropertyChanged(nameof(ChartData));
            }
        }

        private int marks;
        public int Marks {
            get { return marks; }
            set { 
                this.marks = value; 
                OnPropertyChanged(nameof(Marks));
                // Marks变化时，触发ChartData更新
                OnPropertyChanged(nameof(ChartData));
            }
        }

        // 新增图表数据属性，返回Microchart的Chart类型
        public Chart ChartData {
            get {
                // 这里以柱状图为例，生成Kicks和Marks的图表数据
                var entries = new[]
                {
                    new BarEntry(Kicks) { Label = "Kicks", ValueLabel = Kicks.ToString(), Color = SKColor.Parse("#0066FF") },
                    new BarEntry(Marks) { Label = "Marks", ValueLabel = Marks.ToString(), Color = SKColor.Parse("#2F4F4F") }
                };
                return new BarChart { Entries = entries, LabelTextSize = 24 };
                // 如果想用饼图，就换成PieChart：
                // return new PieChart { Entries = entries, LabelTextSize = 24 };
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;
        private void OnPropertyChanged(string propertyName) {
            this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

2. 修正KickClicked方法的逻辑 #

你现在的点击事件直接修改了Button的Text，但没有更新Person对象对应的属性，这样模型的PropertyChanged不会触发，图表也不会更新。我们要改成直接修改player的属性：

public async void KickClicked(object sender, EventArgs e) {
    var item = (Xamarin.Forms.Button)sender;
    var player = item.CommandParameter as Person;

    // 判断点击的是Kicks还是Marks按钮
    if (item.Text == player.Kicks.ToString())
    {
        player.Kicks += 1;
    }
    else if (item.Text == player.Marks.ToString())
    {
        player.Marks += 1;
    }

    // 保留动画效果
    await item.ScaleTo(0.75, 50, Easing.CubicOut);
    await item.ScaleTo(1, 90, Easing.CubicIn);

    // 保存更新到数据库
    await App.PersonRepo.UpdateAllAsync(player);
}

3. 确认XML中的绑定和命名空间 #

你的XML里已经写了<forms:ChartView HeightRequest="150" Grid.Row="2" Grid.Column="1" Chart="{Binding ChartData}" />，只要确保Microchart的命名空间引用正确就好，比如在XAML根节点添加：

xmlns:forms="clr-namespace:Microcharts.Forms;assembly=Microcharts.Forms"

为什么这样能工作？ #

• 当你点击按钮修改player.Kicks或player.Marks时，属性的setter会触发OnPropertyChanged，其中包括ChartData的通知
• ChartView绑定的ChartData收到通知后，会重新获取最新的图表数据，自动更新显示
• 因为你的PeopleList绑定的是ObservableCollection<Person>，只要集合内的对象实现了INotifyPropertyChanged，单个对象的属性变化就能被ListView检测到并更新对应Item的UI

这样调整后，每次点击按钮修改Kicks或Marks，对应的列表项里的Microchart就会自动刷新啦！

内容的提问来源于stack exchange，提问作者T.Nike