1, 建立WPF程序,並在程序中添加三個文件View,ViewMoudle,Moudle,
2,Moudle文件加中添加類,此文件夾中存放的類基本為數據類,主要是字段和屬性
3 ViewMoudle文件加中添加類,首先添加一個基類作為ViewMoudle中所有類的父類,
這個類繼承INotifyPropertyChanged,只用簡單實現此接口的事件
代碼如下
public class ViewMoudleBase : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged(string propertyname)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyname));
}
}
}
之后,是集成Moudle中的結構類,並在此寫邏輯代碼,此處只簡介綁定的用法
列如Moudle中有個Person類
public class Person
{
private string name;
public string Name
{
get { return name; }
set { name = value; }
}
private int age;
public int Age
{
get { return age; }
set { age = value; }
}
}
我們可以在ViewMoudle中添加一個PageViewModel
public class PageViewModel:ViewMoudleBase
{
private ObservableCollection<Person> human = null;
public ObservableCollection<Person> Human
{
get
{
return human;
}
set
{
human = value;
當用list等其他集合是寫下面的紅色加粗部門,
if (human!=value)
{
human = value;
OnPropertyChanged("Human");
}
}
}
public PageViewModel()
{
human = new ObservableCollection<Person>();
Human.Add( new Person{Name = "Tom",Age = 21 });
Human.Add(new Person { Name = "Jack", Age = 22 });
Human.Add( new Person{Name = "Rose",Age = 23 });
}
}
(注意加粗的地方,如果改為一般的集合例如List類,就不能實現動態的在UI界面添加數 據了,原因是ObservableCollection繼承了INotifyPropertyChanged)
4 View中添加窗口,在Xaml頁面中通過Bing綁定相應的類以及字段
例如
<DataGrid AutoGenerateColumns="False" Height="200" ItemsSource="{Binding Human}" HorizontalAlignment="Left" Margin="34,20,0,0" Name="dataGrid1" VerticalAlignment="Top" Width="516" Grid.RowSpan="2">
<DataGrid.Columns>
<DataGridTemplateColumn>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Height="23" HorizontalAlignment="Left" Name="textBlock1" Text="{Binding Name}" VerticalAlignment="Top" />
<TextBlock Height="23" HorizontalAlignment="Left" Name="textBlock2" Text="{Binding Age}" VerticalAlignment="Top" />
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
在CS頁面實現,通過 DataContext 實現View與ViewMoudle的綁定,
代碼如下
public partial class PageView : Window
{
public PageViewModel vm ;
public PageView()
{
InitializeComponent();
vm=new PageViewModel();
vm.Human.Add(new Person { Name = "閃靈", Age = 1 });
DataContext = vm;
}
private void Button_Click(object sender, RoutedEventArgs e)
{
Dispatcher.BeginInvoke(new Action(() =>
{
vm.Human.Add(new Person { Name = "閃靈45", Age = 1 });
}));
}
}