C#开发Android移动应用系列之数据绑定

By jerryxjr1220 at 2023-08-16 • 0人收藏 • 362人看过

上一篇,继续分享通过Xamarin开发移动端应用


  • 数据绑定

  1. 在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>

无标题.png

5 个回复 | 最后更新于 2023-08-17
2023-08-16   #1

在上述第3部分:在内容页Page1.xaml.cs的代码中,设置数据模型并将其作为BindingContext中,

我是将数据直接写死的,但更通常的情况应该是从数据库中查询并返回数据,但整个处理流程应该是一致的。

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>

无标题.png

2023-08-17   #3

再接再厉 ..

2023-08-17   #4

打包之后有多大

2023-08-17   #5

回复#4 @aubreychao :

打包以后是生成的android安装包,大约10几M,还可以。

登录后方可回帖

登 录
信息栏
 私人小站

本站域名

ChengXu.XYZ

投诉联系:  popdes@126.com



快速上位机开发学习,本站主要记录了学习过程中遇到的问题和解决办法及上位机代码分享

这里主要专注于学习交流和经验分享.
纯私人站,当笔记本用的,学到哪写到哪.
如果侵权,联系 Popdes@126.com

友情链接
Aardio官方
Aardio资源网


才仁机械


网站地图SiteMap

Loading...