如何基于WPF写一款数据库文档管理工具（二）

系列目录

基于WPF重复造轮子，写一款数据库文档管理工具（一）
本篇重点

上次发表了基于WPF重复造轮子，写一款数据库文档管理工具（一） 得到不少人支持，文章一度上到了博客园推荐表首页，看来大家对这个工具还是很喜欢。今天就继续来分享一下我在开发这款工具的过程中积累的一些技术点。
本篇主要讲的是基于HandyControl控件的DataGrid进行数据绑定以及如何实现自定义一个自定义控件。在写这些之前我们先来看下我们工具的整个界面：

今天我们要实现的就是右边主界面展示的列表区域，其实这个区域是由多个用户控件组成的。下面截图就是列表区域的外层布局。

在这里我们也可以直接定义一个用户控件，然后使用MVVM的模式根据不同的类型展示不同的用户控件内容。
一.用户控件

下面贴一下我们用户控件的具体实现代码：
点击查看代码

1. <local:BaseUserControl
2.     x:
3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
6.     xmlns:hc="https://handyorg.github.io/handycontrol"
7.     xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
8.     xmlns:local="clr-namespace:SmartSQL.UserControl"
9.     xmlns:localBase="clr-namespace:SmartSQL.UserControl.Controls"
10.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
11.     mc:Ignorable="d">
12.     <Grid Background="#f5f5f5">
13.         
14.         <hc:SearchBar
15.             x:Name="SearchObject"
16.             Height="30"
17.             Margin="5,5,5,0"
18.             Padding="5,0,5,0"
19.             VerticalAlignment="Top"
20.             HorizontalContentAlignment="Left"
21.             hc:InfoElement.Placeholder="{Binding Placeholder}"
22.             FontSize="13"
23.             ShowClearButton="True"
24.             
25.             TextChanged="SearchObject_OnTextChanged" />
26.         
27.         <DataGrid
28.             x:Name="TableGrid"
29.             Margin="0,38,0,32"
30.             hc:DataGridAttach.CanUnselectAllWithBlankArea="True"
31.             hc:DataGridAttach.ShowRowNumber="True"
32.             AutoGenerateColumns="False"
33.             Background="Transparent"
34.             BeginningEdit="TableGrid_OnBeginningEdit"
35.             CellEditEnding="TableGrid_OnCellEditEnding"
36.             ColumnWidth="*"
37.             HeadersVisibility="All"
38.             ItemsSource="{Binding ObjectsViewData, Mode=TwoWay}"
39.             MouseDoubleClick="TableGrid_OnMouseDoubleClick"
40.             MouseLeftButtonUp="TableGrid_OnMouseLeftButtonUp"
41.             RowHeaderWidth="60"
42.             SelectionUnit="CellOrRowHeader">
43.             <DataGrid.CellStyle>
44.                
45.             </DataGrid.CellStyle>
47.             <DataGrid.Columns>
48.                 <DataGridCheckBoxColumn
49.                     Width="60"
50.                     Binding="{Binding IsChecked}"
51.                     CanUserSort="False"
52.                     Cell
53.                     Header="选择" />
54.                 <DataGridTextColumn
55.                     x:Name="ObjHead"
56.                     Binding="{Binding DisplayName}"
57.                     Header="对象名"
58.                     IsReadOnly="True" />
59.                 <DataGridTextColumn
60.                     Binding="{Binding Comment}"
61.                     CanUserSort="False"
62.                     Header="备注说明" />
63.                 <DataGridTextColumn
64.                     Binding="{Binding CreateDate, StringFormat='yyyy-MM-dd'}"
65.                     Cell
66.                     Header="创建时间"
67.                     IsReadOnly="True" />
68.                 <DataGridTextColumn
69.                     Binding="{Binding ModifyDate, StringFormat='yyyy/MM/dd'}"
70.                     Cell
71.                     Header="修改时间"
72.                     IsReadOnly="True" />
73.             </DataGrid.Columns>
74.         </DataGrid>
75.         <Grid
76.             x:Name="NoDataText"
77.             Margin="5,45,5,37"
78.             HorizontalAlignment="Stretch"
79.             Background="White"
80.             Cursor="Arrow">
81.             <localBase:NoDataArea
82.                 Margin="0"
83.                 HorizontalAlignment="Center"
84.                 ShowType="Img" />
85.         </Grid>
86.         <Grid
87.             Height="36"
88.             VerticalAlignment="Bottom"
89.             Background="White"
90.             Cursor="Arrow">
91.             <hc:SimpleStackPanel
92.                 Margin="47,0,5,10"
93.                 HorizontalAlignment="Left"
94.                 VerticalAlignment="Bottom">
95.                 <hc:UniformSpacingPanel Spacing="10">
96.                     <CheckBox
97.                         x:Name="ChkAll"
98.                         Margin="39,0,0,0"
99.                         Click="ChkAll_OnClick"
100.                         Content="全选" />
101.                 </hc:UniformSpacingPanel>
102.             </hc:SimpleStackPanel>
103.             <hc:SimpleStackPanel
104.                 Margin="5,0,5,5"
105.                 HorizontalAlignment="Right"
106.                 VerticalAlignment="Bottom">
107.                 <hc:UniformSpacingPanel Spacing="10">
108.                     <Button
109.                         x:Name="BtnSetGroup"
110.                         Height="26"
111.                         hc:IconElement.Geometry="{StaticResource SetGroupGeometry}"
112.                         Click="BtnSetGroup_OnClick"
113.                         Content="设置分组"
114.                         Cursor="Hand"
115.                          />
116.                     <Button
117.                         x:Name="BtnExport"
118.                         Height="26"
119.                         hc:IconElement.Geometry="{StaticResource ExportGeometry}"
120.                         Click="BtnExport_OnClick"
121.                         Content="导出文档"
122.                         Cursor="Hand"
123.                          />
124.                     
125.                 </hc:UniformSpacingPanel>
126.             </hc:SimpleStackPanel>
127.         </Grid>
128.     </Grid>
129. </local:BaseUserControl>

