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 中显示商店名称。你可以看到screenshot here。

现在，除了在ListView 中显示商店Name，我还想显示描述（和任何其他值）。我假设每行都需要Labels，类似于asp.netGridViewItemTemplate。

我尝试了类似的方法，但没有成功：

<?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");，但我不知道如何将这些值绑定到表单中的标签。

Answer 1

你需要指定 Binding.. 有趣的是你的类中的属性是 Name 和 Description 然后你会这样做

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

注意：你不需要使用 x:Name 除非你需要直接从 Code-Behind 访问它们

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

更新

感谢您的回答。但是我需要在代码隐藏中做什么？ 我会将它们绑定到什么对象？

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

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>

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>

运行这些代码。