WinForm框架開發 - 自定義控件開發的調試、D

WinForm框架開發 - 自定義控件開發的調試、DesignMode的狀態處理

開發Winform程序的時候，我們往往需要根據需要做一些自定義的控件模塊，這樣可以給系統模塊重復利用，或者實現更好的效果等功能。但在使用的時候，我們又往往設計時刻發現一些莫名其妙的錯誤，那么我們該如何進行控件的設計時刻的開發調試呢，如何解決碰到設計時刻出現的錯誤呢？本文主要介紹我自己在這方面積累的一些經驗和處理方法，期望對大家有幫助。

DevExpress Universal Subscription官方最新版免費下載試用，歷史版本下載，在線文檔和幫助文件下載-慧都網

1. 自定義控件的設計錯誤產生

例如我的通用附件模塊里面，有一個自定義控件，需要提供給外部使用的，如下所示。

這里外部使用的模塊，是工作流里面的一個模塊，也是一個自定義控件，我想把它作為一個流程信息的展示控件。

因此就想把這個附件管理的自定義控件拖動到另外一個自定義控件流程信息展示控件里面，設計的流程信息管理的界面如下所示，這個時候，使用這個附近控件是沒有問題的，正常拖動到另外一個控件里面。

編譯整個項目，左邊的VS工具箱會出現一個ApplyControl的自定義控件，但是當我拖動該控件到新的窗體界面里面的時候，錯誤就出現了。

這個問題可能是因為調用了訪問數據庫的操作，但是更加詳細的位置我們看不太清楚（數據給截斷顯示了）。

2. 基于Visual Studio控件的調試

為了更好跟蹤到錯誤的發生的地方，我們可以用VS自帶的調試操作來進行跟蹤。

首先我們在項目的【屬性】-》【調試】里面設置啟動操作為指定的VS，選擇“啟動外部程序”為對應版本的VS的IDE程序，如下所示。

啟動調試后，打開對應的這個項目，然后再次模擬從工具箱里面拖動控件的效果，這樣VS IDE就能定位到具體的位置了。

我們發現VS定位到一個綁定數據的數據庫訪問操作里面去，但是我開始一直不明白，這個BindData的操作，其實已經是通過指定了設計時刻不進行的了（!this.DesignMode），不知道為什么還繼續。

