将XAML控件绑定到列表

Question

我正在开发一个Windows应用商店。我做的是，我做了一个类，ContactBook，其中包含一些属性，字段和构造函数。然后我做了一个清单

List<ContactBook> 

我在那里添加了我的课程。我想将几个文本块和一个图像绑定到列表中，以便每个显示它们各自的值。我有，至今已创造了下面的代码：

的Class

public class ContactBook 
    { 
     #region _Fields 

     private string _Name; 
     private string _Surname; 
     private string _Number; 
     private string _ImagePath; 

     #endregion 

     #region Constructors 

     public ContactBook(string name, string surname, string number, string imagePath) 
     { 
      ImagePath = imagePath; 
      Name = name; 
      Surname = surname; 
      Number = number; 
     } 

     public ContactBook() 
     { 
      ImagePath = null; 
      Name = null; 
      Surname = null; 
      Number = null; 
     } 

     #endregion 

     #region Properties 

     public string Name 
     { 
      get 
      { 
       return _Name; 
      } 
      set 
      { 
       this._Name = value; 
      } 
     } 

     public string Surname 
     { 
      get 
      { 
       return _Surname; 
      } 
      set 
      { 
       this._Surname = value; 
      } 
     } 

     public string Number 
     { 
      get 
      { 
       return _Number; 
      } 
      set 
      { 
       this._Number = value; 
      } 
     } 

     public string ImagePath 
     { 
      get 
      { 
       return _ImagePath; 
      } 
      set 
      { 
       this._ImagePath = value; 
      } 
     } 

     #endregion 

    } 

的XAML

<Page 
x:Class="Summative_LU08.MainPage" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:local="using:Summative_LU08" 
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
xmlns:myNS="using:Summative_LU08" 
mc:Ignorable="d" Loaded="Page_Loaded"> 

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
     <TextBlock HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" Text="Contacts" VerticalAlignment="Top" FontFamily="Segoe UI" FontSize="72"/> 
     <TextBlock HorizontalAlignment="Left" Height="7" Margin="1452,740,-101,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Width="15"/> 
     <TextBlock x:Name="Name_Text" Text="Name: " FontSize="20" Margin="180,124,1112,620"/> 
     <TextBlock x:Name="theName" Text="{Binding }" FontSize="20" Margin="180,153,939,585"/> 
     <TextBlock x:Name="Surname" Text="Surname: " FontSize="20" Margin="180,208,1087,529"/> 
     <TextBlock x:Name="theSurname" Text="" FontSize="20" Margin="180,244,1079,496"/> 
     <TextBlock x:Name="thenumber" Text="" FontSize="20" Margin="10,308,1246,426"/> 
     <Image Width="160" HorizontalAlignment="Left" Margin="10,124,0,496"/> 

     <Image Width="160" HorizontalAlignment="Left" Margin="10,369,0,251"/> 
     <TextBlock x:Name="ContactNumber" Text="Contact Number:" Width="160" HorizontalAlignment="Left" FontSize="20" Height="31" FontStyle="Normal" FontFamily="Segoe UI" Margin="10,277,0,460"/> 
     <TextBlock x:Name="Name_2" Text="Name: " FontSize="20" Margin="182,369,1110,375"/> 
     <TextBlock x:Name="theName_2" Text="" FontSize="20" Margin="182,398,1127,337"/> 
     <TextBlock x:Name="Surname_2" Text="Surname: " FontSize="20" Margin="182,453,1085,284"/> 
     <TextBlock x:Name="theSurname_2" Text="" FontSize="20" Margin="182,489,1077,251"/> 
     <TextBlock x:Name="ContactNumber_2" Text="Contact Number:" Width="160" HorizontalAlignment="Left" FontSize="20" Height="31" FontStyle="Normal" FontFamily="Segoe UI" Margin="10,522,0,215"/> 
     <TextBlock x:Name="thenumber_Copy" Text="" FontSize="20" Margin="10,553,1246,181"/> 
    </Grid> 
</Page> 

代码隐藏