复制代码

然后再具体使用的页面按照下面这样写就可以实现一个用户控件的嵌入了：

1. [/code][size=4]二.用户控件数据传递[/size]
3. 虽然页面是嵌入成功了，我们要实现点击左边菜单的数据表然后加载对应表的列表内容该怎么做呢？
4. 其实我这里做了两层嵌套，外面第一层主窗口，中间还有一层用户控件MainW.xaml，然后才是加载数据列表的MainObjects.xaml,下面来看看我们后台代码的实现：
5. [code]        /// <summary>
6.         /// 选中表加载主内容对应数据
7.         /// </summary>
8.         /// <param name="sender"></param>
9.         /// <param name="e"></param>
10.         private void SelectedTable_OnClick(object sender, RoutedEventArgs e)
11.         {
12.             #region MyRegion
13.             var selectDatabase = (DataBase)SelectDatabase.SelectedItem;
14.             if (!(TreeViewTables.SelectedItem is TreeNodeItem objects) || objects.Type == ObjType.Group || objects.TextColor.Equals("Red"))
15.             {
16.                 return;
17.             }
18.             var sqLiteHelper = new SQLiteHelper();
19.             var isMultipleTab = sqLiteHelper.GetSysBool(SysConst.Sys_IsMultipleTab);
20.             if (!isMultipleTab)
21.             {
22.                 if (TabItemData.Any())
23.                 {
24.                     TabItemData.Clear();
25.                 }
26.                 CornerRadius = 10;
27.                 MainW.Visibility = Visibility.Visible;
28.                 MainTabW.Visibility = Visibility.Collapsed;
29.                 MainW.ObjChangeRefreshEvent += Group_ChangeRefreshEvent;
30.                 MainW.SelectedConnection = SelectendConnection;
31.                 MainW.SelectedDataBase = selectDatabase;
32.                 MainW.SelectedObject = objects;
33.                 MainW.LoadPage(TreeViewData);
34.                 return;
35.             }
36.             CornerRadius = 0;
37.             MainW.Visibility = Visibility.Collapsed;
38.             MainTabW.Visibility = Visibility.Visible;
39.             var curItem = TabItemData.FirstOrDefault(x => x.DisplayName == objects.DisplayName);
40.             if (curItem != null)
41.             {
42.                 MainTabW.SelectedItem = curItem;
43.                 return;
44.             }
46.             var dic = new Dictionary<string, string>
47.             {
48.                 {"Type", "pack://application:,,,/Resources/svg/category.svg"},
49.                 {"Table", "pack://application:,,,/Resources/svg/table.svg"},
50.                 {"View", "pack://application:,,,/Resources/svg/view.svg"},
51.                 {"Proc", "pack://application:,,,/Resources/svg/proc.svg"}
52.             };
53.             var mainW = new MainW
54.             {
55.                 SelectedConnection = SelectendConnection,
56.                 SelectedDataBase = selectDatabase,
57.                 SelectedObject = objects,
58.             };
59.             mainW.LoadPage(TreeViewData);
60.             var tabItem = new MainTabWModel
61.             {
62.                 DisplayName = objects.DisplayName,
63.                 Icon = dic[objects.Type],
64.                 MainW = mainW
65.             };
66.             TabItemData.Insert(0, tabItem);
67.             MainTabW.SelectedItem = TabItemData.First();
68.             #endregion
69.         }

