實用！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

您的項目需求