实用！WinForm界面开发时，功能区表单美化操作指

实用！WinForm界面开发时，功能区表单美化操作指南

击“了解更多”获取工具

RibbonForm类代表一个功能区表单 - 一种嵌入ribbon control 并支持皮肤的表单。

RibbonForm类从XtraForm类派生而来，并共享其大多数功能，例如发光或阴影效果。与XtraForm不同，ribbon form的边框和标题栏始终为皮肤。

将Ribbon Forms添加到项目

将标准表单转化为Ribbon Forms

复合表单标题

增加边框宽度

嵌入Ribbon快速访问工具栏

嵌入状态栏

与BackstageView控件的交互

Ribbon显示模式选择器

支持Aero

将Ribbon Forms添加到项目

使用RibbonForm作为主要表单启动项目的最快方法是利用UI-ready DevExpress templates，实现基于Ribbon UI的所有模板都使用Ribbon Forms。

要添加新的Ribbon Forms，请在Visual Studio的Solution Explorer窗口中右键单击您的项目，然后选择"Add DevExpress Item | New Item..."，这将调用带有新项目模板的模板库，选择 "Ribbon Form"，输入表单名称然后点击"Add Item"。

将标准表单转化为Ribbon Forms

要将现有的默认表单替换为RibbonForms，请调用表单智能标签，然后选择"Convert to Ribbon Form" 选项。如果此操作还不包含RibbonControl和RibbonStatusBar 控件，则还将添加到您的窗体。

要在代码中执行相同的操作，只需将表单从System.Windows.Forms.Form派生的基类更改为DevExpress.XtraBars.Ribbon.RibbonForm，您还需要将DevExpress.XtraBars库添加到您的项目。

using DevExpress.XtraBars;

namespace DXApplication1 {
public partial class Form1 : RibbonForm {
public Form1() {
InitializeComponent();
}
}
}

VB.NET

Imports DevExpress.XtraBars

Namespace DXApplication1
Partial Public Class Form1
Inherits RibbonForm

Public Sub New()
InitializeComponent()
End Sub
End Class
End Namespace

复合表单标题

默认情况下，Ribbon Form的标题是分配给RibbonForm.Text属性的文本字符串。 RibbonControl 提供了两个字符串属性来覆盖此默认标题：RibbonControl.ApplicationCaption和RibbonControl.ApplicationDocumentCaption，第一个属性存储常量形式的标题，而第二个属性可以在代码中进行修改以显示当前所选MDI文档的标题。

可以在RibbonAppearances.FormCaption和RibbonAppearances.FormCaptionForeColor2属性的帮助下自定义两个标题字符串。要使用它们，请将DefaultBarAndDockingController添加到您的表单中，然后通过BarAndDockingController.AppearancesRibbon 属性访问所需的属性。

defaultBarAndDockingController1.Controller.AppearancesRibbon.FormCaption.ForeColor=Color.LightGray;
defaultBarAndDockingController1.Controller.AppearancesRibbon.FormCaptionForeColor2=Color.Lime;

VB.NET

defaultBarAndDockingController1.Controller.AppearancesRibbon.FormCaption.ForeColor=Color.LightGray
defaultBarAndDockingController1.Controller.AppearancesRibbon.FormCaptionForeColor2=Color.Lime

增加边框宽度

启用WindowsFormsSettings.FormThickBorder或WindowsFormsSettings.MdiFormThickBorder属性以扩大Ribbon Form边框并扩大调整大小区域。请注意，这些设置会影响应用程序中的所有XtraForms和RibbonForms。

如果关闭了阴影\发光效果，并且默认的窗体调整大小区域太小，则边框变大会使用户更容易调整窗体的大小。

嵌入Ribbon快速访问工具栏

如果您选择Quick Access Toolbar位于其父Ribbon上方，则该工具栏将显示在Ribbon Form的标题栏中。

嵌入状态栏

