如何在 ListView 中为 Xamarin Forms 绑定一个简单的标签？答案

【问题标题】：How to bind a simple Label inside ListView for Xamarin Forms?如何在 ListView 中为 Xamarin Forms 绑定一个简单的标签？
【发布时间】：2020-10-07 14:35:42
【问题描述】：

一个非常简单的绑定如何用于 ListView 中的 Label？

我似乎在这上面花了几个小时，但还是搞不清楚。

标签的数据绑定有什么问题？

因为显示了三行，这意味着来自View Model 的 Observable 集合已被绑定。

我是否过度使用 x:DataType 是否真的需要简单的网格绑定？

XAML 文件

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="Poc.ListViewGrouping.Views.LvDemo"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:Poc.ListViewGrouping.ViewModels"
    xmlns:model="clr-namespace:Poc.ListViewGrouping.Models">
    <ContentPage.Content>
        <StackLayout>
            <Label
                HorizontalOptions="CenterAndExpand"
                Text="Welcome to Abhijeet's Page Of List View!"
                VerticalOptions="CenterAndExpand" />
        </StackLayout>
    </ContentPage.Content>
    <ContentPage.ToolbarItems>
        <ToolbarItem Command="{Binding AddItemCommand}" Text="Add Milestone" />
    </ContentPage.ToolbarItems>
    <RefreshView x:DataType="local:Lv1Vm">
        <StackLayout BackgroundColor="Orange">
            <ListView
                x:Name="lv1"
                BackgroundColor="Green"
                ItemsSource="{Binding DS}">
                <ListView.ItemTemplate>
                    <DataTemplate x:DataType="local:Lv1Vm">
                        <ViewCell>
                            <Frame BackgroundColor="Navy">
                                <StackLayout
                                    Padding="10"
                                    x:DataType="model:LvModel"
                                    BackgroundColor="Yellow"
                                    HeightRequest="30">
                                    <!--  Does not bind at all  -->
                                    <Label BackgroundColor="Red"
                                           Text="{Binding Name}" />
                                </StackLayout>
                            </Frame>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
    </RefreshView>
</ContentPage>

文件背后的代码

using Poc.ListViewGrouping.ViewModels;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;
using Xamarin.Forms.Markup;
using Xamarin.Forms.Xaml;
namespace Poc.ListViewGrouping.Views
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class LvDemo : ContentPage
    {
        public Lv1Vm _viewModel;

        public LvDemo()
        {
            BindingContext = _viewModel = new Lv1Vm();

            InitializeComponent();
        }
    }
}

查看模型

using Poc.ListViewGrouping.Models;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Text;

namespace Poc.ListViewGrouping.ViewModels
{
    public class Lv1Vm : BaseViewModel
    {
        public ObservableCollection<LvModel> DS => new ObservableCollection<LvModel>()
        {
            new LvModel{Id = 1, Name = "Hello" },
            new LvModel{Id = 2, Name="Hi"},
            new LvModel{Id = 3, Name="Good Going"},
        };

        public Lv1Vm()
        {
            Title = "Lv1";
        }
    }
}

型号

public class LvModel
{
    public string Name { get; set; }
    public int Id { get; set; }

}

【问题讨论】：

是NameLvModel上的公共财产？
@Jason yes 在上面添加了模型。
DS 不是公共财产。将其更改为public ObservableCollection<LvModel> DS { get => ew ObservableCollection<LvModel>() { new LvModel{Id = 1, Name = "Hello" }, new LvModel{Id = 2, Name="Hi"}, new LvModel{Id = 3, Name="Good Going"},};
@GeraldVersluis，谢谢，但 DS 确实已经是公共财产，我使用了表达式正文语法。

标签： c# xaml xamarin.forms xamarin-forms-4

【解决方案1】：

事实上，你的绑定是正确的，它没有显示的原因是因为 ListView 中的所有行默认具有相同的高度。它不再计算你的子项的高度。

你可以尝试设置HasUnevenRows="True"

<ListView
            HasUnevenRows="True"
            x:Name="lv1"
            BackgroundColor="Green"
            ItemsSource="{Binding DS}">
       <ListView.ItemTemplate>
              <DataTemplate x:DataType="local:Lv1Vm">
                  <ViewCell>
                      <Frame BackgroundColor="Navy">
                          <StackLayout
                                Padding="10"
                                x:DataType="model:LvModel"
                                BackgroundColor="Yellow"
                                HeightRequest="30">
                                <!--  Does not bind at all  -->
                              <Label BackgroundColor="Red"
                                       Text="{Binding Name}" />
                          </StackLayout>
                      </Frame>
                  </ViewCell>
            </DataTemplate>
      </ListView.ItemTemplate>
</ListView>

或设置RowHeight

<ListView
            HasUnevenRows="False"
            RowHeight="80"
            x:Name="lv1"
            BackgroundColor="Green"
            ItemsSource="{Binding DS}">
            <ListView.ItemTemplate>
                <DataTemplate x:DataType="local:Lv1Vm">
                    <ViewCell>
                        <Frame BackgroundColor="Navy">
                            <StackLayout
                                Padding="10"
                                x:DataType="model:LvModel"
                                BackgroundColor="Yellow"
                                HeightRequest="30">
                                <!--  Does not bind at all  -->
                                <Label BackgroundColor="Red"
                                       Text="{Binding Name}" />
                            </StackLayout>
                        </Frame>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
</ListView>

【讨论】：

【解决方案2】：

我从来没有遇到过StackLayout 的问题，但我遇到了BoxView。容器上的HeightRequest 看起来太小了。根据this answer，Android 是 64 个单位到厘米，这将使该容器大约半厘米。尝试更改 HeightRequest 的值。

【讨论】：