C#开发Android移动应用系列之数据绑定
By
jerryxjr1220
at 2023-08-16 • 0人收藏 • 407人看过
接上一篇,继续分享通过Xamarin开发移动端应用
数据绑定
在Models中创建一个数据类
public class Person : INotifyPropertyChanged { private string name; private string age; public string Name { get { return name; } set { if (name != value) { name = value; OnPropertyChanged(nameof(Name)); } } } public string Age { get { return age; } set { if (age != value) { age = value; OnPropertyChanged(nameof(Age)); } } } public event PropertyChangedEventHandler PropertyChanged; protected virtual void OnPropertyChanged(string propertyName) { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); } }
数据模型类必须实现INotifyPropertyChanged接口,并在属性更改时触发PropertyChanged事件。这样当属性更改时,UI将得到通知并自动更新。
2. 在ViewModel中创建两个类:一个是集合类,一个是展示用的Cell类
using System; using System.Collections.Generic; using System.Text; using Xamarin.Forms; using XamarinApp1.Models; namespace XamarinApp1.ViewModels { public class ViewModel { public List<Person> People { get; set; } } public class PersonCell : ViewCell { public PersonCell() { var grid = new Grid(); grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) }); grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) }); var label1 = new Label() { HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center }; var label2 = new Label() { HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center }; label1.SetBinding(Label.TextProperty, "Name"); //绑定属性 label2.SetBinding(Label.TextProperty, "Age"); grid.Children.Add(label1); grid.Children.Add(label2, 1, 0); // 设置第二个Label的列索引为1,将其放置在第二列 View = grid; } } }
3. 在内容页Page1.xaml.cs的代码中,设置数据模型并将其作为BindingContext
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using Xamarin.Forms; using Xamarin.Forms.Xaml; using XamarinApp1.Models; using XamarinApp1.ViewModels; namespace XamarinApp1.Views { [XamlCompilation(XamlCompilationOptions.Compile)] public partial class Page1 : ContentPage { public List<Person> people = new List<Person>(); public Page1() { InitializeComponent(); Person person1 = new Person() { Name = "John Doe", Age = "18" }; Person person2 = new Person() { Name = "Jack Ma", Age = "52" }; Person person3 = new Person() { Name = "Elon Mask", Age = "58" }; Person person4 = new Person() { Name = "Tom Cruse", Age = "23" }; Person person5 = new Person() { Name = "Bluce Willis", Age = "68" }; people.Add(person1); people.Add(person2); people.Add(person3); people.Add(person4); people.Add(person5); BindingContext = new ViewModel { People = people }; } } }
4. 在内容页Page1.xaml中定义UI元素,并将其绑定到数据模型的属性
<?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:local="clr-namespace:XamarinApp1.ViewModels" x:Class="XamarinApp1.Views.Page1"> <ContentPage.Content> <StackLayout> <Label Text="People List" FontSize="24" HorizontalOptions="CenterAndExpand" /> <ListView ItemsSource="{Binding People}"> <ListView.ItemTemplate> <DataTemplate> <local:PersonCell /> </DataTemplate> </ListView.ItemTemplate> </ListView> </StackLayout> </ContentPage.Content> </ContentPage>
5 个回复 | 最后更新于 2023-08-17
2023-08-16
#2
数据绑定也可以用CollectionView展示,比如这样
Page2.xaml.cs
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using Xamarin.Forms; using Xamarin.Forms.Xaml; using XamarinApp1.Models; using XamarinApp1.ViewModels; namespace XamarinApp1.Views { [XamlCompilation(XamlCompilationOptions.Compile)] public partial class Page2 : ContentPage { public List<Person> people = new List<Person>(); public Page2 () { InitializeComponent (); Person person1 = new Person() { Name = "John Doe", Age = "18", Photo= "jackma.png" }; Person person2 = new Person() { Name = "Jack Ma", Age = "52", Photo = "jackma.png" }; Person person3 = new Person() { Name = "Elon Mask", Age = "58", Photo = "jackma.png" }; Person person4 = new Person() { Name = "Tom Cruse", Age = "23", Photo = "jackma.png" }; Person person5 = new Person() { Name = "Bluce Willis", Age = "68", Photo = "jackma.png" }; people.Add(person1); people.Add(person2); people.Add(person3); people.Add(person4); people.Add(person5); BindingContext = new ViewModel { People = people }; } } }
Page2.xaml
<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="XamarinApp1.Views.Page2"> <ContentPage.Content> <StackLayout> <Label Text="People List" FontSize="24" HorizontalOptions="CenterAndExpand" /> <CollectionView ItemsSource="{Binding People}"> <CollectionView.ItemTemplate> <DataTemplate> <Grid> <Grid.RowDefinitions> <RowDefinition Height="80"></RowDefinition> <RowDefinition Height="40"></RowDefinition> </Grid.RowDefinitions> <Image Source="{Binding Photo}" Grid.Row="0" HeightRequest="80" WidthRequest="80"/> <Label Text="{Binding Name}" Grid.Row="1" HorizontalOptions="Center"/> </Grid> </DataTemplate> </CollectionView.ItemTemplate> </CollectionView> </StackLayout> </ContentPage.Content> </ContentPage>
登录后方可回帖
在上述第3部分:在内容页Page1.xaml.cs的代码中,设置数据模型并将其作为BindingContext中,
我是将数据直接写死的,但更通常的情况应该是从数据库中查询并返回数据,但整个处理流程应该是一致的。