DevExpress+Winfrom使用HTML+CSS创建个性化界面

小白快来

已于 2024-07-02 15:55:24 修改

阅读量420

点赞数 4

分类专栏： Winfrom 文章标签： html c#

于 2024-06-24 17:43:51 首次发布

本文链接：https://blog.csdn.net/asd157398/article/details/139929880

版权

Winfrom 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前言

最近在尝试学习DevExpress控件库来提高自己的桌面程序编程水平（包括界面审美水平，毕竟使用原生的winfrom设计出来的程序界面还是蛮单调的），在学习DevExpress Demo期间发现他能通过HTML+CSS设计出像网页程序一样相当漂亮的界面，遂迫不及待想学习此技术来提升自己，顺便记录一下过程，看能否帮到其他想学习或正在学习此控件的小伙伴。

结论

先说结论，创建DirectX From确实能通过修改HtmlTemplate来实现界面的个性化设计，但限制较多，个人看来属于吃力不讨好的鸡肋功能，毕竟在时间开发中不可能在界面设计上耗费大量时间精力。

使用限制

我使用的DevExpress版本为23.1.4.0，在使用DirectX From加上我在网络上下载的前端模板来实现界面个性化设计的过程发现其以下限制

HtmlTemplate Editor 无法识别个别节点（如<from>表单，因为我下载的模板是登录模板），导致界面无法正常显示
HTML编辑器必须包含id为frame 和 content的节点，否则提示(Invalid Htmlremplate)，无法显示内容（我当时就是把模板的HTML内容部分直接拷贝上去，就直接报错）
CSS编辑内容无法识别CSS动画。

等于说是纯HTML+CSS来渲染界面，还需要相关参数设置，传参，图片添加到集合，再到HTML里头去取出来，然后还有数据传递需要编写后台事件等，想完成一个完整界面工作量还是挺大的。光是HTML+CSS这部分就劝退我，不能直接套模板，对于一个前端知识不太行的我来说这太难了。

具体操作

不管怎么说，多会一点设计方式，还是很不错的，技多不压身，下面开始讲具体如何操作。

在visual studio 新建一个DevExpress v23,1 WinForms App Template Gallery项目
在选择窗体时选择DirectX From，如图
找到新建窗体的HtmlTemplate属性，点击进入htmlTemplate编辑器，如下图
在DevExpress内置的模板库中随意选择了一个模板，但是无法正常显示模板样式，这便是因为限制中的第2点，缺少id
将id-frame 和content 补齐，效果如图

后续只需将html内{xxx}的参数按照名称一一对应绑定即可。

20240702更新

因打算使用DevExpress重构刚毕业使用原生Winfrom编写的桌面程序（实在是太丑了），打算使用DirectXForm升级一下之前写的软件的登录界面，让它更好看点，正好更新一下此博客。

先看原来的登录界面，是不是看起来不怎么好看

然后我百度搜索了html+css登录模板，然后AI直接给我示例了一个模板，将其复制到txt，更改拓展名为html查看，感觉还不错，便决定就用它了。HTML代码如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
<style>
  body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
  }
  .login-container {
    width: 300px;
    padding: 40px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  }
  .login-container h2 {
    text-align: center;
    margin-bottom: 20px;
  }
  .form-group {
    margin-bottom: 15px;
  }
  .form-group label {
    display: block;
    margin-bottom: 5px;
  }
  .form-group input[type="text"],
  .form-group input[type="password"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box; /* Makes sure the padding does not affect the total width of the input */
  }
  .form-group input[type="submit"] {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 4px;
    background-color: #5cb85c;
    color: white;
    cursor: pointer;
  }
  .form-group input[type="submit"]:hover {
    background-color: #4cae4c;
  }
</style>
</head>
<body>
 
<div class="login-container">
  <h2>Login</h2>
  <form action="">
    <div class="form-group">
      <label for="username">Username:</label>
      <input type="text" id="username" name="username" required>
    </div>
    <div class="form-group">
      <label for="password">Password:</label>
      <input type="password" id="password" name="password" required>
    </div>
    <div class="form-group">
      <input type="submit" value="Login">
    </div>
  </form>
</div>
 
</body>
</html>

效果图如下

开始操作

1.新建DXForm然后选择当前窗体，更改它的HTMLTemplate属性。更改时你会看到原来的Form格式模板，如果想保留窗体的特征也可省略此步骤

<dx-form-frame id="frame">
    <dx-form-titlebar id="titlebar">
        <dx-form-icon id="icon"></dx-form-icon>
        <dx-form-text id="text"></dx-form-text>
        <dx-form-minimizebutton id="minimizebutton"></dx-form-minimizebutton>
        <dx-form-maximizebutton id="maximizebutton"></dx-form-maximizebutton>
        <dx-form-closebutton id="closebutton"></dx-form-closebutton>
    </dx-form-titlebar>
    <dx-form-content id="content"></dx-form-content>
</dx-form-frame>

以上代码块中的每一个Id都是框架唯一的，如果在我们使用时重复了上面的Id就会报错

2.在左侧工具栏搜索HtmlContentControl并将它添加到directXFormContainerControl中，将其大小设置合适

3.选中HtmlContentControl 更改它的HTMLTemplate属性,直接复制上面的HTML代码，有一些标签DevExpress不认，因此我们需要改一改，具体代码和图例如下。

HTML

<div class="login-container">
  <h2>Welcome</h2>
  <div>
    <div class="form-group-textbox">
      <input class="input" value='${Username}' name="username" >
    </div>
    <div class="form-group-textbox">
      <input class="input" value='${Password}' name="password">
    </div>
    <div class="form-group-loginBtn">
     	Login
    </div>
  </div>
</div>

CSS

 body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    margin: 0;
  }
  .login-container {
    width: 320px;
    padding: 60px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  }
  .login-container h2 {
    text-align: center;
    margin-bottom: 20px;
  }
  .form-group {
    margin-bottom: 15px;
  }

.input {
	flex-grow: 1;
	width: 100%;
	background-color: @Window;
}

  .form-group-textbox,
  .form-group-textbox {
 	margin-bottom: 15px;
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
  
  }
  .form-group-loginBtn {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 4px;
    background-color: #5cb85c;
    color: white;
    font-size: 18px;
  	text-align: center;
    cursor: pointer;
  }
  .form-group:hover {
    background-color: #4cae4c;
  }

完整效果图