【咱們一塊兒寫框架】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上了，而且會持續更新。

相關文章：

【咱們一塊兒寫框架】MVVM的WPF框架（一）—序篇

【咱們一塊兒寫框架】MVVM的WPF框架（二）—綁定

To be continued——DataGrid

Github地址：https://github.com/kiba518/KibaFramework

----------------------------------------------------------------------------------------------------

注：此文章爲原創，任何形式的轉載都請聯繫做者得到受權並註明出處！
若您以爲這篇文章還不錯，請點擊下方的【推薦】，很是感謝！