【我們一起寫框架】MVVM的WPF框架（四）—DataGrid
前言
這個框架寫到這裡，應該有很多同學發現，框架很多地方的細節，其實是違背了MVVM的設計邏輯的。
沒錯，它的確是違背了。
但為什麼明知道違背設計邏輯，還要這樣編寫框架呢？
那是因為，我們編寫的是框架，是使用MVVM的概念編寫框架，而並不是要完美的實現MVVM設計。
兩者有什麼區別呢？區別就是前者是實戰，後者只是個理念。
在實戰架構中，並不是UI的東西都一定要放在UI層寫，邏輯的東西放在邏輯層寫的。因為，架構的目的是讓程式員更好的寫程式碼，而不是讓程式碼死死的固定在某一層。
所以，我們在編寫框架時，設計模式中該切割的東西，就不要猶豫的切割。因為，架構師是設計模式的使用者，而不是被使用者。
舉個例子，當你的邏輯全部提取到某一層中以後，你突然發現，該邏輯執行過程中要彈出提示框，但提示框又是屬於UI層的，此時你猶豫了，把提示框移動到邏輯層，不符合設計理念，但不在邏輯層做，開發又很難受。
遇到這樣的情況，我們該怎麼做呢？
很簡單，讓設計理念去死吧，不要猶豫，直接把彈出提示框封裝到邏輯層中即可。
現實中，設計邏輯永遠是要向開發邏輯低頭的，因為實戰永遠高於理論。
框架是什麼？
框架就是規則，規則在人類社會被稱之為法律；換言之，框架是程式碼界的法律。
人類社會建立法律之初，是抱著人人守法，秩序穩定的理想的。
可現實是殘酷的，總有人，因為各種原因，踐踏法律。
事實上，程式碼界也一樣，總是會那不守規矩的程式設計師觸犯法律，他們會讓程式碼跨邊界引用類庫或者拒絕使用介面宣告物件等等。
為什麼不能準守規則呢？
因為他們想更快速的完成任務，所以他們不惜觸犯法律，也要拼一次一夜暴富。。。
所以，架構師作為程式碼界的人民警察，一定要做好懲治工作。。。
因為，當一個壞程式碼出現後，馬上就會有若干個類似的壞程式碼出現，猶如劣幣逐良幣一樣，時間一長，框架就會被破壞。
接著好程式碼就得依賴著壞程式碼寫。
當壞程式碼多了到一定程度，好程式碼就會變成Bug了。。。
所以，任重道遠，人民警察還需警惕。。。
為什麼要編寫資料控制元件
我們之前編寫的資料控制元件功能相對單一；完全可以用屬性和事件代替，所以有些同學會覺得，資料控制元件好像沒什麼用。
其實不然，現實中我們要處理的邏輯，並不是簡單的物件屬性一對一繫結就能處理解決的。
我們需要做很多操作，其中也包括UI操作。而資料控制元件就是用來應對這種複雜的UI操作的。
因為資料控制元件通過繫結UI控制元件後，已經將複雜的UI操作，變成了簡單的資料邏輯操作了。
如果沒有資料控制元件，那當我們實現一個控制元件聯動時，就得在Xaml.cs檔案中處理了。
如果該控制元件聯動還要觸發資料變化，那我們就又得從Xaml.cs檔案中，穿越回ViewModel中處理邏輯了；亦或者，我們直接在Xaml.cs檔案中處理資料邏輯。
不論哪種模式，都會將我們好容易做的邏輯層與UI層混淆到一起。而這個問題，並不是一個彈出框那麼簡單的UI越界問題，因為它包含了更多複雜的業務邏輯。
資料控制元件解決這個煩惱。
我們通過資料控制元件，實現了控制元件是控制元件，資料是資料，清晰的，層次分離；並且通過簡潔的繫結，實現了資料變化與控制元件變化同步。
DataGrid資料控制元件
DataGrid資料控制元件可以說是資料控制元件的精髓了，因為DataGrid相對複雜，不像其他的資料控制元件那樣功能單一。
所以，當然我們學習了DataGrid資料控制元件後，就可以更好的理解，資料控制元件的意義了。
下面我們先看下DataGrid資料控制元件的程式碼：
public class DataGrid<T> : Control<T>
{
private Action<T> LoadAction = null;
public Action<T> SelectCallBack = null;
private Func<object, bool> DataFilter = null;
#region 分頁
private volatile int _CurrentPage = 1;
public int CurrentPage
{
get { return _CurrentPage; }
set
{
_CurrentPage = value;
if (_CurrentPage > PageCount)
{
_CurrentPage = PageCount;
}
if (_CurrentPage < 1)
{
_CurrentPage = 1;
}
OnPropertyChanged();
}
}
private int _PageCount = 1;
public int PageCount{ get {return _PageCount;}set {_PageCount = value;OnPropertyChanged();}}
private int _RecordCount = 0;
public int RecordCount
{
get { return _RecordCount; }
set
{
_RecordCount = value;
if (_RecordCount <= SkipNumber)
{
PageCount = 1;
}
else
{
PageCount = int.Parse(Math.Ceiling((double)RecordCount / (double)SkipNumber).ToString());
}
if (_CurrentPage > PageCount)
{
_CurrentPage = PageCount;
}
OnPropertyChanged();
}
}
private int _SkipNumber = 30;
public int SkipNumber { get { return _SkipNumber; } set { _SkipNumber = value; OnPropertyChanged(); } }
private TextBox<string> _JumpTextBox = new TextBox<string>();
public TextBox<string> JumpTextBox
{
get { return _JumpTextBox; }
set { _JumpTextBox = value; OnPropertyChanged(); }
}
#region 跳頁
public BaseCommand JumpCommand
{
get
{
return new BaseCommand(JumpCommand_Executed);
}
}
void JumpCommand_Executed(object send)
{
int pagenum = 0;
if (int.TryParse(JumpTextBox.Text, out pagenum))
{
if (pagenum <= PageCount && pagenum > 0)
{
CurrentPage = pagenum;
if (LoadAction != null)
{
LoadAction(Condition);
}
}
else
{
MessageBox.Show("請正確填寫跳轉頁數。", "提示資訊");
}
}
else
{
MessageBox.Show("請正確填寫跳轉頁數。", "提示資訊");
}
}
#endregion
#region 上一頁
public BaseCommand PreviousCommand
{
get
{
return new BaseCommand(PreviousCommand_Executed);
}
}
void PreviousCommand_Executed(object send)
{
if (CurrentPage > 1)
{
CurrentPage -= 1;
if (LoadAction != null)
{
LoadAction(Condition);
}
}
else
{
MessageBox.Show("已至首頁。", "提示資訊");
}
}
#endregion
#region 下一頁
public BaseCommand NextCommand
{
get
{
return new BaseCommand(NextCommand_Executed);
}
}
void NextCommand_Executed(object send)
{
if (CurrentPage < PageCount)
{
CurrentPage += 1;
if (LoadAction != null)
{
LoadAction(Condition);
}
}
else
{
MessageBox.Show("已至末頁。", "提示資訊");
}
}
#endregion
#endregion
private ObservableCollection<T> _ItemsSource = new ObservableCollection<T>();
public ObservableCollection<T> ItemsSource
{
get { return _ItemsSource; }
set
{
_ItemsSource = value;
if (_ItemsSource != null && _ItemsSource.Count > 0 && SelectedItem == null)
{
SelectedItem = _ItemsSource.First();
}
OnPropertyChanged();
}
}
public void SetItemsSource(List<T> itemSource)
{
ItemsSource = new ObservableCollection<T>(itemSource);
}
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();
}
}
private T _Condition = (T)Activator.CreateInstance(typeof(T));
public T Condition { get { return _Condition; } set { _Condition = value; OnPropertyChanged(); } }
#region 方法
public DataGrid()
{
}
public void BindSource(Action<T> loadAction, T conditionRow = default(T))
{
LoadAction = loadAction;
if (LoadAction != null)
{
CurrentPage = 1;
LoadAction(conditionRow);
}
}
public void BindSource(Action loadAction)
{
LoadAction = new Action<T>((obj) => {
loadAction();
}); ;
if (LoadAction != null)
{
CurrentPage = 1;
LoadAction(default(T));
}
}
public void ItemsSourceReBind()
{
BindSource(LoadAction);
}
public void SelectedItemReBind()
{
T newitem = (T)Activator.CreateInstance(typeof(T));
List<System.Reflection.PropertyInfo> plist = typeof(T).GetProperties().ToList();
foreach (var propertyInfo in plist)
{
propertyInfo.SetValue(newitem, propertyInfo.GetValue(SelectedItem));
}
SelectedItem = newitem;
}
public void SetFilter(Func<object, bool>dataFilter)
{
try
{
DataFilter = dataFilter;
_ItemsSourceView = CollectionViewSource.GetDefaultView(_ItemsSource);
_ItemsSourceView.Filter = new Predicate<object>(DataFilter);
}
catch(Exception ex)
{
}
}
public void Refresh()
{
if (_ItemsSourceView == null)
{
_ItemsSourceView = CollectionViewSource.GetDefaultView(this.ItemsSource);
}
_ItemsSourceView.Refresh();
}
#endregion
}
從程式碼中我們可以看到，DataGrid控制元件不僅包含了基礎屬性，還包含了上一頁，下一頁，重新整理，甚至過濾的功能。
下面，我們看下一下DataGrid控制元件的基礎應用。
Xaml頁面程式碼如下：
<DataGridMargin="5" FontSize="12" ItemsSource="{Binding TestDataGrid.ItemsSource}" AutoGenerateColumns="True"
SelectedItem="{Binding TestDataGrid.SelectedItem}" > </DataGrid>
ViewModel頁面程式碼如下：
public DataGrid<User> TestDataGrid { get; set; }
TestDataProxy proxy = new TestDataProxy();
public VM_PageDataGrid()
{
TestDataGrid = new DataGrid<User>();
int currentPage = TestDataGrid.CurrentPage;
int skipNumber = TestDataGrid.SkipNumber;
proxy.GeDataGridData(null, currentPage, skipNumber, (list, count, msg) =>
{
TestDataGrid.SetItemsSource(list);
TestDataGrid.RecordCount = count;
});
TestDataGrid.SelectCallBack = (user) =>
{
MessageBox(user.Name);
};
}
我們可以看到，基礎的DataGrid應用很簡單，只要設定好繫結，然後將讀取的資料賦值給資料控制元件的ItemSource屬性即可。（這裡我們使用SetItemSource方法為ItemSource賦值）
然後我們會發現，只要我們操作資料控制元件的ItemSource，不論是增加資料，刪除資料，變更資料，頁面都會自動的同步重新整理。
DataGrid的中級應用
我們在上面的程式碼中可以看到，DataGrid資料控制元件還包含了分頁功能。那麼如何實現分頁功能呢。
很簡單，我們只需要在Xaml頁面多繫結幾個屬性即可實現。
Xaml程式碼如下：
<StackPanel DataContext="{Binding TestDataGrid}" Orientation="Horizontal"DockPanel.Dock="Bottom" HorizontalAlignment="Right" Margin="0,10,0,0">
<ButtonContent="上一頁" Width="60" Command="{Binding PreviousCommand}" Height="20" Margin="20,0,0,0" VerticalAlignment="Top" />
<ButtonContent="下一頁" Width="60" Command="{Binding NextCommand}" Height="20" Margin="20,0,0,0" VerticalAlignment="Top" />
<TextBlock VerticalAlignment="Center" Text="每頁" Margin="20,0,0,0"></TextBlock>
<TextBlock VerticalAlignment="Center" Text="{BindingSkipNumber}"Margin="0,0,0,0"></TextBlock>
<TextBlock VerticalAlignment="Center" Text="條"></TextBlock>
<TextBlock VerticalAlignment="Center" Text="{Binding CurrentPage}"Margin="20,0,0,0"></TextBlock>
<TextBlock VerticalAlignment="Center" Text="/"></TextBlock>
<TextBlock VerticalAlignment="Center" Text="{Binding PageCount}"></TextBlock>
<TextBlock VerticalAlignment="Center" Text="總記錄數：" Margin="20,0,0,0"></TextBlock>
<TextBlock VerticalAlignment="Center" Text="{Binding RecordCount}"></TextBlock>
<TextBoxVerticalAlignment="Center" Width="40" Height="20" Margin="40,0,0,0" Text="{Binding JumpTextBox.Text}" ></TextBox>
<ButtonContent="GO"Command="{Binding JumpCommand}" Width="40" Height="20" Margin="5,0,0,0" VerticalAlignment="Top" />
</StackPanel>
<GroupBox DockPanel.Dock="Top" Header="DataGrid" Margin="10,0,0,0" >
<DataGridMargin="5" FontSize="12" ItemsSource="{Binding TestDataGrid.ItemsSource}" AutoGenerateColumns="True"
SelectedItem="{Binding TestDataGrid.SelectedItem}" >
</DataGrid>
</GroupBox>
這樣我們就實現了分頁功能，程式碼很簡單，並且徹底分割了UI和ViewModel。
但是那麼複雜的UI，就這樣簡單的被徹底搞定了嗎？
當然是不可能的！UI很複雜，僅僅靠資料控制元件是無法徹底搞定的。
那麼我們應該怎麼辦呢?
很簡單，我們去編寫UI控制元件就好啦。
當然，我們要編寫的UI控制元件不是普通的UI控制元件，而是配合資料控制元件應用的UI控制元件。
這種定製UI控制元件在功能上與其他自定義控制元件是一樣，但好處就在於，編寫方便，易於理解和二次開發。
----------------------------------------------------------------------------------------------------
本篇文章就先講到這了，下一篇文章我們將一起為框架編寫UI控制元件。
框架程式碼已經傳到Github上了，並且會持續更新。
相關文章：
ofollow,noindex" target="_blank">【我們一起寫框架】MVVM的WPF框架（一）—序篇
To be continued——DataGrid
Github地址：https://github.com/kiba518/KibaFramework
----------------------------------------------------------------------------------------------------
注：此文章為原創，歡迎轉載，請在文章頁面明顯位置給出此文連結！
若您覺得這篇文章還不錯，請點選下右下角的
【推薦】
，非常感謝！