项目背景

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

    nslookup:command not found的解决办法 通过nslookup查看DNS记录,在这里遇到了一个小插曲,nslookup:command not found(未找到命令),是因为新 ...

  2. 栈在go语言中实现，及解决388.文件的最长绝对路径的思路

    今天在LeetCode刷每日一题,遇到了388. 文件的最长绝对路径的思路,这道题让我想到了系统的目录是栈结构,果然在题解中找到了栈的解法(暴力半天没出来,跑去看题解了QWQ). 所以我就捎带复习了一 ...

  3. 被迫开始学习Typescript —— vue3的 props 与 interface

    vue3 的 props Vue3 的 props ,分为 composition API 的方式以及 option API 的方式,可以实现运行时判断类型,验证属性值是否符合要求,以及提供默认值等功 ...

  4. 吊炸天，Spring Security还有这种用法！

    在用Spring Security项目开发中,有时候需要放通某一个接口时,我们需要在配置中把接口地址配置上,这样做有时候显得麻烦,而且不够优雅.我们能不能通过一个注解的方式,在需要放通的接口上加上该注 ...

  5. 面试官：BIO、NIO、AIO是什么，他们有什么区别？

    哈喽!大家好,我是小奇,一位热爱分享的程序员 小奇打算以轻松幽默的对话方式来分享一些技术,如果你觉得通过小奇的文章学到了东西,那就给小奇一个赞吧 文章持续更新 一.前言 书接上回,感觉上次的公司氛围不 ...

  6. Hibernate基础入门2

    HQL与Criteria HQL(Hibernate Query Language)-官方推荐面向对象的查询语言,与SQL不同,HQL中的对象名是区分大小写的(除了JAVA类和属性其他部分不区分大小写 ...

  7. TyepScript学习

    前提 JS缺陷 (1)变量频繁变换类型,类型不明确难以维护 TS定义 (1)定义 以JavaScript为基础构建的语音,一个JavaScript的超集,扩展js添加了类型, 可以在任何支持js的平台 ...

  8. UNION 与 UNION ALL 的区别

    UNION:合并查询结果,并去掉重复的行. UNION ALL:合并查询结果,保留重复的行. 举例验证说明: 创建两个表:user_info 和 user_info_b,设置联合主键约束,联合主键的列 ...

  9. vue项目经常遇到的Error: Loading chunk * failed

    vue项目随着代码量.业务组件.路由页面等的丰富,出于性能要求考虑不得不使用代码分割技术实现路由和组件的懒加载,这看似没什么问题 当每次通过npm run build构建生产包并部署到服务器后,操作页 ...

  10. vue-cli2.x配置build命令构建测试包&正式包

    项目开发中常分为开发环境.测试环境.正式环境 通过vue-cli或者@vue/cli脚手架搭建的项目默认提供了开发环境和正式环境的配置.可通过js获取当前域名或其他信息来判断当前为测试环境还是正式环境 ...