项目背景

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

它是一款基于.Net 4.6.1、WPF开发的一款数据库文档管理，不仅支持多种数据库(SQLServer、MySQL、PostgreSQL、SQLite)表、视图、存储过程的查询管理，还支持对其进行导出成离线文档，支持的文档包括CHM、Word、Excel、PDF、HTML、Xml、Json、MarkDown等多种格式。

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

技术栈

  • .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控件、也有ContextMenu、hc: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. （数据科学学习手札136）Python中基于joblib实现极简并行计算加速

    本文示例代码及文件已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 我们在日常使用Python进行各种数据计算 ...

  2. MySQL（8） - MySQL的事务机制

    MySQL数据库的事务机制 1.1.事务的概念和特性 1.2.事务的隔离级别 repeatable read是mysql默认的事务隔离级别 #事务A #事务A,临时修改工资,未commit, STAR ...

  3. 好客租房7-React脚手架的使用

    3.3在脚手架中使用React //第一步导入react import React from "React" import ReactDOM from "react-do ...

  4. TypeScript 学习的随笔

    TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准 安装TypeScript npm install -g typescript 编译 tsc app.t ...

  5. redis高可用、redis集群、redis缓存优化

    今日内容概要 redis高可用 redis集群 redis缓存优化 内容详细 1.redis高可用 # 主从复制存在的问题: 1 主从复制,主节点发生故障,需要做故障转移,可以手动转移:让其中一个sl ...

  6. Linux详解（基础、环境配置、项目部署入门）

    Linux(CentOS 7)操作系统 消息队列(Kafka.RabbitMQ.RocketMQ),缓存(Redis),搜索引擎(ES),集群分布式(需要购买多台服务器,如果没有服务器我们就只能使用虚 ...

  7. Flink使用Pod Template将状态快照(Checkpoint、Savepoint)存储在NFS

    背景 Flink 版本 1.13.3,使用 native k8s 部署模式,原采用 HDFS 作为状态快照(Checkpoint.Savepoint)的存储地址,但是由于仅使用了其 HDFS 作为状态 ...

  8. Typecho博客转移服务器,数据备份.

    目录 Typecho博客转移服务器,数据备份. 简述操作(有基础的mjj看这个简述就可以了.) 详细步骤(建议小白来看, 已经在很多详细方面进行说明了.) 备份篇 备份导入与数据库转移篇 重新部署ty ...

  9. Go微服务框架go-kratos实战04：kratos中服务注册和服务发现的使用

    一.简介 关于服务注册和服务发现介绍,我前面的文章有介绍过 - 服务注册和发现的文章. 作为服务中心的软件有很多,比如 etcd,consul,nacos,zookeeper 等都可以作为服务中心. ...

  10. JVM 输出 GC 日志导致 JVM 卡住，我 TM 人傻了

    本系列是 我TM人傻了 系列第七期[捂脸],往期精彩回顾: 升级到Spring 5.3.x之后,GC次数急剧增加,我TM人傻了:https://zhuanlan.zhihu.com/p/3970425 ...