复制代码

上面代码就是通过用户控件的依赖属性将主界面的相关信息一层层往后面传递，这里暂时只贴主界面到中间界面的传递代码，想看详细传递的过程可以去我的开源项目中查看。
那么在用户控件中我们怎么实现加载具体的列表信息呢？其实我们在点击左边菜单的时候就去加载用户控件里面的初始化数据加载方法就行了，就像上面代码中的MainW.LoadPage(TreeViewData);,这个就是用户控件中加载页面初始数据的方法，在这个方法里面我们实现列表页面的DataGrid数据绑定，下面是相关代码：

1.         /// <summary>
2.         /// 加载页面数据
3.         /// </summary>
4.         public void LoadPageData()
5.         {
6.             ChkAll.IsChecked = false;
7.             NoDataText.Visibility = Visibility.Collapsed;
8.             if (SelectedObject.Type == ObjType.Type)
9.             {
10.                 var headerT = "表名称";
11.                 var placeHolderT = "请输入表名称或备注说明";
12.                 switch (SelectedObject.Name)
13.                 {
14.                     case "treeTable": break;
15.                     case "treeView":
16.                         headerT = "视图名称";
17.                         placeHolderT = "请输入视图名称或备注说明"; break;
18.                     default:
19.                         headerT = "存储过程名称";
20.                         placeHolderT = "请输入存储过程名称或备注说明"; break;
21.                 }
22.                 ObjHead.Header = headerT;
23.                 Placeholder = placeHolderT;
24.                 if (SelectedObject.Parent == null)
25.                 {
26.                     ObjectsViewData = ObjectsViewData.First(x => x.Name == SelectedObject.Name).Children;
27.                 }
28.                 else
29.                 {
30.                     ObjectsViewData = ObjectsViewData.First(x => x.DisplayName == SelectedObject.Parent.DisplayName)
31.                         .Children;
32.                     ObjectsViewData = ObjectsViewData.First(x => x.Name == SelectedObject.Name).Children;
33.                 }
34.                 if (!ObjectsViewData.Any())
35.                 {
36.                     NoDataText.Visibility = Visibility.Visible;
37.                 }
38.                 ObjectsViewData.ForEach(x =>
39.                 {
40.                     x.IsChecked = false;
41.                 });
42.                 ObjItems = ObjectsViewData;
43.                 SearchObject.Text = string.Empty;
44.             }
45.         }

复制代码

在这里我们的DataGrid就是用的MVVM模式实现的数据双向绑定，要实现这个绑定我们还要在页面的默认构造函数中写上一句代码：

1.         public MainObjects()
2.         {
3.             InitializeComponent();
4.             DataContext = this;
5.         }

复制代码

这样就实现了DataGrid的数据绑定了。
好了，今天就分享到这了,想了解更多关于WPF相关的知识就请移步我的开源项目中查看吧。
开源地址

https://gitee.com/dotnetchina/SmartSQL

声明：SmartSQL已于2022.08.01正式加入Gitee开源组织dotNET China，为.net开源尽自己的绵薄之力，感谢各位的支持！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！