UWP中通过x:bind绑定数据到ListView
Binding data into ListView through x:bind in UWP
我在我的程序中使用了 hubsection,在 <HubSection>
中有一个 ListView。但我无法将数据绑定到 ListView。我曾尝试使用 {binding}
但我在输出中变得空白,并且在使用 x:bind
时出现错误
No DataType defined for DataTemplate. Templates containing x:Bind need a DataType to be specified using 'x: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 = "" });
}
}
}
您得到的错误基本上是告诉您您没有定义要绑定到它的数据类型。
因此,为了在 DataTemplate 中解决此问题,请将此 属性 添加到您的:ListView.ItemTemplate -> DataTemplate
x:DataType="namespace:DATA_TYPE"
对于此示例,您的 class info 与 MainPage 在同一命名空间中,因此对于 XAML 中的命名空间,我将设置 local 对于命名空间,像这样:
<DataTemplate x:DataType="local:info"
而且你在这部分也犯了错误:
ItemsSource="{x:Bind info}"
这里你需要设置你想绑定的列表或对象,而不是数据类型,class 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 部分 class:
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 属性 中小心设置您的命名空间,您的 class info是为了正常工作。
更改后,如果您在 XAML 中看到蓝线,请清理并重建您的项目,我强烈建议您进行代码分离。
另外我给你的提示是对这种 "showing data" 使用 Pivot 控件,它更容易实现并且你会得到类似的结果。你可以看看here.
我在我的程序中使用了 hubsection,在 <HubSection>
中有一个 ListView。但我无法将数据绑定到 ListView。我曾尝试使用 {binding}
但我在输出中变得空白,并且在使用 x:bind
时出现错误
No DataType defined for DataTemplate. Templates containing x:Bind need a DataType to be specified using 'x: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 = "" });
}
}
}
您得到的错误基本上是告诉您您没有定义要绑定到它的数据类型。
因此,为了在 DataTemplate 中解决此问题,请将此 属性 添加到您的:ListView.ItemTemplate -> DataTemplate
x:DataType="namespace:DATA_TYPE"
对于此示例,您的 class info 与 MainPage 在同一命名空间中,因此对于 XAML 中的命名空间,我将设置 local 对于命名空间,像这样:
<DataTemplate x:DataType="local:info"
而且你在这部分也犯了错误:
ItemsSource="{x:Bind info}"
这里你需要设置你想绑定的列表或对象,而不是数据类型,class 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 部分 class:
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 属性 中小心设置您的命名空间,您的 class info是为了正常工作。
更改后,如果您在 XAML 中看到蓝线,请清理并重建您的项目,我强烈建议您进行代码分离。
另外我给你的提示是对这种 "showing data" 使用 Pivot 控件,它更容易实现并且你会得到类似的结果。你可以看看here.