微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

xamarin 中用于行数可变的项目的 UI

如何解决xamarin 中用于行数可变的项目的 UI

假设我有以下类:

class Person
{
    public string Name { get; set; }
    public IList<Expense> Expenses { get; set; }
    public int Total => Expenses.Sum(o => o.Amount);
}

class Expense
{
    public string ExpenseName { get; set; }
    public int Amount { get; set; }
}

然后我有一组人:IList<Person> Persons

如何在 Xamarin 中设计 XAML 页面显示类似内容?:

UI sample

解决方法

可以使用Label来显示费用的可变数量,在item最后加上“\n”来换行。

运行截图如下图

enter image description here

首先,这是我的布局。

<StackLayout>
        <ListView x:Name="EmployeeView" HasUnevenRows="True"
            ItemsSource="{Binding Persons}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout>
                            <Label FontSize="Large" Text="{Binding Name}"></Label>
                            <Label FontSize="Body" Text="{Binding ExpensesList}"></Label>
                            <Label FontSize="Body" Text="{Binding Total}"></Label>
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>

这是布局的背景代码。

 public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();

            this.BindingContext =new MyViewModel();
        }
    }

这是我的视图模型。我向 viewModel 添加了一些测试数据,并在每个费用的文本末尾添加了“\n”。

using System.Collections.Generic;
using System.Collections.ObjectModel;

namespace App83
{
    internal class MyViewModel
    {
        public  ObservableCollection<Person> Persons { get; set; }
        public MyViewModel()
        {
            Persons = new ObservableCollection<Person>();

            ObservableCollection<Expense> expenses= new ObservableCollection<Expense>();
            expenses.Add(new Expense() { Amount=1,ExpenseName="name1" });
            expenses.Add(new Expense() { Amount = 1,ExpenseName = "name2" });
            expenses.Add(new Expense() { Amount = 1,ExpenseName = "name3" });
            expenses.Add(new Expense() { Amount = 1,ExpenseName = "name4" });


            ObservableCollection<Expense> expenses2 = new ObservableCollection<Expense>();
            expenses2.Add(new Expense() { Amount = 1,ExpenseName = "name1" });

            ObservableCollection<Expense> expenses3 = new ObservableCollection<Expense>();


            string expensesList1="";
            for (int i = 0; i < expenses.Count; i++)
            {
                if(i== (expenses.Count - 1))
                {

                    expensesList1 += expenses[i].ToString();
                }
                else
                {
                    expensesList1 += expenses[i].ToString() + "\n";
                }
               
                
            }


            string expensesList2 = "";
            for (int i = 0; i < expenses2.Count; i++)
            {
                if (i == (expenses2.Count - 1))
                {

                    expensesList2 += expenses2[i].ToString();
                }
                else
                {
                    expensesList2 += expenses2[i].ToString() + "\n";
                }


            }
            string expensesList3 = "";
            for (int i = 0; i < expenses3.Count; i++)
            {
                if (i == (expenses3.Count - 1))
                {

                    expensesList3 += expenses3[i].ToString();
                }
                else
                {
                    expensesList3 += expenses3[i].ToString() + "\n";
                }


            }


            
            Person per =new Person( ) { Name="test1",Expenses= expenses,expensesList= expensesList1 };

            Person per2 = new Person() { Name = "test2",Expenses = expenses2,expensesList= expensesList2 };

            Person per3 = new Person() { Name = "test3",Expenses = expenses3,expensesList = expensesList3 };

            Persons.Add(per);
            Persons.Add(per2);
            Persons.Add(per3);
        }
    }
}

这是我编辑过的模型。添加ExpensesList属性以显示可变数量的费用,将ExpenseNameAmount保持在同一行,我覆盖了ToString方法。

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Text;

namespace App83
{
   public class Person: INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        protected virtual void OnPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this,new PropertyChangedEventArgs(propertyName));
        }
        public Person() {

          

        }
        public string Name { get; set; }

        public string expensesList;
      
        public string ExpensesList
        {
            set
            {
                if (expensesList != value)
                {
                    expensesList = value;
                    OnPropertyChanged("Image");

                }
            }
            get
            {
                return expensesList;
            }
        }

        public IList<Expense> Expenses { get; set; }
        public int Total => Expenses.Sum(o => o.Amount);
    }

    public class Expense
    {
        public string ExpenseName { get; set; }
        public int Amount { get; set; }

        public override string ToString()
        {

            return ExpenseName+"  "+Amount;
        }
    }
}

,

在您的 DataTemplate 中,您可以添加另一个支持 ItemSource 属性的视图。

所以它可以是另一个 ListView、CollectionView 或 StackLayout。如果您知道自己不会花费太多项目,则后者非常有用,否则可能会导致严重的应用性能问题。

所以在你的 DataTemplate 里面添加

<CollectionView ItemSource={Binding Expenses}>
   <DataTemplate>
     //your UI goes here
.
.
.

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。