项目背景

公司业务历史悠久且复杂，数据库的表更是多而繁杂，每次基于老业务做功能开发都需要去翻以前的表和业务代码。需要理解旧的表的用途以及包含的字段的含义，表少还好说，但是表一多这就很浪费时间，而且留下来的文档都是残缺不全，每次查一些表的含义都要捯饬很久。在网上搜索关于数据库文档管理工具搜到最多的就是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. c++：-7

    上一节主要学习C++中的函数模版.数据结构以及排序查找操作:c++:-6,本节学习C++的范型程序设计和STL: 范型程序设计 编写不依赖于具体数据类型的程序 将算法从特定的数据结构中抽象出来,成为通 ...

  2. vscode编写的程序中文乱码怎么办？

    (以下教程在源码文件的编码是utf-8的基础上进行!) (dev的源码文件是GBK编码,或者是GB2312?我现在好久没用dev,关于dev的信息可能有错误. 如果拿dev编写的代码用vscode打开 ...

  3. 《Unix 网络编程》08：基本UDP套接字编程

    基本UDP套接字编程 系列文章导航:<Unix 网络编程>笔记 UDP 概述 流程图 recvfrom 和 sendto #include <sys/socket.h> ssi ...

  4. script标签crossorigin属性及同源策略和跨域方法

    首先介绍(同源策略) 同源策略是浏览器最核心且基本的安全约定,要求协议.域名.端口都相同为同源,如果非同源时请求数据浏览器会在控制台抛出跨域异常错误,同源策略是浏览器的行为,即使客户端请求发送了,服务 ...

  5. 最短路之 Dijkstra 算法

    普通的 Dijkstra 这是一种运用贪心的单源最短路算法,就是求从一个节点出发,到任意一个点的最短距离 首先我们要一个图 假设要求从 1 开始的单源最短路 dis[] 表示最短路数组, vis[] ...

  6. .NET C#基础（7）：接口 - 人如何和猫互动

    0. 文章目的   面向有一定基础的C#初学者,介绍C#中接口的意义.使用以及特点. 1. 阅读基础   了解C#基本语法(如定义一个类.继承一个类)   理解OOP中的基本概念(如继承,多态) 2. ...

  7. C语言：如何给全局变量起一个别名？

    作 者:道哥,10+年嵌入式开发老兵,专注于:C/C++.嵌入式.Linux. 关注下方公众号,回复[书籍],获取 Linux.嵌入式领域经典书籍:回复[PDF],获取所有原创文章( PDF 格式). ...

  8. 4.怎么理解相互独立事件？真的是没有任何关系的事件吗？ 《zobol的考研概率论教程》

    1.从条件概率的定义来看独立事件的定义 2.从古典概率的定义来看独立事件的定义 3.P(A|B)和P(A)的关系是什么? 4.由P(AB)=P(A)P(B)推出"独立" 5.从韦恩 ...

  9. Tensor的向量化

    向量化操作是指可以在同一时间进行批量地并行计算,例如矩阵运算,以达到更好效率的一种方式. 尽量使用向量化直接对Tensor操作,避免低效率的for循环对元素逐个操作.

  10. 关于一次Web线下面试的思考

    前言: 今天面试一家Web前端的公司,由于跟初筛的面试官关系挺好,按理来说我在第一次线上面试就应该被淘汰了(呜呜呜),接下来是线下面试,不出意外的话,我凉了.但是这些天的面试经验并非全无收获.我的线下 ...