Xamarin.Forms：如何在ListView中添加标签？

Question

我还在学习中，请耐心等待。

我正在尝试在我的Xamarin.Form中显示一个ListView。到目前为止，这是我所拥有的，并且它工作得非常好：

<?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:maps="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps"
             xmlns:local="clr-namespace:GasStations"
             x:Class="GasStations.MainPage">
        <StackLayout>
            <ListView x:Name="ListView_Pets">
            </ListView>
        </StackLayout>
</ContentPage>

这是代码后端:

var obj = JsonConvert.DeserializeObject(coord);
List<String> storeList = new List<String>();
string store = string.Empty;
foreach (var item in ((JArray)obj))
{
    store = item.Value<string>("name");
    //desc = item.Value<string>("description"); /* This is the string I want to display */
    storeList.Add(store);
}
ListView_Pets.ItemsSource = storeList;

它能够正常工作并在“ListView”中显示商店名称。您可以在此处查看截图。现在，除了在“ListView”中仅显示商店“Name”之外，我还想显示描述（以及其他任何值）。我认为我需要在每一行中使用标签，类似于“asp.net GridView ItemTemplate”。我尝试了这样的操作，但它无法构建：

<?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:maps="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps"
             xmlns:local="clr-namespace:GasStations"
             x:Class="GasStations.MainPage">
    <StackLayout>
        <ListView x:Name="ListView_Pets" ItemsSource="{Binding MyClass}" >
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <ViewCell.View>
                            <Label x:Name="Label_Name" Text="Name" />
                            <Label x:Name="Label_Desc" Text="Description" />
                        </ViewCell.View>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

我可以在代码后端访问Name和Description（使用desc = item.Value<string>("description");），但我不知道如何将这些值绑定到表单中的标签。

- fdkgfosfskjdlsjdlkfsf

---

你没有充分利用MVVM模式的优势。根据答案中指定的方式，为新添加的标签指定所需的绑定。x:name打破了MVVM的模式，因此请尽量避免使用它。 - SergioAMG

这是为你完成的。 - Skin

“但是它无法构建” - 您遇到了什么构建错误？ - Jason

@Jason，他的xaml里有两个ViewCell，而我没有注意到。 - fdkgfosfskjdlsjdlkfsf

Answer 1

您需要指定绑定。如果您的类中有Name和Description属性，则可以这样做：

<Label x:Name="Label_Name" Text="{Binding Name}" />
<Label x:Name="Label_Desc" Text="{Binding Description}" />

注意：除非需要从代码后台直接访问它们，否则不需要使用x:Name。

<Label Text="{Binding Name}" />
<Label Text="{Binding Description}" />

已更新

感谢您的回答。但在代码后台，我需要做什么呢？ 我需要绑定到哪个对象？

当您在ItemTemplate中指定绑定时，您正在绑定到listview指定为ItemsSource的列表中类的各个属性。

- TheGeneral

---

谢谢你的回答。但是在代码后台，我需要做什么呢？我应该将它们绑定到哪个对象上？ - fdkgfosfskjdlsjdlkfsf

Answer 2

定义具有属性的类

public MyClass(){

public string Name{get;set;}
public string Description{get;set;}
}

在代码后面。

var obj = JsonConvert.DeserializeObject<List<MyClass>>(coord);
ListView_Pets.ItemsSource = obj;

然后在列表视图中更新

<?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:maps="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps"
             xmlns:local="clr-namespace:GasStations"
             x:Class="GasStations.MainPage">
    <StackLayout>
        <ListView x:Name="ListView_Pets" >
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <ViewCell>
                          <StackLayout Orientation="Vertical">
                            <Label Text="{Binding Name" />
                            <Label Text="{Binding Description}" />
                          </StackLayout>
                        </ViewCell>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

- Ankit tyagi

---

感谢您提供完整的示例，它确实对我有很大帮助。请修复 XAML 中的语法错误。 - fdkgfosfskjdlsjdlkfsf

Answer 3

在Ankit Tyagi的代码中，他们在xaml中编写了两个viewcell。删除其中一个。 这是将数据绑定到列表视图的完全创建过程。

首先定义你的模型。

public class MyClass
{
    public string Name { get; set; }
    public string Description { get; set; }
}

然后，在后端代码中定义数据源。我建议您使用ObservableCollection来收集您的数据。 ObservableCollection是一种通用的动态数据集合，当项目被添加、删除或整个集合被刷新时，它提供通知（使用接口“INotifyCollectionChanged”）。

         public ObservableCollection<MyClass> DataSource { get; set; }
    public MainPage()
    {
        this.BindingContext = this;

        DataSource = new ObservableCollection<MyClass>();

        DataSource.Add(new MyClass() { Name = "Item 1", Description = "Sub Item Text 1" });
        DataSource.Add(new MyClass() { Name = "Item 2", Description = "Sub Item Text 2" });
        DataSource.Add(new MyClass() { Name = "Item 3", Description = "Sub Item Text 3" });


        InitializeComponent();
    }

最后，在你的XAML中定义一个列表视图。不要忘记从后端代码绑定源数据。

    <StackLayout>
    <ListView x:Name="ListView_Pets" 
              ItemsSource="{Binding DataSource}" 
              HorizontalOptions="FillAndExpand"
              VerticalOptions="FillAndExpand"
              SeparatorColor="Silver">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>

                    <StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" >
                            <Label Text="{Binding Name}" />
                             <Label Text="{Binding Description}" />
                        </StackLayout>

                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackLayout>

运行这些代码。

- Leon

---

我刚注意到你手动添加到“datasource”，而安基特·泰基（Ankit Tyagi）的代码采用对象“coord”，并使用“var obj = JsonConvert.DeserializeObject<List<MyClass>>(coord);”自动复制到“MyClass”。 - fdkgfosfskjdlsjdlkfsf

这个可以用 ObservableCollection 来完成吗？还是需要循环遍历集合并使用 DataSource.Add 逐个添加到 DataSource 中？ - fdkgfosfskjdlsjdlkfsf

可以使用 ObservableCollection 来完成这个操作，你需要遍历集合并使用 DataSource.Add 逐个将其添加到 DataSource 中。 - Leon