通过x:bind在UWP中将数据绑定到ListView

Question

通过x:bind在UWP中将数据绑定到ListView

c#listviewbindinguwpxbind

5

我正在使用我的程序中的hubsection，在<HubSection>中有一个ListView。但是我无法将数据绑定到ListView上。我尝试使用{binding}，但输出为空，当我使用x:bind时，我得到了一个错误：

未为DataTemplate定义DataType。包含x:Bind的模板需要使用“x:DataType”指定DataType。

请帮助我解决这个问题。这是我的代码：

.xaml

    <Hub Header="abc" FontWeight="Bold">
        <HubSection Header="header1" x:Name="hub1">
            <DataTemplate >
                <ListView x:Name="list1" ItemsSource="{x:Bind info}">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Vertical">
                                <StackPanel Orientation="Vertical">
                                    <StackPanel Orientation="Horizontal">
                                        <Image Source="{X:Bind image}"></Image>
                                        <TextBlock Text="{x:Bind name}"/>
                                    </StackPanel>
                                    <TextBlock Text="{x:Bind bio}"/>
                                </StackPanel>
                            </StackPanel>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </DataTemplate>
        </HubSection>
        <HubSection Header="header 2">
            <DataTemplate>          
            </DataTemplate>
        </HubSection>
    </Hub>
</Grid>

.cs

namespace app1
{
public class info
{
    public String name { get; set; }
    public String bio { get; set; }
    public String image { get; set; }
}

public sealed partial class abcde : Page
{

    ObservableCollection<info> obsinfo = new ObservableCollection<info>();
    public abcde()
    {
        this.InitializeComponent();
        filldata();
    }
    void filldata()
    {
        obsinfo.Add(new info { name = "data1", image = "images/data1.png", bio = "" });
        obsinfo.Add(new info { name = "data2", image = "images/data2.png", bio = "" });

    }
}
}

- Ravi

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Almir Vuk · Accepted Answer

基本上，您收到的错误是告诉您未定义要绑定到其中的数据类型。

因此，在DataTemplate中添加此属性以解决此问题：ListView.ItemTemplate -> DataTemplate

x:DataType="namespace:DATA_TYPE"

对于此示例，您的类info与MainPage位于同一命名空间中，因此在XAML中的命名空间我将设置为local，如下所示：

<DataTemplate x:DataType="local:info"

在这部分中，您犯了一个错误：

ItemsSource="{x:Bind info}"

在这里，您需要设置要绑定的列表或对象，而不是数据类型，并且类info显然是您的数据类型。

另一件事是，您不能只是告诉HubControl中的ItemsSource，您需要使用某种加载事件以编程方式设置它，然后在加载事件中可以设置ItemSource。

因此，在所有修复完成后，您的XAML应如下所示，这是经过测试和工作的代码，适用于XAML和.CS：

<Hub Header="abc" FontWeight="Bold">
        <HubSection Header="header1" x:Name="hub1">
            <DataTemplate>
                <!-- Instead of ItemSource in XAML we make event in which we will set ItemSource -->
                <ListView x:Name="list1" 
                          Loaded="Data_Loaded">
                    <ListView.ItemTemplate>
                        <DataTemplate x:DataType="local:info">
                            <StackPanel Orientation="Vertical">
                                <StackPanel Orientation="Vertical">
                                    <StackPanel Orientation="Horizontal">
                                        <Image Source="{X:Bind image}"></Image>
                                        <TextBlock Text="{x:Bind name}"/>
                                    </StackPanel>
                                    <TextBlock Text="{x:Bind bio}"/>
                                </StackPanel>
                            </StackPanel>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </DataTemplate>
        </HubSection>
        <HubSection Header="header 2">
            <DataTemplate>          
            </DataTemplate>
        </HubSection>
    </Hub>
</Grid>

你的 .cs 部分类：

您的 .cs 部分类：

namespace app1
{
public class info
{
    public String name { get; set; }
    public String bio { get; set; }
    public String image { get; set; }
}

public sealed partial class abcde : Page
{

    ObservableCollection<info> obsinfo = new ObservableCollection<info>();
    public abcde()
    {
        this.InitializeComponent();
        filldata();
    }
    void filldata()
    {
        obsinfo.Add(new info { name = "data1", image = "images/data1.png", bio = "" });
        obsinfo.Add(new info { name = "data2", image = "images/data2.png", bio = "" });

     }

     // Here we can set ItemsSource for our ListView
     private void Data_Loaded(object sender, RoutedEventArgs e) {
                var listView = (ListView)sender;
                listView.ItemsSource = obsinfo;
     }

  }
}

进行这些更改并运行它，在更改后它应该可以工作。

注意：在x:DataType属性中，请小心设置您的命名空间，以便您的类“info”能够正常工作。

更改后，如果您在XAML中看到蓝色线条，请清理并重新构建您的项目，并且我强烈建议您进行代码分离。

对于这种“显示数据”的情况，我的建议是使用Pivot控件，它更容易实现，并且您可以获得类似的结果。您可以在此处查看：here。