除了RibbonControl，Ribbon Form与RibbonStatusBar控件完美地集成在一起。状态栏还可以显示尺寸夹点元素，最终用户可以拖动该元素在两个方向上调整功能区表单的大小。

与BackstageView控件的交互

BackstageView Control 代表任何Ribbon的主应用程序菜单，这些Ribbon的RibbonControl.RibbonStyle未设置为“ Office2007”。后台菜单具有自己的样式，可以使用BackstageViewControl.Style属性对其进行更改。

在Office 2010样式中，后台菜单使窗体的标题栏和功能区页眉可见。

在Office 2013样式中，BackstageView控件占据了整个窗体。根据BackstageViewControl.BackstageViewShowRibbonItems属性的值，这种样式的Backstage菜单可以在其表面上显示Ribbon Form标题、按钮和Ribbon页面标题项目。

Ribbon显示模式选择器

当Ribbon Control为"Office 2013"样式时，Ribbon Form在标准的Minimize、Maximize和Close按钮旁边显示一个附加按钮。单击后，此按钮会弹出一个菜单，其中包含Ribbon Control可用显示模式。使用此菜单，用户可以将Ribbon切换到全屏模式或最小化Ribbon页面，只保留起标签页标题可见。

若要隐藏此按钮，请禁用RibbonControl.ShowDisplayOptionsMenuButton属性。

支持Aero

针对Windows Vista and 7，Ribbon Forms提供对Aero Glass效果的内置支持。如果您的应用程序在这些操作系统之一上运行，并且在系统设置中启用了Aero效果，则表单标题栏和边框将是半透明的，如下所示。

若要即使操作系统打开Aero界面也要禁用此效果，请将RibbonForm.AllowFormGlass属性设置为DefaultBoolean.False。在这种情况下，将根据当前选定的皮肤绘制表单边框和标题栏。

挑战30天在头条写日记#

HTML是一种用于创建网页结构和内容的标记语言，其中包含了许多标签，可以用于排版、布局和展示内容。本文将详细介绍HTML中的<tr>和<td>标签的使用方法，并通过示例展示如何创建表格。

1. <tr>标签的作用： <tr>标签代表HTML表格中的一行（行数据），它可以包含一个或多个<td>元素作为单元格。

2. <td>标签的作用： <td>标签用于定义表格中的一个单元格（列数据），可以包含文本、图像、链接等内容。

3. 如何使用<tr>和<td>： 在使用<tr>和<td>标签时，首先需要创建一个<table>元素作为表格的容器，然后在其中嵌套<tr>和<td>标签，如下所示：

htmlCopy code<table>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
  <tr>
    <td>单元格3</td>
    <td>单元格4</td>
  </tr>
</table>

4. 表格样式： 可以使用CSS来为表格添加样式，如设置边框、背景颜色等。以下是一个简单的示例：

htmlCopy code<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  td {
    border: 1px solid black;
    padding: 8px;
    text-align: center;
  }
</style>

5. 示例应用： 以下示例演示了如何使用<tr>和<td>标签创建一个包含姓名、年龄和城市的简单表格：

htmlCopy code<!DOCTYPE html>
<html>
<head>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
    }
    td {
      border: 1px solid black;
      padding: 8px;
      text-align: center;
    }
  </style>
</head>
<body>

<table>
  <tr>
    <td>姓名</td>
    <td>年龄</td>
    <td>城市</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>上海</td>
  </tr>
  <tr>
    <td>王五</td>
    <td>28</td>
    <td>广州</td>
  </tr>
</table>

</body>
</html>

6. 书籍参考：

"HTML and CSS: Design and Build Websites" by Jon Duckett
"Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics" by Jennifer Niederst Robbins

7. 总结： 通过本文的介绍，我们了解了HTML中<tr>和<td>标签的基本用法，以及如何创建简单的表格和添加样式。使用这些标签，我们可以轻松地创建具有结构和内容的网页表格，提升页面的可读性和可视性。

