项目背景

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

    安装 全局安装这个库 npm-check-updates,因为后续依靠它来实现更新 package.json 中包的版本号 yarn global add npm-check-updates 食用 看 ...

  2. 【深入理解计算机系统CSAPP】第六章 存储器层次结构

    6 存储器层次结构 存储器系统(memory system)是一个具有不同容量.成本和访问时间的存储设备的层次结构.CPU 寄存器保存着最常用的数据.靠近 CPU 的小的.快速的高速缓存存储器(cac ...

  3. Spring Security之简单举例

    核心功能 Spring Security提供了三个核心的功能: 认证(你是谁) 授权(你能干什么) 攻击防护(防止伪造身份) 一个简单例子 默认情况 在前面的开发中,都是将spring securit ...

  4. 771. Jewels and Stones - LeetCode

    Question 771. Jewels and Stones Solution 题目大意:两个字符串J和S,其中J中每个字符不同,求S中包含有J中字符的个数,重复的也算 思路:Set记录字符串J中的 ...

  5. 数据库与MySQL的下载使用

    目录 数据存储演变史 数据库应用发展史 数据库本质 数据库分类 关系型数据库 非关系型数据库 SQL与NoSQL MySQL简介 版本问题 下载使用 目录结构 基本使用 简单使用 系统服务 修改密码 ...

  6. css属性补充与JS数据类型

    目录 溢出属性(overflow) 定位(position) z-index属性 opacity不透明度 JavaScript简介 变量与注释 数据类型 数值(Number) 字符串(String) ...

  7. Prometheus普罗米修斯快速入门

    欢迎来到普罗米修斯! Prometheus是一个监控平台,通过从监控目标的抓取HTTP端点上获取指标. 本指南将展示如何使用和安装Promethues,配置和监视第一个资源.还将下载并安装导出器Exp ...

  8. Docker 与 K8S学习笔记（二十三）—— Kubernetes集群搭建

    小伙伴们,好久不见,这几个月实在太忙,所以一直没有更新,今天刚好有空,咱们继续k8s的学习,由于我们后面需要深入学习Pod的调度,所以我们原先使用MiniKube搭建的实验环境就不能满足我们的需求了, ...

  9. Linux Cgroup v1(中文翻译)(1)：Control Group

    英文原文:https://www.kernel.org/doc/html/latest/admin-guide/cgroup-v1/cgroups.html 1 控制组 1.1 什么是控制组? 控制组 ...

  10. FlinkSQL 之乱序问题

    乱序问题 在业务编写 FlinkSQL 时, 非常常见的就是乱序相关问题, 在出现问题时,非常难以排查,且无法稳定复现,这样无论是业务方,还是平台方,都处于一种非常尴尬的地步. 在实时 join 中, ...