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

时间:2016-07-22 07:27:39

标签: c# listview binding uwp xbind

我在我的程序中使用hubsection,在<HubSection>中有一个ListView。但我无法将数据绑定到ListView。我曾尝试使用{binding},但输出结果为空白,使用x:bind时出现错误

  

没有为DataTemplate定义DataType。包含x:Bind的模板需要使用&#39; x:DataType&#39;来指定数据类型。

帮我解决这个问题。这是我的代码:

的.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 个答案:

答案 0 :(得分:4)

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

因此,为了在DataTemplate中解决此问题,请在您的:ListView.ItemTemplate - &gt;中添加此属性。的DataTemplate

  

X:数据类型= “命名空间:DATA_TYPE”

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

<DataTemplate x:DataType="local:info"

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

  

ItemsSource =“{x:Bind 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分部课程:

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