些一行代码大多数会是CSS规则中的一个声明。在某些情况下，选择器可能不只是一个简单的元素；在其他情况下，我会添加额外的声明作为建议以获得更好的体验，因此使它们不再严格意义上是一行代码——对于这些情况我提前道歉。

这些一行代码中的一些更多是个人选择，并不适用于所有网站（并非每个人都使用表格或表单）。我会简要描述每一个，它们的作用（附带示例图片），以及为什么我喜欢使用它们。请注意，示例图片可能会在前面例子的基础上进行构建。

以下是这些一行代码的作用概述：

限制视口内的内容宽度
增加正文文本大小
增加文本行之间的间距
限制图片宽度
限制内容中文本的宽度
以更平衡的方式包裹标题
表单控件颜色与页面样式匹配
易于跟随的表格行
表格单元格和标题的间距
减少动画和移动

限制视口内的内容宽度

body {
  max-width: clamp(320px, 90%, 1000px);
  /* 额外建议 */
  margin: auto;
}

添加这个一行代码将使内容大小占据视口的90%，将其宽度限制在320到1000像素之间（可以随意更新最小和最大值）。

这个改变将自动使您的内容看起来更好看。它将不再是一个庞大的文本块，而是看起来更有结构和组织。如果你还给body添加margin: auto;，内容将在页面上居中。两行代码让内容看起来好多了。

并排比较变化。左侧（之前）：一大块文本。右侧（之后）：两侧有内边距的文本。仍然很大但有更多空间。

对齐和包含的文本比一大堆文本看起来更好

增加文本大小

body {
  font-size: 1.25rem;
}

让我们面对现实：浏览器默认的16px字体大小是小的。虽然这可能是基于我变老的个人观点

一个快速的解决方案是增加body中的字体大小。由于级联和浏览器使用的em单位，网页上的所有文本将自动增大。

并排比较。左侧（之前）：带有文本的列。右侧（之后）：带有更大字体的文本列。

更大的文本大小使阅读更容易。

增加行间距

body {
  line-height: 1.5;
}

另一个提高可读性和打破可怕的文本墙的偏好是增加段落和内容中行与行之间的间距。我们可以轻松地用line-height属性做到这一点。

并排比较。左侧（之前）：带有文本的列。右侧（之后）：带有文本的列（间距更大）。

行间的空间打破了文本墙和白色的河流。

这个选择（与前两个一起）将显著增加我们页面的垂直大小，但我向你保证文本将更易读，对所有用户更友好。

限制图片大小

img {
  max-width: 100%;
}

图片的大小应该大致与它们将占据的空间相当，但有时我们会遇到真正长的图片，导致内容移位并创建水平滚动。

避免这种情况的一种方法是设置最大宽度为100%。虽然这不是一个万无一失的解决方案（边距和内边距可能影响宽度），但在大多数情况下它都能工作。

并排比较。左侧（之前）：图片溢出内容大小导致出现滚动条。右侧（之后）：图片调整到内容大小。

防止水平滚动并使图片与文本更好地流动

限制内容中文本的宽度

p {
  max-width: 65ch;
}

避免可怕的文本墙和空白河流的另一种策略是应用这种样式，即使与body中的最大宽度结合使用。这可能看起来不必要，有时甚至很奇怪，因为段落会比其他元素更窄。但我喜欢这种对比和较短的行。

60ch或65ch的值在过去对我很有效，但你可以使用不同的值并调整最大宽度以满足你的需求。在你的网页上玩耍和探索它的外观。

并排比较。左侧（之前）：文本占据整个宽度。右侧（之后）：文本占据大部分宽度。

将较大的文本块分成较小的块以提高可读性

以更平衡的方式包裹标题

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

