【我們一起寫框架】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

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

注:此文章為原創,任何形式的轉載都請聯系作者獲得授權並注明出處!
若您覺得這篇文章還不錯,請點擊下方的推薦】,非常感謝!

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM