【我們一起寫框架】MVVM的WPF框架（三）—資料控制元件
這世上，沒人能一次性寫出完美無缺的框架；因為，任何一個框架都需要專案的淬鍊，然後才能昇華，趨近完美。
所以，框架是個反覆修改的東西，最終形成的東西。
如果你學了一點技術，覺得自己可以寫出框架了，覺得自己有架構師的能力，然而自己總是懷才不遇——那一定是你的錯覺。
因為，你框架沒有經過專案淬鍊；而淬鍊過框架的人都瞭解，設計的再好的框架，最終會被業務需求打的細碎，然後被開發人員攪和再一起。
所以細節決定成敗，沒有細節的框架就是扯淡。
DataControl—資料控制元件
上文我們已經編寫出來了WPF的MVVM基礎框架，但為了讓他更加強壯，為了讓他多堅持一陣子再粉碎，我們要讓ViewModel更強壯，所以我們要編寫[資料控制元件]。
資料控制元件其實很好理解，它就是把UI控制元件中儲存的資料提取出來，好讓ViewModel可以通過修改資料來控制UI變化；當然，為了更好的控制UI變化，資料控制元件裡還得包含一點管理UI的屬性。
因為WPF裡的控制元件大多繼承自Control，所以我們先建立Control的資料控制元件。
public class Control<T> : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public T _DataContent ;
public T DataContent { get { return _DataContent; } set { _DataContent = value; OnPropertyChanged(); } }
public Visibility _Visibility;
public Visibility Visibility { get { return _Visibility; } set { _Visibility = value; OnPropertyChanged(); } }
public bool _IsReadOnly;
public bool IsReadOnly { get { return _IsReadOnly; } set { _IsReadOnly = value; OnPropertyChanged(); } }
public bool _IsEnabled;
public bool IsEnabled { get { return _IsEnabled; } set { _IsEnabled = value; OnPropertyChanged(); } }
protected void OnPropertyChanged([CallerMemberName]string propertyName = "")
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
如上程式碼所示，我們建立了Control的資料控制元件。
可以看到，處理存貯資料的DataContent屬性之外，還建立了一些管理UI的屬性IsEnabled、IsReadOnly、Visibility。
父類資料控制元件建立完成後，我們開始建立子類的資料控制元件。[如果子類要管理的UI屬性不在父類內，我們就需要額外建立一些]
TextBlock和TextBox
我們先建立最基礎的，最常用的TextBlock和TextBox。
TextBlock程式碼如下：
public class TextBlock<T> : Control<T>
{
public T _Text;
public T Text
{
get { return _Text; }
set
{
_Text = value;
OnPropertyChanged();
}
}
}
TextBox程式碼如下：
public class TextBox<T> : Control<T>
{
public Action<T> TextChangeCallBack = null;
public T _Text;
public T Text {
get { return _Text; }
set
{
_Text = value;
if (TextChangeCallBack != null)
{
TextChangeCallBack(_Text);
}
OnPropertyChanged();
}
}
}
可以看到TextBlock和TextBox都繼承了Control，而他們的區別只是TextBox多了一個TextChangeCallBack。
有人會想到，那完全可以用TextBox替代TextBlock。
理論上，TextBlock是可以被替換，但為了程式清晰，還是區別開來更好。
控制元件定義好了，我們現在看一下如何應用。
TextBox應用
xaml頁面程式碼
<TextBox Text="{Binding ChangeTextBox.Text,Mode=TwoWay}" Margin="5" FontSize="12"></TextBox>
----------------------------------ViewModel頁面程式碼
public TextBox<string> ChangeTextBox { get; set; }
public VM_PageTextBox()
{ ChangeTextBox = new TextBox<string>();
ChangeTextBox.TextChangeCallBack = (text) => { MessageBox(text); };//宣告TextChange
}
如程式碼所示，我們在ViewModel中定義了ChangeTextBox屬性，然後再Xaml中綁定了ChangeTextBox屬性的Text到UI控制元件TextBox的Text屬性上，這樣我們就實現了資料聯動。
並且程式碼中例項化了TextChangeCallBack委託，那麼當Text資料變化時，該委託就會觸發。
注意：TextChangeCallBack委託與TextChanged事件不同，並不是每次修改文字都會觸發，而是當TextBox的Text內容真正被修改時，才會觸發；我們可以簡單的理解為TextBox失去焦點時才會觸發。
這裡只介紹TextBox應用，TextBlock應用就不介紹了，因為使用方式和TextBox一樣。
如果想了解更多資料控制元件的應用，請去GitHub下載原始碼。
ComboBox
ComboBox稍微複雜一點，因為他多了一個ItemSource屬性。
我們先看ComboBox的資料控制元件程式碼：
public class ComboBox<T> : Control<T>
{
public Action<T> SelectCallBack = null;
public ComboBox()
{
}
public ObservableCollection<T> _ItemsSource;
public ObservableCollection<T> ItemsSource
{
get
{
return _ItemsSource;
}
set
{
_ItemsSource = value;
if (_ItemsSource != null && _ItemsSource.Count > 0 && SelectedItem == null)
{
SelectedItem = _ItemsSource.First();
}
OnPropertyChanged();
}
}
public T _SelectedItem;
public T SelectedItem
{
get { return _SelectedItem; }
set
{
_SelectedItem = value;
if (SelectCallBack != null)
{
SelectCallBack(_SelectedItem);
}
OnPropertyChanged();
}
}
private ICollectionView _ItemsSourceView;
public ICollectionView ItemsSourceView
{
get
{
_ItemsSourceView = CollectionViewSource.GetDefaultView(_ItemsSource);
return _ItemsSourceView;
}
set
{
_ItemsSourceView = value;
OnPropertyChanged();
}
}
public void SetItemsSource(List<T> itemSource)
{
ItemsSource = new ObservableCollection<T>(itemSource);
}
}
程式碼相對簡單，SelectedItem和ItemsSource用來繫結UI控制元件ComboBox的同名屬性。
ItemsSourceView：ItemsSourceView屬性可能有些難理解，這裡我們簡單介紹一下。
因為WPF的UI控制元件被建立以後，要被新增到視覺樹中，所以最終會被顯示在螢幕上的是包裹著控制元件的視覺樹；其中視覺樹與控制元件是可以分離的；比如控制元件中繫結的資料是10行，而視覺樹可以顯示3行。
為了管理視覺樹，我們建立了ItemsSourceView屬性。
因為ItemsSourceView是ICollectionView型別，所以ItemsSourceView可以處理排序、篩選和分組。[有興趣的同學可以自行了解下ICollectionView型別]
感覺這樣描述還是很難理解，讓我們一起在應用中慢慢理解吧。
ObservableCollection：我們可以看到ItemsSource是型別是ObservableCollection，而不是List。為什麼要用ObservableCollection呢？
很簡單，因為ObservableCollection繼承了INotifyCollectionChanged，即，資料控制元件進行[行]的增刪，也會讓UI進行[行]的增刪。
ComboBox應用
在應用之前，我們先在Proxy建立一個獲取資料是代理。
建立獲取資料的方法如下：
public List<User> GetComboBoxData()
{
List<User> userList = new List<User>();
User user1 = new User() { Id = 1, Name = "張三", Age = 11 };
userList.Add(user1);
return userList;}
Xaml頁面程式碼如下：
<ComboBox Margin="5" Width="200" FontSize="12" ItemsSource="{Binding TestComboBox.ItemsSource}" DisplayMemberPath="Name" SelectedValuePath="Id" SelectedItem="{Binding TestComboBox.SelectedItem}" ></ComboBox>
ViewModel程式碼如下：
public ComboBox<User> TestComboBox { get; set; }
TestDataProxy proxy = new TestDataProxy();
public VM_PageComboBox()
{
TestComboBox = new ComboBox<User>();
TestComboBox.SetItemsSource(proxy.GetComboBoxData());
TestComboBox.SelectCallBack = (user) => {
MessageBox(user.Name);
};
}
如上所示，我們已經實行了在ViewModel中管理ComboBox。
----------------------------------------------------------------------------------------------------
本篇文章就先講到這了，下一篇文章我們將一起為框架編寫DataGrid資料控制元件。
因為DataGrid資料控制元件是所有資料控制元件中最複雜的，而且程式碼量特別多；所以，我決定，單拿出一篇來介紹DataGrid。
框架程式碼已經傳到Github上了，並且會持續更新。
相關文章：
To be continued——DataGrid
----------------------------------------------------------------------------------------------------
注：此文章為原創，歡迎轉載，請在文章頁面明顯位置給出此文連結！若您覺得這篇文章還不錯，請點選下右下角的【推薦】，非常感謝！