將數據綁定到ListView中通過x：在UWP中綁定

Question

我在我的程序中使用hubsection，在<HubSection>中有一個ListView。但我無法將數據綁定到ListView。使用{binding}我試過，但我在輸出端獲得的空白，並使用x:bind當我收到錯誤是

沒有找到DataTemplate中定義的數據類型。包含x：Bind的模板需要使用'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 = "" }); 

    } 
} 
} 

Answer 1

，你得到的是告訴你，你是不是定義要綁定到它其中的數據類型基本錯誤。

因此，爲了在DataTemplate中解決這個在您添加該屬性：ListView.ItemTemplate - > DataTemplate中

X：數據類型= 「命名空間：DATA_TYPE」

在這個例子中類信息在同一個命名空間如此的MainPage在XAML命名空間，我將設置本地命名空間的，像這樣：

<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：數據類型屬性小心設置你的命名空間中，你的類信息是爲了正常工作。

如果在XAML中出現藍色線條後發生變化，請清理並重新構建您的項目，我的強烈建議是執行代碼分離。

而且我的提示是針對這種「顯示數據」使用Pivot控件，它實現起來更容易，並且您會得到相似的結果。你可以看看here。