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

Posted 2023-02-23

【中文标题】UWP中通过x:bind将数据绑定到ListView

【英文标题】：Binding data into ListView through x:bind in UWP

【发布时间】：2016-11-26 00:17:07

【问题描述】：

我在我的程序中使用 hub 部分，在 <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 = "" );

    

【参考方案1】：

您得到的基本错误是告诉您没有定义要绑定到它的数据类型。

因此，为了在 DataTemplate 中解决此问题，请将此属性添加到您的：ListView.ItemTemplate -> DataTemplate

x:DataType="namespace:DATA_TYPE"

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

<DataTemplate x:DataType="local:info"

而且你在这部分也犯了错误：

ItemsSource="x:绑定信息"

这里你需要设置你想绑定的列表或对象，而不是数据类型，而类信息显然是你的数据类型。

另一件事是你不能只告诉 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 部分类：

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。

【讨论】：

thnku。一切正常后，我会让它看起来很正常

在我的最终编辑答案中，有完整的工作代码，正如我在答案中提到的，如果您不需要在应用程序中使用 Hub，您可以使用 Pivot 显示数据，使用 Hub 进行某种通过您的应用程序导航。我建议您在 MSDN 上查看有关 Hub 和 Pivot 的官方文档。

但是ItemsSource="x:Bind obsinfo" 不能代替使用Data_Loaded 事件吗？