WPF MVVM模式一直沒怎么用過,.net5正式版就要出來了,趁這個時間看看各個微軟的前后端.netCore的功能,使用.netCore下WPF實現一個簡單的從數據庫讀取數據顯示功能,
示例主要用到了按鈕,編輯框,樹控件,列表控件, 代碼東拼西湊的,只貼幾個片段。
1、XAML
<Page x:Class="NEasyCode.PageDataBase" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:NEasyCode" mc:Ignorable="d" d:DesignHeight="450" d:DesignWidth="800" Title="PageDataBase" > <Page.DataContext> <local:DataBaseViewModel /> </Page.DataContext> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="300" /> <ColumnDefinition Width="5" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <DockPanel > <Grid DockPanel.Dock="Top"> <Grid.ColumnDefinitions> <ColumnDefinition Width="100" /> <ColumnDefinition Width="*" /> <ColumnDefinition Width="50" /> </Grid.ColumnDefinitions> <Label Name="LabelFilter" Grid.Column="0">表名過濾:</Label> <TextBox Margin="0,0,0,0" Grid.Column="1" Name="TextFilter" Text="{Binding Path=SearchText, Mode=TwoWay}"/> <Button Name="ButtonRefresh" Content="刷新" Grid.Column="2" Width="40" DockPanel.Dock="Right" Command="{Binding Path=QueryCommand}"></Button> </Grid> <TreeView Margin="0,0,0,0" Name="TreeDataBase" ScrollViewer.VerticalScrollBarVisibility="Auto" ItemsSource="{Binding TreeViewItems}"> </TreeView> </DockPanel> <GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Left" /> <DockPanel Grid.Column="2" > <DataGrid Name="TableProp" ItemsSource="{Binding Path=TableInfoList}"> <DataGrid.Columns> <DataGridTextColumn Header="編號" Width="90" Binding="{Binding ColumnId}"/> <DataGridTextColumn Header="列名" Width="90" Binding="{Binding ColumnName}"/> <DataGridTextColumn Header="主鍵" Width="90" Binding="{Binding ColumnIsPrimaryKey}"/> <DataGridTextColumn Header="標識列" Width="90" Binding="{Binding ColumnIsIdentity}"/> <DataGridTextColumn Header="列類型" Width="90" Binding="{Binding ColumnType}"/> <DataGridTextColumn Header="長度" Width="90" Binding="{Binding ColumnLength}"/> <DataGridTextColumn Header="精度" Width="90" Binding="{Binding ColumnPrecision}"/> <DataGridTextColumn Header="小數點" Width="90" Binding="{Binding ColumnScale}"/> <DataGridTextColumn Header="允許空" Width="90" Binding="{Binding ColumnIsNullAble}"/> <DataGridTextColumn Header="默認值" Width="90" Binding="{Binding ColumnDefaultValue}"/> <DataGridTextColumn Header="列描述" Width="90" Binding="{Binding ColumnDesc}"/> <DataGridTextColumn Header="索引" Width="90" Binding="{Binding ColumnIndexName}"/> <DataGridTextColumn Header="排序" Width="90" Binding="{Binding ColumnIndexSort}"/> </DataGrid.Columns> </DataGrid > <DataGrid Name="TableData" ItemsSource="{Binding}"> <DataGrid.Columns> </DataGrid.Columns> </DataGrid> </DockPanel> </Grid> </Page>
2、DataBaseModel.cs
using NEasyCode.Entity; using NEasyCode.Util; using System; using System.Collections.Generic; using System.Collections.ObjectModel; using System.ComponentModel; using System.Text; using System.Windows.Controls; using System.Windows.Input; namespace NEasyCode { public class DataBaseViewModel : INotifyPropertyChanged { #region Fields private string _searchText; private ObservableCollection<TableInfo> _resultList; #endregion #region Properties private ObservableCollection<TableInfo> tableInfoList; public ObservableCollection<TableInfo> TableInfoList { get { return tableInfoList; } set { tableInfoList = value; RaisePropertyChanged("TableInfoList"); } } public ObservableCollection<string> TableList { get; set; } = new ObservableCollection<string>(); public ObservableCollection<TreeViewItem> TreeViewItems { get; set; } = new ObservableCollection<TreeViewItem>(); // 查詢關鍵字 public string SearchText { get { return _searchText; } set { _searchText = value; RaisePropertyChanged("SearchText"); } } public ICommand QueryCommand { get { return new QueryCommand(SearchTable, CanSearching); } } #endregion #region Construction public DataBaseViewModel() { SearchTable(); ViewTableInfo("dghr_userinfo"); } #endregion #region Command Handler /// <summary> /// 查看表信息 /// </summary> /// <param name="tableName"></param> public void ViewTableInfo(string tableName) { //TableInfoList.Clear(); TableInfoList = DbUtil.GetTableProp(tableName).ToObservableCollection(); //_resultList = TableInfoList; } /// <summary> /// 查找表 /// </summary> public void SearchTable() { TableList.Clear(); var tableList= DbUtil.GetAllDataBase().ToObservableCollection(); if (string.IsNullOrWhiteSpace(SearchText)) { TableList = tableList; } else { foreach (string p in tableList) { if (p.Contains(SearchText)) { TableList.Add(p); } } } TreeViewItems.Clear(); for (int i = 0; i < TableList.Count; i++) { TreeViewItem item = new TreeViewItem(); item.Header = TableList[i]; item.Selected += Item_Selected; item.MouseDoubleClick += Item_MouseDoubleClick; TreeViewItems.Add(item); } } private void Item_Selected(object sender, System.Windows.RoutedEventArgs e) { var v= ((TreeViewItem)(e.Source)).Header.ToString(); ViewTableInfo(v); } private void Item_MouseDoubleClick(object sender, MouseButtonEventArgs e) { //ViewTableInfo(e.ToString) } public bool CanSearching() { return true; } #endregion #region INotifyPropertyChanged Members public event PropertyChangedEventHandler PropertyChanged; #endregion #region Methods private void RaisePropertyChanged(string propertyName) { // take a copy to prevent thread issues PropertyChangedEventHandler handler = PropertyChanged; if (handler != null) { handler(this, new PropertyChangedEventArgs(propertyName)); } } #endregion } }
3、Command
using System; using System.Collections.Generic; using System.Text; using System.Windows.Input; namespace NEasyCode { class QueryCommand : ICommand { #region Fields private Action _execute; private Func<bool> _canExecute; #endregion public QueryCommand(Action execute) : this(execute, null) { } public QueryCommand(Action execute, Func<bool> canExecute) { if (execute == null) throw new ArgumentNullException("execute"); _execute = execute; _canExecute = canExecute; } #region ICommand Member public event EventHandler CanExecuteChanged { add { if (_canExecute != null) { CommandManager.RequerySuggested += value; } } remove { if (_canExecute != null) { CommandManager.RequerySuggested -= value; } } } public bool CanExecute(object parameter) { return _canExecute == null ? true : _canExecute(); } public void Execute(object parameter) { _execute(); } #endregion } }
4、TableInfo實體
using System; using System.Collections.Generic; using System.Text; namespace NEasyCode.Entity { public class TableInfo { public string TableName { get; set; } public string TableDesc { get; set; } public int ColumnId { get; set; } public string ColumnName { get; set; } public bool ColumnIsPrimaryKey { get; set; } public bool ColumnIsIdentity { get; set; } public string ColumnType { get; set; } public int ColumnLength { get; set; } public int ColumnPrecision { get; set; } public int ColumnScale { get; set; } public bool ColumnIsNullAble { get; set; } public string ColumnDefaultValue { get; set; } public string ColumnDesc { get; set; } public string ColumnIndexName { get; set; } public string ColumnIndexSort { get; set; } public DateTime ColumnCreateDate { get; set; } public DateTime ColumnModifyDate { get; set; } } }
5、運行效果
6、有幾點問題,研究的不深,可能因為使用的不算完全純正的mvvm的原因,有幾點疑惑。
6.1 樹控件數據源不需要調用RaisePropertyChanged,但是DataGrid需要,沒有搞明白為什么這樣。
6.2 樹控件的綁定事件按網上的無法使用,.netCore下無法引入NuGet下的System.Windows.Interactivity,其它引入方式未試驗,直接使用事件綁定的方式了。
通過Command綁定事件 在項目中引用 System.Windows.Interactivity.WPF(簡單來說該插件可以將頁面控件的Event轉為ViewModel中的Command) 在窗體中添加引用 xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" 綁定Command到SelectedItemChanged事件 <TreeView x:Name="treeView" ItemsSource="{Binding TypeList}"> <i:Interaction.Triggers> <i:EventTrigger EventName="SelectedItemChanged"> <i:InvokeCommandAction Command="{Binding SelectItemChangeCommand}" CommandParameter="{Binding ElementName=treeView,Path=SelectedItem}"/> </i:EventTrigger> </i:Interaction.Triggers> </TreeView>
后續測試:在.net5 預覽版下是可以的,.netCore下不行,
7、在xp下無法運行,傳家項目沒有必須升級的需求還是用.net4.0吧。