private void Page_Loaded(object sender, RoutedEventArgs e) 
     { 
      List<ContactBook> contactsBook = new List<ContactBook>(); 
      ContactBook contactBook_1 = new ContactBook(); 
      ContactBook contactBook_2 = new ContactBook(); 


      contactBook_1.Name = "Jaco"; 
      contactBook_1.Surname = "Badenhorst"; 
      contactBook_1.Number = "0728568956"; 
      contactBook_1.ImagePath = "Assets\\Contact"; 

      contactBook_2.Name = "Dean"; 
      contactBook_2.Surname = "Lukas"; 
      contactBook_2.Number = "0825653565"; 
      contactBook_2.ImagePath = "Assets\\Contact"; 

      contactsBook.Add(contactBook_1); 
      contactsBook.Add(contactBook_2); 

      theName.SetBinding(contactsBook, contactsBook[0]); 
     } 

我怎样才能的TextBlocks结合该列表以便theName文本块将显示名称等等。所有由“the”预先定义的文本块名称只是标签，另一个将保存实际值。

Answer 1

为了支持绑定，模型类应实现INotifyPropertyChanged - 这将触发数据更改的事件，以便控件知道它们需要重绘。

要开始在页面上进行绑定，首先需要查看页面的DataContext（最常见的做法） - 定义控件获取数据的位置。然后根据控件为属性定义使用{Binding}批注的属性。对于该绑定定义，您可以添加行为，如模式以使数据从模型流向控件或两种方式（控件中的更改随后存储在模型中）。

对于更改集合，最好使用ObservableCollection，因此集合中的更改也会触发集合控件（如ListVIew）中的更改。

这可能会有所帮助....

添加该类到您的解决方案：

/// <summary> 
/// Implementation of <see cref="INotifyPropertyChanged"/> to simplify models. 
/// </summary> 
public abstract class BindableBase : INotifyPropertyChanged 
{ 
    /// <summary> 
    /// Multicast event for property change notifications. 
    /// </summary> 
    public event PropertyChangedEventHandler PropertyChanged; 

    /// <summary> 
    /// Checks if a property already matches a desired value. Sets the property and 
    /// notifies listeners only when necessary. 
    /// </summary> 
    /// <typeparam name="T">Type of the property.</typeparam> 
    /// <param name="storage">Reference to a property with both getter and setter.</param> 
    /// <param name="value">Desired value for the property.</param> 
    /// <param name="propertyName">Name of the property used to notify listeners. This 
    /// value is optional and can be provided automatically when invoked from compilers that 
    /// support CallerMemberName.</param> 
    /// <returns>True if the value was changed, false if the existing value matched the 
    /// desired value.</returns> 
    protected bool SetProperty<T>(ref T storage, T value, [CallerMemberName] String propertyName = null) 
    { 
     if (Equals(storage, value)) return false; 

     storage = value; 
     OnPropertyChanged(propertyName); 
     return true; 
    } 

    /// <summary> 
    /// Notifies listeners that a property value has changed. 
    /// </summary> 
    /// <param name="propertyName">Name of the property used to notify listeners. This 
    /// value is optional and can be provided automatically when invoked from compilers 
    /// that support <see cref="CallerMemberNameAttribute"/>.</param> 
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null) 
    { 
     var eventHandler = PropertyChanged; 
     if (eventHandler != null) 
      eventHandler(this, new PropertyChangedEventArgs(propertyName)); 
    } 
} 

从这一类的ContactBook类继承：

public class ContactBook : BindableBase 

而非目前的使用此：

private string _name; 
public string Name 
{ 
    get { return _name; } 
    set { SetProperty(ref _name, value); } 
} 

你的页面的代码背后应该是这个样子（简单的解决方案）：

public sealed partial class MainPage : BasePage 
    { 
     public ObservableCollection<ContactBook> Books; 

     public MainPage() 
     { 
      this.InitializeComponent(); 
      // In Windows 8 apps you must set the DataContext. So uncomment the next line in that case 
      //DataContext = this; 
      Loaded += MainWindow_Loaded; 
     } 

     private async void MainWindow_Loaded(object sender, RoutedEventArgs e) 
     { 
      Books = new ObservableCollection<ContactBook>(); 
      // add code to read from a service, database, etce 
     } 
} 

在XAML你可以添加一个ListView显示所有的项目：

<ListView ItemsSource={Binding Books} /> 

要显示来自一个数据项目，你应该适当地设置上下文，例如在你的页面中有一个额外的属性，指示当前选择的ContactBook类型的CurrentBook。

要显示（和编辑）项目的名称，你可以使用：

<TextBox Text={Binding CurrentBook.Name, Mode=TwoWay} /> 

一个良好的学习项目，你可以调查MVVM - 这是一种方式来定义模型，视图和连接两个在一起。例如见：http://www.mvvmlight.net/。

希望这能让你开始。

Martin