wpf使用入式mysql_使用 WPF 和 MySQL 搭建小型人资管理系统——主要页面
大家過年好！祝大家新年快樂~~~ 在新的一年身體健康，心想事成~~~
開始第三篇！
這一篇的主要內容會說一下剩下的幾個頁面，它們之間的邏輯關系，以及每個頁面中比較難實現的部分。
頁面說明
在第二篇中，我們介紹了登錄界面和主頁面的布局及難點，今天我們主要介紹人事管理頁、用戶管理頁、員工詳情頁、添加信息頁以及修改信息頁。
先放圖給大家看一看~~~
人事管理頁.png
人事管理頁，點擊菜單欄的第一項即可轉到此頁面。可以在此查看所有員工的主要信息，并可以多條件查詢篩選員工。點擊最后一列的詳情圖標，即可轉到員工詳情頁查看所選員工的詳細信息。可以選中一個或按住 Ctrl 選中多個員工執行刪除操作。點擊添加按鈕就會轉到添加信息頁。
員工詳情頁.png
員工詳情頁，是人事管理頁的子頁面。根據客戶給出的信息項進行整合歸類，展示員工的詳細信息。其中每一項信息都處于不可編輯狀態，點擊打印按鈕會彈出打印界面，點擊修改會彈出修改界面。
修改信息頁.png
修改信息頁，是員工詳情頁的子頁面。展示的信息和員工詳情頁大致一樣，其中每項都可以被編輯修改。點擊取消修改則關閉此窗口且不進行其他操作，點擊保存修改則關閉此窗口且更新員工詳情頁的信息。
添加信息頁.png
添加信息頁，是人事管理頁的子頁面。點擊人事管理頁的添加按鈕即可轉到此頁面。與修改信息頁類似，其中的每項都可被填寫和編輯。它主要用來從零開始填寫某個員工的信息，而修改信息頁主要用于在已經填好的基礎上進行少數地方的修改。
用戶管理頁.png
用戶管理頁，點擊菜單欄的第二項即可轉到此頁面。它的主要作用有兩個，一是管理登錄用戶的權限，可以添加新的用戶并指定其權限(權限若為人資，則具有最高權限。可以執行所有操作，查看所有頁面；權限若為高管，則只能查看人事管理頁、員工詳情頁和幫助頁面)，也可選中一個或多個用戶進行刪除。第二個作用是可以查看近一個月的所有登錄此客戶端的用戶名和登錄時間。
展示的頁面就是這么多了，可能有的小伙伴會發現還有一個挺重要的頁面沒有展示，也就是菜單欄的第三項——數據備份。事實上，這個頁面并沒有完成... ... 我們剛開始做到這里的時候很頭大，不知道怎么進行，查閱資料后發現需要和服務器相配合才能繼續，而且還涉及到一些問題，比如想要從若干備份中選擇一個恢復到那時候的狀態，如何才能在客戶端點擊恢復按鈕后把命令發送給服務器，之類的問題，當時我們并沒有這么多精力來解決這個問題，于是就采取了簡化的策略，先不實現這個頁面和功能，而是給服務器上的數據庫設置一個定期備份的腳本，如果真的要恢復某個備份，就通過直接操作服務器的數據庫來實現... ...
... ...
(于是到了現在也沒實現)
經驗：如果要完成的項目中有個功能目前較難實現，在資源和精力有限的情況下可以考慮先進行簡化處理，優先完成項目主體功能，完成這些以后，或者是在項目的下個版本中，在集中精力處理這些問題。
雖然聽起來很簡單，但是有時候我們就容易陷入一種死磕的狀態，不搞出來這個就很不甘心很難受，于是就耽誤了其他更重要的任務。保持大局觀，一定不能讓我們的思維被情緒主導，而是要讓情緒跟隨思維。
頁面的邏輯結構
我們已經知道了幾個頁面的樣子和它們之間的跳轉關系，那么在程序中它們是一個怎么樣的結構呢？
首先，在 VS 項目自帶的 App.xaml 中，可以看到如下代碼：
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:DatabaseProject"
StartupUri="MainWindow.xaml"
ShutdownMode="OnExplicitShutdown">
其中 StartupUri 表示運行項目工程時首先從 MainWindow.xaml 開始啟動，ShutdownMode 用來判斷判斷調用 ShutDown 方法終止程序的條件，如下表：
ShutdownMode 的值
說明
OnLastWindowClose (默認值)
最后一個窗體關閉或調用Application對象的Shutdown() 方法時，應用程序關閉。
OnMainWindowClose
啟動窗體關閉或調用Application對象的Shutdown()方法時，應用程序關閉。
OnExplicitShutdown
只有在調用Application對象的Shutdown()方法時，應用程序才會關閉。
我們剛開始沒有設置這個值，結果在運行的時候點擊右上角紅叉無法完全退出，雖然關掉了頁面，但是進程仍然在運行。后來打包生成應用程序時也是這樣，必須在任務管理器中停止進程才行。經過多方查找資料，最后的解決方法是，把 ShutdownMode 的值設置成了 OnExplicitShutdown，并且在主程序窗口所在頁面的 cs 文件中類的最后加上了下面的代碼：
protected override void OnClosing(System.ComponentModel.CancelEventArgs e)
{
Application.Current.Shutdown();
}
這樣相當于點右上角紅叉時強制關閉了進程并回收了資源，是比較暴力的做法，這對于一些需要在退出前保存當前狀態的程序來說是不適用的。
接著剛才的說，首先 StartupUri 指定了從 MainWindow.xaml 開始啟動，其實就是先啟動登錄窗口。接下來用戶登錄，如果身份核實無誤，就先用this.Hide() 隱藏當前窗口，然后創建一個 MainWindow1 類型的變量(就是主程序窗口的類型)并對其調用Show()方法。
在 MainWindow1.xaml.cs 中，添加四個 static 的 Page 變量，對應著菜單欄上的四個選項，跳轉頁面的代碼已經在系列的第二篇的最后給出。之所以要設置成 static，是因為這四個頁面都是唯一的，而且這樣可以方便后續在各種情況下對它們的調用。
public partial class MainWindow1 : Window
{
public static Page1 p1;//人事管理頁
public static Page2 p2;//用戶管理頁
public static Page3 p3;
public static Page4 p4;
//省略下面的代碼
...
}
同理，在 Page1.xaml.cs 中添加兩個 static 的 Page 變量，也是因為員工詳情頁和添加信息頁都是唯一的。不同的員工的詳情頁不同，是因為改變了這個唯一的詳情頁里的某些變量。它就像一個收納盒，結構已經搭建好了，當查看張三的信息時，把里面都放上張三的東西；當查看李四的信息時，先清空里面的東西，然后再放上李四的東西。(其實也可以不設置成 static，相當于給每個人一個收納盒，但我覺得在查看很多員工信息的時候可能會占用較多內存空間，因此在退出該頁面時需要清理資源)
public partial class MainWindow1 : Window
{
public static Detail_info_Page detailInfoPage;//員工詳情頁
public static Add_info_Page addinfopage;//添加信息頁
//省略下面的代碼
...
}
對于修改信息頁，為了方便我就沒設置成 static，也是可以運行的 : )
private void Revise_Button_Click(object sender, RoutedEventArgs e)
{
Revise_Window rw1 = new Revise_Window();
rw1.ShowDialog();
}
就說這么多了，接下來我們看看每個頁面中遇到的問題。
遇到的問題
人事管理頁的高級查詢部分，怎么實現點擊后呈現隱藏部分的？
高級查詢的點擊與隱藏.png
WPF 有個控件叫 Expander，可以用于實現這個功能。在其中先添加一個 Grid，再在 Grid 中放入其他控件。在 xaml 結合其他的控件用法如下：
SelectedIndex="0">
不限
財務
Background="#85B6FF"
Foreground="White"
Content="查詢"
Click="AdvanceSearch_Button_Click">
人事管理頁中表格的樣式是怎么實現的？
這里的樣式我有部分借鑒了網上的例子。除了本身的藍白色交替以外，還有鼠標懸浮和選中的效果，如下圖：(淺黃是鼠標懸浮效果，深黃是選中效果)
hover效果、selected效果與普通效果.png
接下來的代碼復制粘貼就可以了 : )
Value="20" />
Value="White" />
Value="#555555" />
Value="50" />
Value="1" />
Opacity="1">
Value="Center" />
Value="Black" />
Value="50" />
Value="20" />
Value="#3E3E3E" />
Value="Center" />
Value="0">
Value="#F3F8FF" />
Value="1">
Value="White" />
Value="True">
Value="#FFF5C2" />
Value="True">
Value="#FFED94" />
Value="Black" />
VerticalAlignment="Center">
Value="True">
Value="Black" />
Name="datagrid1"
Height="600"
Canvas.Left="71"
Canvas.Top="180"
Width="1529"
Background="#F9F9F9"
CanUserSortColumns="False"
AutoGenerateColumns="False"
CanUserReorderColumns="False"
CanUserAddRows="False"
AlternationCount="2"
DataGrid.ColumnHeaderStyle="{DynamicResource ColumnHeaderStyle1}"
DataGrid.RowStyle="{DynamicResource DataGridRowStyle1}"
DataGrid.CellStyle="{DynamicResource DataGridCellStyle}"
BorderBrush="#9DC4FF"
HorizontalGridLinesBrush="#9DC4FF"
VerticalGridLinesBrush="#9DC4FF"
HeadersVisibility="Column">
Binding="{Binding PID, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Width="3*">
Binding="{Binding PName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Width="3*">
Binding="{Binding Sex, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Width="2*">
Binding="{Binding age, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Width="2*">
Binding="{Binding Education, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Width="2*">
Binding="{Binding ODepart, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Width="3*">
Binding="{Binding CPosition, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Width="3*">
Binding="{Binding intime, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Width="3*">
MouseLeftButtonDown="Staff_detail_info_MouseLeftButtonDown"
Height="32"
Width="100"
Source="pack://application:,,,/pic/detail_info.png"
Canvas.Left="1799"
Canvas.Top="540" />
如何實現在表格(datagrid)中插入表示詳情的圖片，并實現點擊跳轉？
看到上面的代碼的最后的 image 標簽，就是插入圖片的方式。跳轉的方式是用了 MouseLeftButtonDown 屬性來實現的。在 xmal 對應的 cs 文件里，加上下面的方法：
private void Staff_detail_info_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
DataRowView row = (DataRowView)((Image)e.Source).DataContext;
string staff_pid = row["PID"].ToString();
detailInfoPage = new Detail_info_Page(staff_pid, detail_info_para);
detailInfoPage.detail_info_page_title.Content = row["PName"].ToString() + "員工詳細信息";
this.NavigationService.Navigate(detailInfoPage);
}
第一行的寫法查了好久才查到，我是打死都寫不出來的... ...它的作用就是獲取到你點擊的那一行。第二行獲取到所選擇的行的員工對應的唯一識別碼(PID)，第三行對之前聲明的靜態的員工詳情頁進行初始化，注意構造函數的第二個參數是用于標識用戶是人資還是高管的，detail_info_para 的值在之前就已經確定。實際上在執行完這一句以后，員工詳情頁的構造函數已經將其生成好了。第四行的作用是將員工的名字加入到員工詳情頁的標題中。
如何實現添加或刪除員工信息后刷新人事管理頁中的表格？
添加員工信息后，會通過this.NavigationService.Navigate(MainWindow1.p1)跳轉到人事管理頁，此時 datagrid 會從數據庫提取信息并顯示，從而實現更新；而刪除員工信息后則手動從數據庫提取信息并顯示。數據庫的操作會放到之后專門說明。
員工詳情頁的標簽欄和表格樣式是怎么做的？
員工詳情頁的標簽欄和表格樣式.png
可以通過 TabControl 來實現。其中可以包含多個 TabItem，每個 TabItem 中又可以包含其他的控件元素。直接上代碼：
其中 TabItem 的呈現方式也有很多，網上可以找到各種各樣的樣式。
而表格樣式其實就是把兩個只有一行的 datagrid 一上一下放置，設置好高度就可以了。這里還需要說一下，客戶的要求是有些信息的行數是不固定的，比如曾經擔任的職位，還有工作職能標準等等，它們可能只有一行，也可能有十幾行。然而 datagrid 的高度是固定的，確定高度后展示的信息的行數就固定了。這里我選擇了個簡單粗暴的方法，就是把高度設置得多一些，這樣在絕大多數情況下都能夠顯示所有的行了... ...
在添加員工信息時，第四個標簽欄中需要用到單選框(RadioButton)，但是 WPF 自帶的單選框太小了，放上去不美觀，怎么變大？
最終在 Stackoverflow 上找到了解決方法。使用 Viewbox，可以放大某個控件。代碼如下：
Width="617">
Width="154" />
Width="154" />
Width="154" />
Width="90" />
設置好 RadioButton 的 Width，與表頭對其即可。還有就是，WPF 中除了 RadioButton，還有 Calendar 等選擇日期控件也比較小，因此也可以用 Viewbox 放大。最終呈現的效果如下圖所示。
放大的 RadioButton.png
在查看員工詳細信息時，如何達到下圖的效果，在之前選擇的類型上標上對勾？如果在對應的項下面填上“選中”的話不好看。
用對勾表示選中.png
這里我開始準備放個對勾的圖片上去，后來覺得把問題弄復雜了，就想著對勾是否可以作為文本來顯示。百度了一下，果然可以打出來 √ √ √ 你可以在中文輸入法下輸入“對勾”的拼音，應該也會出來這個符號的 : ) 最后把顏色改成紅色就 ok 了。
怎么修改 datagrid 使其中的信息不能被修改？
Datagrid 有很多屬性可以設置，在 datagrid 標簽中設置IsEnabled="False"即可達到這個要求。其他的屬性還有 CanUserSortColumns，AutoGenerateColumns，CanUserReorderColumns，CanUserAddRows 等等。從字面意思上也可以知道它們的作用。如果大家想知道它們會造成什么樣的不同，可以自行百度，這里就不多說啦。
怎么實現打印的功能？
這個也是個不小的坑，我放在下一篇專門說 : ) 先放一張打印窗口的截圖如下：
打印窗口.png
好了，這篇就到這里了~ 打這么多字還真有點累，但也要繼續堅持~
再次祝大家新年快樂，在新的一年成為更好的自己！
總結
以上是生活随笔為你收集整理的wpf使用入式mysql_使用 WPF 和 MySQL 搭建小型人资管理系统——主要页面的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mysql 文件放网络盘_MySQL I
- 下一篇： 十进制转十六进制c语言_蓝桥杯十六进制转