WPF項目學習.一

時間 2019-11-09

標籤 wpf 項目學習简体版

原文原文鏈接

WPF項目搭建

1、前言

　　記錄在學習與製做WPF過程當中遇到的解決方案。數據庫

　　使用MVVM的優勢是數據和視圖分離，雙向綁定，低耦合，可重用行，相對獨立的設計和邏輯；express

2、配置

系統環境：win10後端

開發工具：Visual Studio 2017框架

開發語言：C#.WPF (MVVM框架)異步

數據庫：SQLiteStudio工具

3、附件

vs_enterprise.exe 在線安裝 Visual Studio 2017 開發工具；
SQLiteStudio.zip 免安裝Sqlite輕量數據庫操做工具；
WPF-MVVM-Work.zip 項目源代碼；

4、步驟

　　1. 建立項目；

　　2. 文件夾層級；

　　建文件夾：Model, ViewModel, View, Resources, Lib, Service, Common；佈局

Model是模型層，屬性類存放的地方；也就是存放不涉及業務邏輯的代碼；學習

　　例如：列表元素，接口參數，枚舉，數據交互的參數模型和View基礎元素屬性等等；開發工具

ViewModel是視圖模型層，是MVVM實現業務邏輯代碼的地方；

　　例如：操做視圖界面數據的呈現，界面按鈕觸發的事件和操做數據庫先後對界面交互的事件；

View是視圖層，是窗體佈局實現的地方；也就是呈現給用戶交互使用的界面窗體；

　　例如：登陸頁面，查詢頁面，新增和編輯的頁面等；

Resources是資源庫層，裏面存放聲音，圖片和樣式佈局等統一調用外部資源的地方；

Lib是引用層，放置一些第三方引用便於調用，也能夠用nuget統一管理第三方dll；

Service是服務層，是實現對數據庫或者對站點接口的操做，進行數據持久化和數據交互；

Common是工具層，是存放一些公共的代碼，統一調用，簡潔業務邏輯代碼的冗餘；

　　　　注：能夠建文件夾，但更推薦新建類庫放置以上層級；

　　3. 控件的使用與佈局；

　　　　3.1 從工具箱中直接拖拉控件；

　　　　3.2 直接在代碼中編輯控件代碼；

　　4. 代碼關聯；

　　　　4.1 View與ViewModel的交互關聯：

　　　　　　- View後臺的代碼關聯

　　　　　public MainWindow() //類名
        {
            InitializeComponent();
　　　　　　　//後臺代碼有這句就實現了View和ViewModel的綁定
            DataContext = new MainWindowViewModel();
　　　　　}

　　　　　　- 文本的綁定

　　　　　前端：<TextBox Text="{Binding TxtInput}"/>
　　　　　後端：

　　　　　　　　public string TxtInput
　　　　　　　　{
　　　　　　　　　　get => _txtInput;
　　　　　　　　　　set
　　　　　　　　　　{
　　　　　　　　　　　　_txtInput = value;

　　　　　　　　　　　　//用RaisePropertyChanged刷新前端綁定控件的輸入框文本內容
　　　　　　　　　　　　RaisePropertyChanged("TxtInput");
　　　　　　　　　　}
　　　　　　　　}

　　　　　　　　private string _txtInput;

　　　　　　- 事件的綁定

　　　　　前端：<Button Content="添加" Command="{Binding BtnAddContent}"/>
　　　　　後端：

　　　　　　　　public MainWindowViewModel()
　　　　　　　　{

　　　　　　　　　　//按鈕事件與業務的銜接也能夠在BtnAddContent的Set中寫
　　　　　　　　　　BtnAddContent = new RelayCommand(AddContent);
　　　　　　　　}

　　　　　　　　//前端綁定的添加按鈕 Command事件

　　　　　　　　public RelayCommand BtnAddContent { get; set; }

　　　　　　　　private void AddContent()
　　　　　　　　{
　　　　　　　　　　//按鈕事件處理的業務邏輯代碼
　　　　　　　　}

　　　　　　- 樣式的綁定

　　　　　　<TextBox Style="{StaticResource TxbTrigger}" Tag="序號..." />

　　　　　　<Button Content="添加" Template="{StaticResource DefaultButton}" />

」TxbTrigger是輸入框水印樣式資源，DefaultButton是按鈕樣式資源模板；詳細樣式代碼，查閱源碼中的Resources-Style;「

