将XAML控件绑定到列表
我正在开发一个Windows应用商店。我做的是,我做了一个类,ContactBook
,其中包含一些属性,字段和构造函数。然后我做了一个清单将XAML控件绑定到列表
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”预先定义的文本块名称只是标签,另一个将保存实际值。
为了支持绑定,模型类应实现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
太棒了!非常感谢!!我肯定会开始玩这个,非常感谢。 – naheiwProg