项目背景

公司业务历史悠久且复杂,数据库的表更是多而繁杂,每次基于老业务做功能开发都需要去翻以前的表和业务代码。需要理解旧的表的用途以及包含的字段的含义,表少还好说,但是表一多这就很浪费时间,而且留下来的文档都是残缺不全,每次查一些表的含义都要捯饬很久。在网上搜索关于数据库文档管理工具搜到最多的就是Screw和DBCHM,一个是基于Java的工具、另一个则是bug很多,表一多就一直转圈圈进不去。所以自己就动手开发了这款SmartSQL的工具。

它是一款基于.Net 4.6.1WPF开发的一款数据库文档管理,不仅支持多种数据库(SQLServerMySQLPostgreSQLSQLite)表、视图、存储过程的查询管理,还支持对其进行导出成离线文档,支持的文档包括CHMWordExcelPDFHTMLXmlJsonMarkDown等多种格式。

现在将它开源分享出来,供更多的小伙伴使用和参考学习(文末附开源地址)。

技术栈

  • .Net 4.6.1
  • WPF
  • HandyControl
  • SqlSugar
  • AvalonEdit
  • SharpVectors

HandyControl是一款非常优秀的WPF框架,做出来的页面都很漂亮,所以我们选择使用它。

Nuget中引用HandyControl

一.菜单栏

然后我们要实现一个基于WPF边框上的菜单栏,刚好HandyControl中有这么一个菜单栏的控件,

下面就是实现菜单栏的方法:

`

<hc:GlowWindow.NonClientAreaContent>
<StackPanel Height="29" Margin="25,0,0,0">
<Menu HorizontalAlignment="Left">
<MenuItem
x:Name="SwitchMenu"
Cursor="Hand"
FontWeight="Bold"
Foreground="{DynamicResource DarkPrimaryBrush}"
Header="选择连接">
<MenuItem.Icon>
<Path
Data="{StaticResource DownGeometry}"
Fill="{DynamicResource DarkPrimaryBrush}"
Stretch="Uniform" />
</MenuItem.Icon>
<MenuItem.ItemTemplate>
<HierarchicalDataTemplate>
<MenuItem
Width="160"
Margin="0"
Padding="0"
HorizontalAlignment="Left"
VerticalAlignment="Stretch"
Click="SwitchMenu_Click"
Cursor="Hand"
FontWeight="Normal"
Header="{Binding ConnectName}">
<MenuItem.Icon>
<svgc:SvgViewbox
Width="16"
Height="16"
HorizontalAlignment="Left"
IsHitTestVisible="False"
Source="{Binding Icon}" />
</MenuItem.Icon>
</MenuItem>
</HierarchicalDataTemplate>
</MenuItem.ItemTemplate>
</MenuItem>
<MenuItem
Name="MenuConnect"
Cursor="Hand"
FontWeight="Bold"
Foreground="{DynamicResource DarkPrimaryBrush}"
Header="文件">
<MenuItem.Icon>
<Path
Data="{StaticResource FileGeometry}"
Fill="{DynamicResource DarkPrimaryBrush}"
Stretch="Uniform" />
</MenuItem.Icon>
<MenuItem
Name="AddConnect"
Click="AddConnect_OnClick"
FontWeight="Normal"
Header="新建连接">
<MenuItem.Icon>
<Path
Data="{StaticResource NewConnectGeometry}"
Fill="{DynamicResource DarkPrimaryBrush}"
Stretch="Uniform" />
</MenuItem.Icon>
</MenuItem>
<MenuItem
Name="ImportMark"
Click="ImportMark_OnClick"
FontWeight="Normal"
Header="导入备注">
<MenuItem.Icon>
<Path
Data="{StaticResource ImportGeometry}"
Fill="{DynamicResource DarkPrimaryBrush}"
Stretch="Uniform" />
</MenuItem.Icon>
</MenuItem>
<MenuItem
Name="ExportDoc"
Click="ExportDoc_OnClick"
FontWeight="Normal"
Header="导出文档">
<MenuItem.Icon>
<Path
Data="{StaticResource ExportGeometry}"
Fill="{DynamicResource DarkPrimaryBrush}"
Stretch="Uniform" />
</MenuItem.Icon>
</MenuItem>
</MenuItem>
<MenuItem
Name="MenuGroup"
Click="MenuGroup_OnClick"
Cursor="Hand"
FontWeight="Bold"
Foreground="{DynamicResource DarkPrimaryBrush}"
Header="分组">
<MenuItem.Icon>
<Path
Data="{StaticResource GroupGeometry}"
Fill="{DynamicResource DarkPrimaryBrush}"
Stretch="Uniform" />
</MenuItem.Icon>
</MenuItem>
<MenuItem
Name="MenuSetting"
Click="MenuSetting_OnClick"
Cursor="Hand"
FontWeight="Bold"
Foreground="{DynamicResource DarkPrimaryBrush}"
Header="设置">
<MenuItem.Icon>
<Path
Data="{StaticResource SettingGeometry}"
Fill="{DynamicResource DarkPrimaryBrush}"
Stretch="Uniform" />
</MenuItem.Icon>
</MenuItem>
<MenuItem
Name="MenuAbout"
Click="MenuAbout_OnClick"
Cursor="Hand"
FontWeight="Bold"
Foreground="{DynamicResource DarkPrimaryBrush}"
Header="关于">
<MenuItem.Icon>
<Path
Data="{StaticResource InfoGeometry}"
Fill="{DynamicResource DarkPrimaryBrush}"
Stretch="Uniform" />
</MenuItem.Icon>
</MenuItem>
</Menu>
</StackPanel>
</hc:GlowWindow.NonClientAreaContent>
<!-- 工具栏菜单 -->

其中有个小插曲,在WPF中是默认不支持svg图形的,所以我们需要引用一个组件:SharpVectors,它的使用方法是这样的,引用svg界面需要引入下面语句:

xmlns:svgc="http://sharpvectors.codeplex.com/svgc/"

然后引用要显示的svg图形:

<svgc:SvgViewbox
Width="16"
Height="16"
HorizontalAlignment="Left"
IsHitTestVisible="False"
Source="{Binding Icon}" />

二.左侧菜单栏

然后就是左侧的菜单栏,我们要实现一个数据库的选择和数据库对象的搜索,可以搜索相关表、视图、存储过程等对象。

首先我们要对我们的主界面进行一个简单的1:1:1的竖向布局,分别为左侧菜单栏、中间可以移动的分隔栏、右面的主界面:


<!-- Main区域 -->
<Grid x:Name="GridMain" Background="{StaticResource CloudDrawingBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3.3*" MinWidth="200" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="6.6*" />
</Grid.ColumnDefinitions>
</Grid>

现在我们要实现一个左侧树形的菜单栏,我们使用的是WPF里面的TreeView控件进行实现这样一个功能,下面是相关代码:


<DockPanel Grid.Row="0" Grid.Column="0">
<hc:SimplePanel>
<Border
Margin="5,5,0,5"
Background="{DynamicResource RegionBrush}"
CornerRadius="{Binding CornerRadius}">
<Grid
Height="Auto"
Margin="5"
Background="Transparent">
<TextBox x:Name="HidSelectDatabase" Visibility="Hidden" />
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="8*" />
<ColumnDefinition Width="1*" MinWidth="30" />
</Grid.ColumnDefinitions>
<ComboBox
x:Name="SelectDatabase"
Height="30"
VerticalAlignment="Top"
HorizontalContentAlignment="Stretch"
hc:BorderElement.CornerRadius="5"
hc:InfoElement.Placeholder="请选择数据库"
Cursor="Hand"
IsTextSearchEnabled="True"
SelectionChanged="SelectDatabase_OnSelectionChanged"
Style="{StaticResource ComboBoxExtend}"
Text="{Binding DbName}">
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel VerticalAlignment="Center" Orientation="Horizontal">
<Image
Width="11"
Height="15"
Source="/SmartSQL;component/Resources/Img/dataBase.ico" />
<TextBlock
Margin="5,0,0,0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Text="{Binding DbName}" />
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<Button
Name="BtnFresh"
Grid.Column="2"
Margin="0,0,0,0"
Padding="4"
VerticalAlignment="Top"
Background="Transparent"
BorderThickness="0"
Click="BtnFresh_OnClick"
Cursor="Hand">
<Button.Content>
<Image Source="/SmartSQL;component/Resources/Img/Refresh.png" Stretch="Fill" />
</Button.Content>
</Button>
</Grid>
<hc:SearchBar
x:Name="SearchMenu"
Height="30"
Margin="0,34,0,0"
Padding="5,0,5,0"
VerticalAlignment="Top"
HorizontalContentAlignment="Stretch"
hc:BorderElement.CornerRadius="5"
hc:InfoElement.Placeholder="搜索数据表/视图/存储过程"
FontSize="13"
ShowClearButton="True"
Style="{StaticResource SearchBarPlus}"
TextChanged="SearchMenu_OnTextChanged" />
<TabControl
x:Name="TabLeftType"
Margin="0,65,0,40"
SelectionChanged="TabLeftType_OnSelectionChanged"
Style="{StaticResource TabControlInLine}">
<TabItem
x:Name="TabAllData"
Cursor="Hand"
Header="全部"
IsSelected="True" />
<TabItem
x:Name="TabGroupData"
Cursor="Hand"
Header="分组"
IsSelected="False" />
<!--<TabItem
x:Name="TabFavData"
Cursor="Hand"
Header="收藏"
IsSelected="False" />-->
</TabControl>
<TreeView
x:Name="TreeViewTables"
Margin="0,100,0,0"
VerticalAlignment="Top"
BorderThickness="0"
ItemsSource="{Binding TreeViewData}"
SelectedItemChanged="SelectedTable_OnClick">
<TreeView.ItemContainerStyle>
<Style BasedOn="{StaticResource TreeViewItemBaseStyle}" TargetType="{x:Type TreeViewItem}">
<Setter Property="IsExpanded" Value="{Binding IsExpanded}" />
<Setter Property="FontWeight" Value="{Binding FontWeight}" />
<Setter Property="FontSize" Value="12" />
<Setter Property="Visibility" Value="{Binding Visibility}" />
<Setter Property="Foreground" Value="{Binding TextColor}" />
<Setter Property="Cursor" Value="Hand" />
<!-- 禁止水平滚动条自动滚动 -->
<EventSetter Event="RequestBringIntoView" Handler="EventSetter_OnHandler" />
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="FontWeight" Value="Bold" />
</Trigger>
</Style.Triggers>
</Style>
</TreeView.ItemContainerStyle>
<TreeView.ContextMenu>
<!-- 右键菜单 -->
<ContextMenu Visibility="Visible">
<MenuItem
x:Name="MenuSelectedItem"
Padding="5,0,5,0"
VerticalAlignment="Center"
Click="MenuSelectedItem_OnClick"
Cursor="Hand"
Header="复制对象名" />
</ContextMenu>
</TreeView.ContextMenu>
<TreeView.ItemTemplate>
<HierarchicalDataTemplate DataType="{x:Type models:TreeNodeItem}" ItemsSource="{Binding Children}">
<StackPanel Orientation="Horizontal">
<svgc:SvgViewbox
Width="12"
Height="12"
Margin="0,0,5,0"
HorizontalAlignment="Left"
Source="{Binding Icon}" />
<TextBlock
VerticalAlignment="Center"
FontSize="12"
Text="{Binding DisplayName}"
ToolTip="{Binding DisplayName}" />
</StackPanel>
</HierarchicalDataTemplate>
</TreeView.ItemTemplate>
</TreeView>
<Grid
x:Name="NoDataText"
Margin="0,100,0,5"
HorizontalAlignment="Stretch"
Background="White"
Cursor="Arrow">
<local:NoDataArea
x:Name="NoDataAreaText"
Margin="0"
HorizontalAlignment="Center"
ShowType="All" />
</Grid>
<Grid
Margin="0"
VerticalAlignment="Bottom"
Visibility="Hidden">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4*" />
<ColumnDefinition Width="6*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid>
<ComboBox
x:Name="CbTargetConnect"
Height="26"
VerticalAlignment="Bottom"
HorizontalContentAlignment="Left"
hc:InfoElement.Placeholder="目标连接"
Cursor="Hand"
DisplayMemberPath="ConnectName"
IsTextSearchEnabled="True"
SelectedValuePath="DbMasterConnectString"
SelectionChanged="CbTargetConnect_OnSelectionChanged"
Style="{StaticResource ComboBoxExtend}" />
</Grid>
<Grid Grid.Column="1" Margin="5,0,0,0">
<ComboBox
x:Name="CbTargetDatabase"
MinWidth="50"
VerticalAlignment="Bottom"
HorizontalContentAlignment="Left"
hc:InfoElement.Placeholder="目标数据库"
Cursor="Hand"
IsTextSearchEnabled="True"
Style="{StaticResource ComboBoxExtend}" />
</Grid>
<Grid Grid.Column="2">
<!-- 差异比较按钮 -->
<Button
x:Name="BtnCompare"
Height="30"
Margin="5,5,0,0"
HorizontalAlignment="Right"
hc:BorderElement.CornerRadius="6"
hc:IconElement.Geometry="{StaticResource CompareGeometry}"
Click="BtnCompare_OnClick"
Content="差异比较"
Cursor="Hand" />
</Grid>
</Grid>
<!-- 数据加载Loading -->
<hc:LoadingLine
x:Name="LoadingLine"
Margin="0,0,0,0"
Visibility="Collapsed" />
</Grid>
</Border>
</hc:SimplePanel>
</DockPanel>

在这里我没有详细介绍底层c#的相关代码,里面逻辑有些复杂感兴趣的可以去我的开源项目中学习。在上面的左侧菜单代码中,我们使用的不仅有TreeView控件、也有ContextMenuhc:LoadingLine等控件,还有自己写的自定义控件。

其实WPF要比WinForm好用不少,不仅支持MVVM数据绑定还支持灵活的页面渲染,自从用了WPF再也不用WinForm了。

今天分享暂时到这里,下一篇讲介绍DataGrid表格数据绑定及相关条件搜索。下面是工具的开源地址,感兴趣的可以Clone下来学习一下。码砖不易,喜欢的麻烦点下Star.

开源地址

https://gitee.com/izhaofu/SmartSQL

基于WPF重复造轮子,写一款数据库文档管理工具(一)的更多相关文章

  1. 如何基于WPF写一款数据库文档管理工具(二)

    系列目录 基于WPF重复造轮子,写一款数据库文档管理工具(一) 本篇重点 上次发表了基于WPF重复造轮子,写一款数据库文档管理工具(一) 得到不少人支持,文章一度上到了博客园推荐表首页,看来大家对这个 ...

  2. 基于Mybatis的Mysql数据库文档生成工具,支持生成docx(原创)

    今天不写android--也写写数据库相关的东西 -------------------- 今日老夫闲来无事,设计了一款数据库文档生成工具 眼下仅仅支持mysql 主要是生成docx的 下载链接:下载 ...

  3. GitHub Android 最火开源项目Top20 GitHub 上的开源项目不胜枚举,越来越多的开源项目正在迁移到GitHub平台上。基于不要重复造轮子的原则,了解当下比较流行的Android与iOS开源项目很是必要。利用这些项目,有时能够让你达到事半功倍的效果。

    1. ActionBarSherlock(推荐) ActionBarSherlock应该算得上是GitHub上最火的Android开源项目了,它是一个独立的库,通过一个API和主题,开发者就可以很方便 ...

  4. Quartz:不要重复造轮子,一款企业级任务调度框架。

    背景 第一次遇到定时执行某些任务的需求时,很多朋友可能设计了一个小类库,这个类图提高了一个接口,然后由调度器调度所有注册的接口类型,我就是其中之一,随着接触的开源项目越来越多,我的某些开发习惯受到了影 ...

  5. 推荐几款API文档集合工具

    https://zealdocs.org/    开源.免费,支持Linux.Windows http://velocity.silverlakesoftware.com/  https://kape ...

  6. 一款对Postman支持较好的接口文档生成工具

    最近要编写接口文档给测试和前端看,通过网上查阅资料,也认识了很多款接口文档生成工具,比如易文档.ApiPost.ShowDoc.YApi.EoLinker.DOClever.apizza等,通过对这几 ...

  7. 重复造轮子系列——基于FastReport设计打印模板实现桌面端WPF套打和商超POS高度自适应小票打印

    重复造轮子系列——基于FastReport设计打印模板实现桌面端WPF套打和商超POS高度自适应小票打印 一.引言 桌面端系统经常需要对接各种硬件设备,比如扫描器.读卡器.打印机等. 这里介绍下桌面端 ...

  8. 重复造轮子系列——基于Ocelot实现类似支付宝接口模式的网关

    重复造轮子系列——基于Ocelot实现类似支付宝接口模式的网关 引言 重复造轮子系列是自己平时的一些总结.有的轮子依赖社区提供的轮子为基础,这里把使用过程的一些觉得有意思的做个分享.有些思路或者方法在 ...

  9. 重复造轮子,编写一个轻量级的异步写日志的实用工具类(LogAsyncWriter)

    一说到写日志,大家可能推荐一堆的开源日志框架,如:Log4Net.NLog,这些日志框架确实也不错,比较强大也比较灵活,但也正因为又强大又灵活,导致我们使用他们时需要引用一些DLL,同时还要学习各种用 ...

随机推荐

  1. 1903021121—刘明伟—Java第六周作业—java类

    项目   内容 课程班级博客链接  19信计班(本) 作业要求链接 第6周作业 扩展阅读 java面向对象的概念和定义 作业要求 每道题要有题目,代码,截图(只截运行结果). 题目1: 一个Phone ...

  2. 【多线程】JUC版的CopyOnWriteArrayList

    CopyOnWriteArrayList CopyOnWriteArrayList适合于多线程场景下使用,其采用读写分离的思想,读操作不上锁,写操作上锁,且写操作效率较低. CopyOnWriteAr ...

  3. Maven生成可以直接执行的jar包

    要想jar包能直接通过java -jar xxx.jar运行,需要满足: 1.在jar包中的META-INF/MANIFEST.MF中指定Main-Class,这样才能确定程序的入口在哪里: 2.要能 ...

  4. 一文带你搞懂 Kafka 的系统架构(深度好文,值得收藏)

    Kafka 简介 Kafka 是一种高吞吐.分布式.基于发布和订阅模型的消息系统,最初是由 LinkedIn 公司采用 Scala 和 java 开发的开源流处理软件平台,目前是 Apache 的开源 ...

  5. 个人冲刺(七)——体温上报app(二阶段)

    冲刺任务:完成特殊情况功能 MoreActivity.java package com.example.helloworld; import android.content.Intent; impor ...

  6. python面向对象(封装、多态、反射)

    目录 面向对象之封装 @property 面向对象之多态 面向对象之反射 面向对象之封装 含义 将类中的某些名字按照特殊的书写方式"隐藏"起来,不让外界直接调用,目的是为了不然外界 ...

  7. Java 接口返回值集合防止空指针

    接口 返回值为一个集合 public interface UserSearchService{ List<User> listUser(); } 接口实现 public List<U ...

  8. TypeScript 泛型(generic) 入门介绍

    TypeScript 泛型函数 下面来创建第一个使用泛型的例子:identity函数.这个函数会返回任何传入它的值.你可以把这个函数当成是echo命令.不用泛型的话,这个函数可能是下面这样: func ...

  9. BUUCTF-easycap

    easycap 看这个题目应该是流量包来的,wireshark打开即可.没什么特征,直接打开第一个包发现flag

  10. 微信0day复现

    由于微信采用的是google内核,前些日子google爆出0day远程代码执行漏洞,但是需要关闭沙箱,而微信采用的是老版本google内核,默认关闭沙箱,因此只要微信用户点击恶意连接,可直接获取该PC ...