1. 程式人生 > 實用技巧 >DevExpress Winforms介面開發,帶你瞭解Visual Studio Palette Editor!

DevExpress Winforms介面開發,帶你瞭解Visual Studio Palette Editor!

下載DevExpress v20.1完整版

DevExpress文件控制元件公開課第一彈報名通道開啟,40分鐘教你入門(Spreadsheet)控制元件!

DevExpress Winforms Controls內建140多個UI控制元件和庫,完美構建流暢、美觀且易於使用的應用程式。

向量面板的引入為面板引擎帶來了第二個創新:調色盤,調色盤基本上是面板的面板。邊框寬度、大小和可見性等元素設定儲存在面板中,而顏色主題則移動到調色盤中,這意味著同一面板可以有無數種顏色變化。

當前有兩種DevExpress向量外觀,每個外觀都有一組唯一的調色盤。 Office 2019 Colorful面板附帶7個調色盤,Bezier面板甚至有42個調色盤。

當然,仍然有您可能要使用自己的調色盤的原因:

  • 反映您的企業品牌
  • 對現有調色盤進行小的修改
  • 為了容納與標準調色盤完全不同的調色盤,例如黑白或特定的高對比度配色方案

要建立自定義調色盤,您可以執行Skin Editor,然後按F7鍵。 出現一個對話方塊,您可以在其中更改開箱即用的調色盤的單獨顏色或建立獨特的新調色盤。

從左側的列表中選擇一種顏色時,預覽會突出顯示用該顏色繪製的UI元素。 通過此功能,您可以瞭解面板如何使用顏色,並輕鬆檢視各個專案之間的區別,例如Brush Light和Brush High。要應用使用Skin Editor建立的調色盤,您需要建立一個裝配並將其包括在您的專案中。

第二種選擇是從程式碼新增或修改調色盤。

// obtain a vector skin reference
var commonSkin = CommonSkins.GetSkin(LookAndFeel);
// create a new palette
var svgPalette = new SvgPalette();
// set up palette colors
svgPalette.Colors.Add(new SvgColor("Paint", Color.FromArgb(242, 242, 242)));
svgPalette.Colors.Add(new SvgColor("Paint High", Color.FromArgb(255, 255, 255)));
svgPalette.Colors.Add(new SvgColor("Paint Shadow", Color.FromArgb(222, 222, 222)));

// replace the default color palette with a custom one
commonSkin.SvgPalettes[Skin.DefaultSkinPaletteName].CustomPalette = svgPalette;
LookAndFeelHelper.ForceDefaultLookAndFeelChanged();

// OR add a new palette
commonSkin.CustomSvgPalettes.Add(new SvgPaletteKey(
commonSkin.CustomSvgPalettes.Count, "Glacier"), svgPalette);

使用基於程式碼的方法不需要額外的裝配,但是您沒有視覺化反饋 - 只有經驗豐富的使用者才能確切知道每種顏色的作用以及如何對顏色值進行硬編碼。

在版本v19.1中,添加了Visual Studio Palette Editor,開啟Project Settings page,然後單擊調色盤庫旁邊的Edit按鈕,出現一個與外觀編輯器中的對話方塊類似的對話方塊,其中包括互動式預覽和說明每種顏色的文字提示。

您也可以從接近您要求的標準調色盤開始,然後根據需要更改某些顏色。

與Skin Editor相比,重要的區別在於Visual Studio Palette Editor將您的工作以XML格式儲存到專案中的App.config檔案中,這使得維護和共享調色盤定義變得容易,而無需額外的程式集引用。


DevExpress技術交流群2:775869749歡迎一起進群討論