public void BindData()
{
ClearData();

if (!this.DesignMode)
{
List<FileUploadInfo> fileList=new List<FileUploadInfo>();
if (!string.IsNullOrEmpty(this.AttachmentGUID))
{
fileList=BLLFactory<FileUpload>.Instance.GetByAttachGUID(this.AttachmentGUID, this.pager1.PagerInfo);
}
else
{
fileList=BLLFactory<FileUpload>.Instance.GetAllByUser(this.UserId, this.AttachmentDirectory, this.pager1.PagerInfo);
}

..........................

3. DesignMode的重載，問題解決

調試到這個DesignMode的時候，它的值竟然是false，那么肯定就會去從數據庫獲取了，而設計時候去找數據，這個時候就出錯了。至于為什么會是DesignMode為false，開始有點搞不太清楚，不是說好設計時刻為True的嗎？

通過搜索，發現有位仁兄總結的比較精辟，這里就借用一下。

也就是說一個控件只有在它自己被拖拽到設計器的時候，其 DesignMode 才是真，如果它被包含在其他控件中被加入到設計器，那么那個控件才是在設計模式，而它不是！換句話說，DesignMode 并不能反映當前環境是否是運行時，它只能告訴你，這個控件當前是不是直接被設計器操作（嵌套的已經不算了） ?！?/span>

那解決方法應該如何呢，其實也很簡單，就是重寫下這個DesignMode的屬性為我們期望的值即可，如下所示。

/// <summary>
/// 標題：獲取一個值，用以指示 System.ComponentModel.Component 當前是否處于設計模式。
/// 描述：DesignMode 在 Visual Studio 產品中存在 Bug ，使用下面的方式可以解決這個問題。/// </summary>
protected new bool DesignMode
{
get
{
bool returnFlag=false;
#if DEBUG
if (System.ComponentModel.LicenseManager.UsageMode==System.ComponentModel.LicenseUsageMode.Designtime)
{
returnFlag=true;
}
else if (System.Diagnostics.Process.GetCurrentProcess().ProcessName.ToUpper().Equals("DEVENV"))
{
returnFlag=true;
}
#endif
return returnFlag;
}
}

重新編譯控件，然后測試拖動，操作正常，再無出錯，搞定！

DevExpress

DevExpress Universal 10月正式發布今年第二個重大版本——v21.2，此版本正式官宣支持Visual Studio 2022 & .NET6，同時與微軟最新發布的Windows 11完美兼容，全面解決用戶各種使用場景問題。與時俱進，從未止步！

本文轉載自：博客園 - 伍華聰

面可視化搭建工具業界的輪子

無論大公司還是小公司，我們開發前端工程時候，項目工程又很多類似的功能或者頁面，開發經常是加班加點搬磚去做一些無成長反復操作的工作，看鍵盤上 Ctrl 鍵已經被磨掉了漆，C 和 V 也馬上磨白了，那對于開發如何把這些重復的工作用機器去解決？在前端資源緊缺的情況下，是否可直接有工具直接就可以搭建出我想要的前端頁面？于是業界的頁面可視化搭建工具就出現了，本文會介紹目前最流行的頁面可視化搭建工具，也會提供一些業界開源的可視化搭建項目供大家參考（Copy）。

1 頁面可視化搭建簡介

編程開發頁面：動態邏輯頁面分解為 HTML Tree, Data 和 Dynamic Logic. 前端開發工程師開發前端頁面的過程, 本質上是用編程工具(IDE)對頁面的 HTML Tree, Data 和 Dynamic Logic 進行增刪和修改.

頁面可視化搭建：是用可視化交互的方式對頁面的 HTML Tree, Data 和 Dynamic Logic 進行增刪和修改, 從而實現頁面的生成. 頁面可視化搭建工具是實現頁面可視化編輯的軟件工具

目的：任何工具的存在都是更高效地解決問題. 頁面可視化搭建工具, 用于解決頁面生成的效率問題. 可能前端工程師會覺得最有效率的頁面生成方式是打代碼, 但有搭建頁面需求的不只是前端工程師. 而可視化頁面搭建工具, 恰恰是面向"就缺一個前端工程師"的人員, 用于提升他們生成頁面的效率.

差異點	編程開發頁面	可視化搭建頁面
技能要求	需要編程基礎	可以沒有編程基礎
操作方式	在代碼編輯器中編寫代碼	在可視化搭建工具中拖拉/填表/編寫代碼

2 業界調研（20+）

項目名稱	項目簡介	能解決什么
百度amis（開源）	前端低代碼框架，通過 JSON 配置就能生成各種后臺頁面，極大減少開發成本，甚至可以不需要了解前端	不需要懂前端就能做出專業且復雜的后臺界面，不受前端技術更新的影響，可以完全使用可視化頁面編輯器來制作頁面
政采云-魯班（未開源）	魯班是一個基于業務組件快速生成頁面的搭建系統（站點、頁面、組件、數據、權限），JSON Schema將業務轉成數據→將數據轉為定義→將定義規范成結構	提升用戶體驗：頁面采用靜態化方案，渲染及訪問速度更快；提高穩定性：采用 Nginx 直接轉發的方案，頁面路由可用性保障及響應性能更具優勢，同時支持更健壯的容災方案，支持快速發版、回滾。；快速響應業務需求：通過組件化復用，能夠快速響應業務需求、提高研發人效；更好的業務賦能：使得產品、運營等同學也能參與頁面的搭建，提升業務迭代效率和數據可用性。；更好的系統化能力：基于搭建系統，便于橫向和性能檢測系統、穩定性保障系統、運維部署系統、線上監控系統進行打通，形成系統級合力、復利。
淘寶-imgcook（未開源）	由設計稿一鍵智能生成代碼Skecher、ps、圖片、原型圖通過算法UI智能識別表達式轉成DSL，再解析DSL為前端頁面	還原設計稿；Skecher、ps、圖片、原型圖直接生成代碼；精準還原；所見所得生；成代碼可維護強；機器智能識別理解；DSL / Plugin可自定義
阿里-iceluna、Paas	配置生成搭建描述協議 - 標準規范 - Schema再生成頁面及邏輯、低代碼編輯器 - 開發生態	改變生產關系，提升生產力（賦能）- 中后臺通用搭建產品--所有人；降低研發成本（提效）- 低代碼開發平臺--開發人員（工程創建、開發、調試、發布全鏈路）；孵化領域產品（搭建生態）- PaaS平臺--開發人員（基礎設施，基于標準搭建協議生產搭建物料，為各業務場景提供搭建服務的運行和開發環境）
阿里-云鳳蝶（未開源）/pipeline （類似開源）	像做PPT一樣去做web前；頁面 Data 編輯	支持頁面 Data 編輯, 面向運營、產品人員, 編輯自由度為無嵌套的組件.；目前制作運營、活動頁面功能上最好的工具.；提供頁面搭建的模板, 并支持自定義模板.；配置表單基于 Schema 生成, 配置表單操作功能完善.
阿里-飛冰（未開源）/vue-layout（類似開源）	Component Tree 編輯；針對中后臺開發人員；針對組件化的頁面, 主要實現 Component Tree 的可視化編輯. 其核心功能在于頁面布局設計: 在 UI 組件列表中選擇合適的組件, 通過拖拉的方式將組件嵌入到頁面中, 生成帶布局和樣式的頁面.	支持 Component Tree 編輯, 面向中后臺開發人員, 編輯自由度為無嵌套的組件；使用"物料-區塊", 非前端開發人員可以快速搭建出可用、符合規范的頁面.；頁面以源碼方式輸出.；前端服務化的一種方式.
淘寶-天馬（未開源）	跨端頁面搭建	跨終端搭建頁面；面向標準數據研發schema.json；對模塊的props入參描述；數據標準化；數據驅動展示；編寫模塊代碼（解耦、模塊既代碼）；打包每個模塊單獨打包；從頁面視角seed動態加載；跨終端的緩存方案（phone tm tb緩存副本、對應訪問、代碼標識）；服務端渲染SSR
淘寶-方舟	設計實現toC營銷搭建	終端秒開；采用前端優化手段實現終端秒開
阿里媽媽-淘積木（未開源）	從基礎組件搭建完整的營銷頁面的方案設計
阿里@維奇	文檔即代碼;文檔轉換成部分代碼
阿里alist /Formily（開源）	Formily 表單方案作為搜索區域的不二之選時，通過對這些方案的整合，可以快速實現標準化的列表場景。;同時AList支持 JSON Schema 協議渲染，可通過數據驅動快速開發。	內置Formily作為搜索區域方案，性能及功能強大;支持 Ant Design/Fusion Next 組件體系;支持JSON Schema 數據驅動方案;副作用邏輯獨立管理，涵蓋各種復雜聯動校驗邏輯;支持各種復雜布局方案
京東-MPM（未開源）	采用ComData的數據配置方式解析成前端頁面，是本系統的核心，7PageData 是??的抽象描述層	搭建物料豐富:MPM 現有 30+ 個組件、500+ 個模板，業務能?覆蓋商品、導購、營銷等多個場景。配置功能強?:三端渲染是 MPM 的強?能?，除此之外，MPM 還?持??配置 BI 排序、?動化埋點、?動化測試、??測速等。系統能?全?:MPM 為??保駕護航，不但配備了流暢的拖拽編輯器、實時預覽和??健康診斷能?，還對系統和??做了全??的監控和容災降級?案。
美團魔方（未開源）	從基礎組件搭建完整的營銷頁面的方案設計
美團樂高（未開源）	從基礎組件搭建完整的營銷頁面的方案設計
esview(模仿樂高開源）	Drag vue dynamic components to build your page，generate vue code.	esview開源項目, 模仿美團點評的樂高.完整的可視化頁面搭建框架, 面向中后臺開發人員.頁面布局結果看起來比較亂, 自定義組件寫法比較詭異; 沒有融合業務邏輯, 不支持在框架中寫頁面的代碼邏輯.
Element UI表單設計及代碼生成器（開源）	Element UI表單設計及代碼生成器，可將生成的代碼直接運行在基于Element的vue項目中；也可導出JSON表單，使用配套的解析器將JSON解析成真實的表單。
Vue-Layout（開源）	從基礎組件搭建完整的營銷頁面的方案設計基于UI組件的Vue可視化布局、生成.vue代碼的工具。https://github.com/JakHuang/form-generator	支持 Component Tree 編輯, 面向中后臺開發人員, 編輯自由度為可嵌套的組件.頁面的拖拉生成, 實現得很完整.用于頁面設計, 所以偏向頁面元素的樣式控制.技術文章對可視化搭建工具數據流有深刻理解: 可視化在線編輯器架構設計.
gaea-editor（開源）	開源項目.支持 Component Tree 編輯, 面向中后臺開發人員, 編輯自由度為可嵌套的組件.頁面的拖拉生成, 實現得很完整.用于頁面設計, 所以偏向頁面元素的樣式控制.技術文章對可視化搭建工具數據流有深刻理解: 可視化在線編輯器架構設計.
pipeline（開源）	運營/產品活動頁面
gengen（開源）	根據接口生成頁面，減少重復性工作
H5.cn	https://www.ih5.cn/not-logged-in
Brick Design（開源）	拖拽區塊內可直接編輯,生成前端頁面并預覽
百度H5（未開源）	https://h5.bce.baidu.com/docs/intro營銷活動頁面搭建
其他（開源）	1.website-builder 2.site-builder 3.VvvebJs 4.grapesjs 5.Maha 6.有贊微頁面 7.X-Page-Editor-Vue

3 業界調研要點總結

基于對以上頁面可視化搭建工具調研，業界有很多看法，拿出兩個比較有代表性的文章供大家參考：

基于現代的前端框架，為什么沒有成熟的支持控件拖拽布局，并可以自動生成前端代碼的設計器出現？
前端服務化——頁面搭建工具的死與生

以上調研了那么多業界比較牛的前端可視化的框架工程，大致思路是類似的，百家爭鳴，盡管阿里的飛冰云鳳蝶很完善了但還是存在以下兩點問題：

無法自動生成交互邏輯
只能在受限、具體的業務場景下發揮作用

這兩個問題存在就會導致我們生產設計出來的東西需要low code，如果是low code開發人員不愿意用，因為生成的代碼不易維護且臃腫；如果給非開發人員用，他們又不會寫代碼，一點代碼都不想寫，所以他們也不愿意用；

而我們站在巨人的肩膀上，能否把上面兩個問題解決呢？目前我沒有什么好的辦法，但是我們可以先去把他們實現思路研究明白，才有可能去處上面的最難以解決的問題。

3.1 業界的工具總結要點

相通之處	不同之處	可借鑒之處	應該避免問題	開源代碼可借鑒
1、DSL方式解析拖拽或者配置好的偽代碼生成所需前端頁面，大部分使用的是JSON Schema形式；2、從配置要生成頁面整個處理步驟類似	1、處理方法不同；2、定義的DSL字段不同；3、優化程度不同；4、針對的業務場景不同	1、從配置到生成DSL方式的偽代碼再到如何解析最后生成前端頁面的整體架構設計及思想可借鑒；2、如何定時DSL字段schema的模式，如何處理轉移編譯打包上線及優化	1、定位準用戶群；2、后期維護問題	1、百度amis（開源可借鑒 react）2、vue-layout（類似飛冰開源 vue） 3、pipeline （類似飛冰開源 react）4、美團樂高（可參考 vue）5、美團魔方（可參考react 6、esview(模仿樂高開源) 7、Brick Design（開源可借鑒 react） 8、gen（開源）9、gaea-editor（開源） 10、阿里alist/Formily（開源）11、魯班H5(開源)

3.2 DSL方式

JSON Schem數據結構特點：

扁平化
樹狀化

demo1：

{
  "type": "object",
  "properties": {
    "$attr": {
      "type": "object",
      "properties": {
        "hidden": {
          "type": "boolean"
        }
      }
    },
    "$theme": {
      "type": "object",
      "properties": {
        "themeColor": {
          "type": "string"
        }
      }
    },
    "items": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          “itemId”: {
            "type": "string"
          }
        }
      }
    }
  }
}
復制代碼

demo2：

在線咨詢

上一篇：很多網站變成灰色，怎么做到的？
下一篇：CSS之字體圖標知多少

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

WinForm框架開發 - 自定義控件開發的調試、D