标题是网页结构的重要部分，但由于它们的大小较大和内容较短，可能看起来很奇怪。特别是当它们占据多于一行时。一个有帮助的解决方案是使用text-wrap来平衡标题。

虽然balance似乎是text-wrap最流行的值，但它不是唯一的。我们也可以使用pretty，如果需要的话，它会将额外的一个词移到最后一行，而不是平衡所有内容。不幸的是，pretty目前还没有广泛的支持。

并排比较。左侧（之前）：一个标题占据两行，第二行只有1个词。右侧（之后）：标题占据宽度相似的两行。

平衡的换行可以改善可见性和可读性

表单控件颜色与页面样式匹配

body {
  accent-color: #080; /* 使用你喜欢的颜色 */
}

另一个小变化，虽然没有显著影响，但能让东西看起来更好。直到最近，我们还不能用CSS样式化原生表单控件，只能使用浏览器显示。但情况已经改变。

开发一个完整的组件可能很麻烦，但使用这个一行代码可以设置一个更接近网站其他部分和设计系统的颜色，这是可能的，而且很简单。

并排比较。左侧（之前）：表单控件是默认的蓝色。右侧（之后）：表单控件颜色与标题和链接颜色匹配（绿色）。

正是这些小细节（和颜色）让页面融为一体

易于跟随的表格行

:is(tbody, table) > tr:nth-child(odd) {
  background: #0001; /* 或者对于深色主题使用 #fff1 */
}

我们必须使用表格来显示数据，而不是用于布局。但默认情况下表格很丑，我们不希望数据看起来很丑。特别是，有一件事有助于组织数据并使其更易读，那就是有一个带有交替深浅行的斑马表格。

上面显示的一行代码使得实现这种样式变得容易。它可以简化为只有tr而不考虑tbody或table父元素，但这也会应用到表格头部，这可能不是我们想要的。这是一个品味问题。

并排比较。左侧（之前）：所有表格行都是白色的。右侧（之后）：偶数表格行略微深色。

更容易水平跟随数据（按行）

表格单元格和标题的间距

td, th {
  padding: 0.5em; /* 或 0.5em 1em... 或任何不为0的值 */
}

让表格更易访问和更易读的最后一个变化是通过给表格单元格和标题添加内边距来稍微间隔内容。默认情况下，大多数浏览器没有任何内边距，不同单元格的文本相互接触，使得区分一个单元格开始和另一个结束变得混乱。

我们可以更改内边距值以调整到我们喜欢的大小。然而，避免过度以防止不必要的滚动或太多空白空间。

并排比较。左侧（之前）：表格单元格文本内容完全在一起。右侧（之后）：表格单元格内容明显与其他表格单元格分开。

更容易水平和垂直跟踪数据

减少动画和移动

@media (prefers-reduced-motion) {
  *, *::before, *::after {
    animation-duration: 0s !important;
    /* 额外建议 */
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

好吧，好吧。这段代码远不止一行。它有一个一行版本（通过将动画持续时间设置为零秒来移除动画），但网页上还有其他使元素移动的东西。

通过在prefers-reduced-motion媒体查询中设置这些声明，我们将尊重用户选择减少移动的意愿。这种方法有些激进，因为它移除了所有移动，这可能不一定是用户的意图 - 它是"减少移动"而不是"无移动"。如果适当的话，我们仍然可以根据具体情况保留移动。

并排比较。左侧（之前）：一个图像在网页上移动。右侧（之后）：图像是静态的。

没有动画？没问题！

在线咨询

上一篇：2017不能错过的几款思维导图软件！
下一篇：如何快速将axure生成的原型放到手机上演示

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

实用！WinForm界面开发时，功能区表单美化操作指

将Ribbon Forms添加到项目

将标准表单转化为Ribbon Forms

复合表单标题

增加边框宽度

嵌入Ribbon快速访问工具栏

嵌入状态栏

与BackstageView控件的交互

Ribbon显示模式选择器

支持Aero

您的项目需求