　　　　4.2 數據綁定和命令綁定的代碼（若是用第三方框架引用，就不須要編寫如下兩個方法類）

　　//數據綁定
　　public class ViewModelBase : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        protected void RaisePropertyChanged<T>(Expression<Func<T>> action)
        {
            var propertyName = GetPropertyName(action);
            RaisePropertyChanged(propertyName);
        }
        private static string GetPropertyName<T>(Expression<Func<T>> action)
        {
            var expression = (MemberExpression)action.Body;
            var propertyName = expression.Member.Name;
            return propertyName;
        }
        public void RaisePropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            PropertyChanged(this,new PropertyChangedEventArgs(propertyName));
        }
    }

　　//命令綁定
　　public class RelayCommand : ICommand
    {
        public Action ExecuteAction; //執行方法
        public Action<object> ExecuteCommand; //執行方法 帶參數
        public Func<object, bool> CanExecuteCommand; //執行方法的條件
        public RelayCommand(Action action)// 執行事件
        {
            ExecuteAction = action;
        }
　　　　 //執行帶參數的事件 public RelayCommand(Action<object> action)
        {
            ExecuteCommand = action;
        }
　　　　　//根據條件執行帶參數的事件 public RelayCommand(Action<object> action, Func<object, bool> can)
        {
            ExecuteCommand = action;
            CanExecuteCommand = can;
        }
　　　　 //當命令可執行狀態發生改變時，應被激活 public event EventHandler CanExecuteChanged;
        
　　　　 //用於判斷命令是否能夠執行
　　　　　public bool CanExecute(object parameter)
        {
            if (ExecuteAction != null) return true;
            return CanExecuteCommand == null || CanExecuteCommand(parameter);
        }
　　　　 //命令執行 public void Execute(object parameter)
        {
            if (ExecuteCommand != null) ExecuteCommand(parameter);
            else ExecuteAction();
        }
    }

ViewModel的業務類須要繼承ViewModelBase

　　public class MainWindowViewModel : ViewModelBase

前端的DataGrid綁定的數據須要用ObservableCollection類型定義列表；

　　　　　public ObservableCollection<AddModel> AddContent
        {
            get => _addContent;
            set
            {
                _addContent = value;
                RaisePropertyChanged("AddContent"); 
            }
        }

        private ObservableCollection<AddModel> _addContent =
　　　　　　　　　　　　　　　　　　new ObservableCollection<AddModel>();

"AddModel"是Model中的屬性類；表明DataGrid中綁定的列名指向；

DataGrid前端代碼:

<DataGrid x:Name="DgTimes" 
　　ItemsSource="{Binding AddContent}" AutoGenerateColumns="False"
   SelectedItem="{Binding SelectTime,UpdateSourceTrigger=PropertyChanged}">
   <DataGrid.InputBindings>
　　　　<!--雙擊事件-->
   <MouseBinding Gesture="LeftDoubleClick" Command="{Binding DgDoubleClick}" 
   CommandParameter="{Binding ElementName=DgTimes,Path=SelectedItem}"/>
       <!--單擊事件，也能夠在SelectedItem選中事件中的set屬性編輯業務代碼-->
　 <MouseBinding Gesture="LeftClick" Command="{Binding DgClick}"
   CommandParameter="{Binding ElementName=DgTimes,Path=SelectedItem}"/>
   </DataGrid.InputBindings>
   <DataGrid.Columns>
       <DataGridTextColumn Header="序號" Binding="{Binding RowIndex}"/>
       <DataGridTemplateColumn Header="勾選？" MinWidth="30">
           <DataGridTemplateColumn.CellTemplate>
               <DataTemplate>
                   <Grid>
　　　　　　　　　　　　　<!--圖片的綁定，注意不能爲null或者空值，否則會加載超慢-->
                      <Image Width="20" Height="20" Source="{Binding Photo}"/>
                   </Grid>
               </DataTemplate>
           </DataGridTemplateColumn.CellTemplate>
       </DataGridTemplateColumn>
       <DataGridTextColumn Header="輸入內容" Binding="{Binding AddContent}"/>
       <DataGridTextColumn Header="時間" Binding="{Binding AddTime}"/>
   </DataGrid.Columns>
</DataGrid>