YStudio Y++

YSS v1(Y++ Style Sheet)

Y++ / YStudio 开发文档 · 一点滴

写针对具体控件的 YSS 前,请先读窗体 XML 获取控件 名称 与 typeId,见 窗口 XML 参考。

YSS 用于描述窗体控件的视觉样式,属性名全部为英文,在代码中通过 加载YSS() / 应用YSS() 应用。

自动加载(默认关闭):设置 → 编译 →「YSS 自动加载」。关闭时,设计期打开窗体与运行时均不自动套用 资源/{窗体}.yss。开启后,资源目录或嵌入的 .yss 会自动套用。已从主题商店套用的「窗体主题包」不受此开关影响,运行时仍会带上主题样式。

快速上手

  1. 在工程「资源」目录创建 {窗体名}.yss(推荐),或勾选自动加载后依赖 exe 旁同名文件。
  2. 若未勾选「YSS 自动加载」,请在代码里 加载YSS("xxx.yss") / 应用YSS(...),或在设计器中套用「窗体主题包」。
  3. 窗体主题包:在主题商店给当前窗体选用主题即可;主题作底,你自己写的规则写在后面可以覆盖。不必再勾「YSS 自动加载」。
  4. 子目录主题 / 换肤用显式 加载YSS。

硬约束

  1. 属性名必须是英文(如 background-color),不要写中文属性键。
  2. 按名选择器用 XML 的 名称,不是 标题:button#按钮1 / #按钮1。
  3. 「YSS 自动加载」默认关闭;勾选后才自动加载 exe 旁 {窗体名}.yss。子目录主题 / 换肤用显式 加载YSS。
  4. :/img/a.png 相对 exe 根目录,与 .yss 是否在子目录无关。
  5. 布局弹簧、MessageBar 托盘等不做 YSS 选择器(见各分文档)。
  6. 命令签名:加载YSS / 应用YSS 见 basic-yss.md 与下文「运行时加载」。

分组件文档结构: 每篇按 属性 → 方法 → 事件 → YSS 样式 组织。

分组件文档(一组件一篇): 按钮 · 标签 · 文本框 · 超级文本框 · 图片框 · 分组框 / 卡片 · 组合框 · 单选框 · 复选框 · 开关 · 进度条 · 进度环 · 滑块 · 列表框 · 选项卡 · 树形视图 · 菜单栏 · 工具栏 · 表格 · 数据表格 · 画布 · 浏览器 · 日期选择器 · 颜色选择器 · 数值微调框 · 状态栏 · 分页 · 视频播放器 · 图表 · 消息条(支持库 API,非 YSS 选择器) · 气泡提示 · 托盘 · 完整示例见 样式演示_单选复选开关进度条.yss

快速开始

  1. 在工程 「资源」 目录放置 {窗体名}.yss(推荐),例如 资源/主窗口.yss
  2. 图片放在 「资源」 子目录,例如 资源/img/check-square.png
  3. F5 编译运行:资源会复制到 exe 同目录(img/ 等)
  4. 勾选「YSS 自动加载」后,启动会套用 exe 旁 {窗体名}.yss;未勾选则用 加载YSS(),或在设计器中套用窗体主题包
/* 资源/主窗口.yss */
button {
    border-radius: 4;
}

checkbox#复选框1 {
    indicator-size: 18;
    indicator-background-color: #2D2D30;
    indicator-border-color: #707070;
}

checkbox#复选框1:checked {
    checkmark-color: #00CC66;
    indicator-checked-image: :/img/check-square.png;
}
// 可选:子目录 YSS 或运行时换肤
函数 主窗口.创建 {
    加载YSS(":/yss/主题.yss")
}

文件位置

位置 说明
资源/{窗体名}.yss 推荐;F5 整棵复制到 exe 旁
窗口/{窗体名}/{窗体名}.yss 与窗口 XML 同目录;构建时也会参与生成
exe 旁 {窗体名}.yss 勾选「YSS 自动加载」时运行时套用;否则需 加载YSS
exe 旁 yss/xxx.yss 子目录样式,需 加载YSS("yss/xxx.yss")

语法

选择器 {
    属性名: 值;
}
  • 颜色:#RRGGBB 或不透明以外的 #RRGGBBAA(CSS 顺序:红绿蓝 + 透明度)。
    不要把 8 位写成 Windows 习惯的 #AARRGGBB(会把末两字节当成 alpha,例如 #FF252526 实际几乎全透明,下拉面板会「穿透」闪烁)。不透明请写 #252526 或 #252526FF。
    (画布 置像素 / 部分绘图 API 仍用 #AARRGGBB,见各控件文档,与 YSS 样式表不同。)
  • 布尔:true / false
  • 注释:// 行注释 或 /* 块注释 */
  • 数值:整数(单位一般为 DIP 像素)

选择器

写法 含义
button 该类型全部控件
button#按钮_确认 指定名称的按钮
#按钮_确认 指定名称(任意类型)
button:hover 悬停态规则块
checkbox:checked 复选框选中态
checkbox:indeterminate 复选框不确定态(三态)
tabwidget#导航 label 后代选择器(空格):名为「导航」的选项卡内部全部标签(任意深度)
card label 分组框/卡片内的标签(card≡groupbox)
card > label 子选择器:仅卡片的直接子标签
button#A, button#B 逗号列表:多选择器共享同一属性块

卡片可用 corner-brackets: true + corner-bracket-color 画四角 L 形装饰(赛博风)。

伪状态: :hover :pressed :focus :disabled :checked :indeterminate :on :off :default(selected 等同 pressed)

子控件: :item :tab :pane :chunk :handle :groove :drop-down :indicator(各组件支持的子控件见对应分文档)

:hover / :pressed 块中的 background-color、color 会映射为悬停/按下专用色,运行时随交互生效。

选择器索引(设计器组件 ↔ YSS 选择器)

设计器组件 YSS 选择器 文档
窗体 form / window / 窗体名 本文 窗体(form)选择器
按钮 button button.md
标签 label label.md
文本框 / 多行文本框 textbox textbox.md
超级文本框 supertextbox supertextbox.md
图片框 picturebox picturebox.md
分组框 groupbox groupbox.md
卡片(同分组框) card(≡ groupbox) groupbox.md
组合框 combobox combobox.md
单选框 radiobutton radiobutton.md
复选框 checkbox checkbox.md
开关 switch switch.md
进度条 progressbar progressbar.md
滑块 slider slider.md
列表框 listbox listbox.md
选项卡 tabwidget tabwidget.md
树形视图 treeview treeview.md
菜单栏 menubar menubar.md
工具栏 toolbar toolbar.md
表格 tablewidget tablewidget.md
数据表格 datagrid datagrid.md
画布 canvas canvas.md
浏览器 webbrowser webbrowser.md
日期选择器 datepicker datepicker.md
颜色选择器 colorpicker colorpicker.md
数值微调框 spinbox spinbox.md
状态栏 statusbar statusbar.md
进度环 progressring progressring.md
分页 pager pager.md
视频播放器 videoplayer videoplayer.md
图表 chart chart.md

按名称匹配时写 选择器#控件名称 或 #控件名称(名称与设计器/XML 中一致,如 按钮_确认)。


资源路径 :/

:/ 表示资源约定(相对 exe / 嵌入表),与 YSS 文件本身在 exe 根目录还是子目录无关。 磁盘上的 读文件 / 加载DLL 请写相对工程根(如 "cfg.ini"),不要和 :/ 混用,也不必 合并路径(取程序目录(), …)。

写法 解析为(exe 在 D:\app\)
:/img/xx.png D:\app\img\xx.png
:/yss/demo.yss D:\app\yss\demo.yss
yss/demo.yss(相对路径) D:\app\yss\demo.yss
主窗口.yss D:\app\主窗口.yss

示例: YSS 在 exe/yss/demo.yss,图片在 exe/img/xx.png,YSS 内仍写:

indicator-checked-image: :/img/xx.png;

部署(F5 / 发布):

  • 工程「资源」目录整棵复制到 exe 旁(资源/img/a.png → exe旁/img/a.png)
  • 发布目录 发布/{架构}/{Debug|Release}/ 同样包含 img/、*.yss 等样式资源
  • 若 exe/img/... 不存在,会再尝试兼容旧路径 exe/resources/img/...

设计器预览: :/ 解析为工程「资源」目录;打开窗口设计视图时会自动尝试加载 资源/{窗体名}.yss。


窗体(form)选择器

form / window / 主窗口 可写窗体外壳样式(运行时生效):

form {
    background-color: #1C1C1E;
    background-gradient-color: #2A2A2A; /* 可选:客户区第二色(双色) */
    background-gradient: #90CAF9, #B8D9F8, #FFFFFF; /* 或多停(最多 8) */
    background-gradient-direction: vertical;
    title-bar-color: #0D47A1;
    title-bar-gradient-color: #1565C0; /* 标题栏水平渐变第二色 */
    border-radius: 16;
    title-bar-height: 36;
    caption-button-style: macos; /* 或 windows */
    show-title-bar: true;
    always-on-top: false;
    backdrop: acrylic; /* none / acrylic / mica / tabbed */
}
属性 说明
background-color / background 设置客户区背景色;background 为简写,如 #1C1C1E。
background-gradient-color 设置客户区渐变第二色(与 background-color 组成双色线性渐变;空=纯色)。
background-gradient / background-gradient-stops 设置客户区多停渐变,逗号分隔色(最多 8;会同步首/末到双色槽)。
background-gradient-direction 设置渐变方向:vertical / horizontal(或 垂直 / 水平)。
border-radius / corner-radius 设置窗外框圆角(像素);会裁剪 HWND。
border-color / frame-border-color 设置窗外框边框颜色,如 #007ACC。
border-width / frame-border-width 设置窗外框边框宽度(DIP),如 2。
show-border / frame-border 设为 true 时绘制外边框。
title-bar-height 设置自绘标题栏高度(像素),如 36;仪表盘建议 40。
scanlines 设为 true 时在客户区叠加 CRT 水平扫描线。
scanline-color 扫描线颜色,如 #000000。
scanline-opacity 扫描线不透明度 1–100(默认 6)。
scanline-spacing 扫描线间距像素(约 1–16,默认 2)。
fx-rings 静态同心环底纹:N #color radiusPct,如 5 #00E5FF18 78。
fx-phase-ms / particle-field / particle-physics / noise-texture / fx-orbs / pulse-waves / rgb-shift / glow-breathe / fx-blur / fx-blur-live / border-gradient / window-glow 窗体/控件场景特效;语法见下一节。窗外发光半径上限 10px。
opacity / form-opacity / window-opacity 整窗不透明度 1–100(仅 form)。
control-opacity / content-opacity 全部控件绘制不透明度 1–100(仅 form;不改列表索引/进度值等复用槽)。
backdrop-filter 写在 form 上时:blur(Npx)(N 约 1–64)。通透模式下加重霜雾与底板雾感;glass-compositing: system 时配合系统材质。写在控件上仍为示意高光。
glass-compositing / glass-mode 仅 form:see-through(分层通透,可看穿桌面)/ system(系统亚克力/云母)/ auto(默认:有 opacity 或 backdrop-filter 时走通透)。
backdrop-tint-opacity / glass-tint-opacity 仅 form:通透底板着色强度 1–100;不写则按 opacity / backdrop-filter 自动估算。
title-bar-color / caption-color 设置标题栏底色;空则随客户区。
title-bar-gradient-color / caption-gradient-color 设置标题栏水平渐变第二色;空则纯色。
title-bar-image / caption-image 设置标题栏背景图(铺满标题栏;叠在色/渐变之上)。
show-title-bar / title-bar 设为 true 时显示自绘标题栏。
maximize-box / show-maximize / maximize-button 设为 true 时显示最大化按钮。
minimize-box / show-minimize / minimize-button 设为 true 时显示最小化按钮。
close-box / show-close / close-button 设为 true 时显示关闭按钮。
caption-button-style / title-button-style 设置标题按钮风格:windows 右侧线框,macos 左侧交通灯。
backdrop / backdrop-style / background-material 设置系统材质:none / acrylic(毛玻璃)/ mica(云母)/ tabbed。
acrylic 设为 true 时等价于 backdrop: acrylic。
always-on-top / topmost 设为 true 时窗口置顶。
title / window-title 设置窗口标题文本。
visible 设为 true / false 显示或隐藏窗口。
left / top / width / height 设置窗口位置与外框尺寸(像素)。

上表与设计器窗口 XML(最大化按钮、边框色等)对齐,均可在运行时用 YSS / 应用YSS 改写。代码侧也可 主窗口.最大化按钮 = 假 等属性(若支持库已暴露)。

窗体场景特效

语法通式:多数键为三元组 N [#颜色] [速度或半径];写 true 用默认;写 none / 0 关闭。
仅 form 生效:particle-field / particle-physics / particle-mode / particle-gravity / fx-orbs / fx-rings / pulse-waves / window-glow / opacity(form-opacity)/ control-opacity / 窗体级 backdrop-filter / glass-compositing / backdrop-tint-opacity / 窗体级 noise-texture(写在 button 上会被忽略;button 的 outer-glow 仍是控件外发光)。
两种毛玻璃用法(勿混用圆角材质耳,见下节):
- 通透玻璃(可看穿桌面):glass-compositing: see-through; + opacity + 可选 backdrop-filter: blur(Npx) + backdrop-tint-opacity;控件再配 control-opacity 与底板 #RRGGBBAA。
- 系统材质:glass-compositing: system; + backdrop-filter: blur(Npx) 或 backdrop: acrylic|mica;整窗 opacity 仍可单独淡化。
控件霜面 vs 实时高斯:控件 fx-blur / backdrop-filter 默认是面板霜雾示意;写 fx-blur-live / realtime-blur / gaussian-blur 则对窗体底板快照做多通模糊(近似实时高斯)。
纹理噪声:noise-texture(别名 film-grain / texture-noise)可写在 form 或控件上。
不是:真实 3D 网格;「3D」指控件 text-3d 浮雕字。

form {
    /* 动画周期(毫秒),影响粒子/光球/呼吸相位 */
    fx-phase-ms: 4800;

    /* 粒子场:密度(约 20–200)  颜色(可带 alpha)  速度 */
    particle-field: 120 #a8e8ff66 52;

    /* 物理粒子(重力/弹性);也可 particle-physics: true 叠在已有 particle-field 上 */
    particle-physics: 90 #a8e8ff88 48;
    particle-gravity: 42;

    /* 窗体胶片噪声:强度 0–100  颜色(可带 alpha) */
    noise-texture: 28 #ffffff22;

    /* 漂浮光球:数量  颜色  半径 */
    fx-orbs: 5 #00e5ff44 36;

    /* 同心环:数量  颜色  半径百分比(相对客户区) */
    fx-rings: 4 #7c3aed33 72;

    /* 窗外发光(亦可写 window-glow / window-glow-color / window-glow-size;半径上限 10px) */
    outer-glow: true;
    outer-glow-color: #00e5ffaa;
    outer-glow-size: 8;

    /* 通透玻璃:分层看穿桌面 + 霜雾权重 + 底板着色 */
    glass-compositing: see-through;
    opacity: 78;
    control-opacity: 88;
    backdrop-filter: blur(28px);
    backdrop-tint-opacity: 48;

    /* 若改用系统亚克力(二选一):
    glass-compositing: system;
    backdrop-filter: blur(24px);
    border-radius: 0;
    */

    /* 边框呼吸强度 0–100 */
    glow-breathe: 42;

    /* 脉冲波:层数  颜色 */
    pulse-waves: 2 #ff2ec433;

    /* 边框多停渐变(叠在 border-color 上) */
    border-gradient: #00e5ff88, #7c3aed66, #ff2ec455;

    /* 可选:色差偏移 0–8;柔焦 0–32(稀疏样本) */
    /* rgb-shift: 2; */
    /* fx-blur: 8; */

    scanlines: true;
    scanline-opacity: 8;
}

控件侧常用视觉键:

button#主 {
    outer-glow: true;
    outer-glow-color: #00e5ffaa;
    outer-glow-size: 12;
    skew-x: 10;                 /* 水平斜切,机甲感 */
    background-gradient: #00e5ff, #7c3aed;
}
label#标题 {
    text-glow: true;
    text-glow-color: #00e5ff;
    text-glow-size: 4;
    text-3d: true;              /* 浮雕字,非真 3D */
}
button#玻璃 {
    /* 控件实时高斯(对窗体底板快照模糊;别名 realtime-blur / gaussian-blur) */
    fx-blur-live: 16;
    noise-texture: 22 #ffffff33;
}
card, groupbox {
    box-shadow-layers: 0 0 18 #7c3aed33, 0 6 14 #00000044;
    corner-glow: #4ADE80;
    corner-brackets: true;
}

/* 半透明卡片 + 毛玻璃高光(`fx-blur` / `backdrop-filter: blur(Npx)`) */
card#面板 {
    background-color: #12182acc;
    border-radius: 16;
    fx-blur: 16;
    backdrop-filter: blur(16px);
}

完整样板:窗体主题包与 docs/examples/ 下的 YSS 演示文件。

圆角 + 亚克力(直角耳)

Win10 上 不要同时 开 border-radius > 0 与 backdrop: acrylic|mica:分层圆角窗四角会露出不透明直角「耳朵」。推荐:

  • 要自定义圆角霓虹边 → backdrop: none(或省略),用渐变、粒子、扫描线做氛围
  • 要系统毛玻璃 → border-radius: 0(Win11 可用系统圆角,但不是你写的 14px)

设计器会按「圆角优先」处理冲突;工程里仍建议二选一,避免 XML 残留 背景材质=acrylic。

窗体主题包 vs 手写 YSS

  • 从主题商店给当前窗体选用主题:主题规则在前作底,你自己写的规则在后可覆盖
  • 「合并应用」保留手写;「整文件替换」会清空用户段
  • 可卸载:主题商店 →「移除当前窗体主题」;只去掉主题,手写规则保留

主题变量(:root / var(--*))

:root {
    color-scheme: light; /* 或 dark:种子化未手写的 --bg/--fg/--bar 等 */
    --accent: #1E88E5;
    --cta: #43A047;
}

form {
    title-bar-color: var(--accent);
}

button#按钮体检 {
    background-color: var(--cta);
    color: #FFFFFF;
}

button#按钮体检:hover {
    background-color: var(--cta, #66BB6A); /* 可选 fallback */
}
  • 仅 :root / root 块中以 -- 开头的属性会成为变量
  • color-scheme: light|dark(也可写在 form)会种子化未声明的壳 token:--bg --bg2 --fg --muted --accent --accent-deep --title-start --title-end --bar --bar-hover --border --cta --cta-hover --dropdown
  • 任意属性值可写 var(--name) 或 var(--name, fallback)
  • 换肤:另写一套 .yss(改 :root / color-scheme)再 加载YSS / 应用YSS

@import

@import "shell_tokens.yss";
@import url("themes/dark.yss");

form {
    title-bar-color: var(--title-start);
}
  • 相对路径相对当前.yss 所在目录(资源 URL :/… 也可)
  • 顶层语句;最多嵌套 8 层;循环引用会被跳过
  • 设计器 loadFile 与运行时 加载YSS 均支持
form {
    background-color: #2A2A2A;
    border-color: #007ACC;
    border-width: 2;
    maximize-box: false;
    caption-button-style: windows;
}

通用属性速查

下表是外壳通用属性清单:各控件按类型取子集使用(并非每个选择器都支持全部键)。按钮、标签、文本框等「富外壳」控件通常可用大半;组合框 / 日期选择器 / 数值微调框等以本表 chrome 键 + 分文档专用键为准;浏览器 / 画布 / 数据表格等往往只有背景与边框。

picturebox 排除文字/字体类: 图片框不支持 color、font-size、font-family、font-bold、font-italic、text-align 及文字渐变/发光/立体字等;运行时会忽略这些键。详见 picturebox.md。具体控件以分文档「属性说明」为准。

属性 说明 典型值
color 设置文字(前景)颜色。 #F5F5F5
text-align 设置文字水平对齐:left / center / right。 center
background background-color 的简写。 #3E3E42
background-color 设置控件底板背景色。 #3E3E42
border-color 设置边框颜色。 #5A5A5A
border-width 设置边框宽度(像素)。 1
border-radius 设置圆角半径(像素)。 6
show-border 设为 true 时绘制边框。 true
transparent-background 设为 true 时不铺底板色。 true
font-size 设置字体大小(像素)。 14
font-family 设置字体族名称。 "Microsoft YaHei UI"
font-bold 设为 true 时使用粗体。 true
font-italic 设为 true 时使用斜体。 false
opacity 设置整体不透明度,范围 0–100。 90
background-gradient-color 设置背景渐变第二色(与背景色组成双色渐变)。 #2A2A2A
background-gradient 设置多停色列表(窗体真多停;控件≥3 色真多停)。 #A,#B,#C
background-gradient-direction 设置背景渐变方向:vertical / horizontal。 vertical
text-gradient-color 设置文字渐变第二色。 #00BFFF
text-gradient-direction 设置文字渐变方向:horizontal / vertical。 horizontal
text-glow 设为 true 时启用文字发光。 true
text-glow-color 设置文字发光颜色。 #00BFFF
text-glow-size 设置文字发光半径(像素)。 4
outer-glow 设为 true 时启用外发光(控件外轮廓光晕)。 true
outer-glow-color 设置外发光颜色。 #007ACC
outer-glow-size 设置外发光大小(像素)。 5
shadow 设为 true 时启用阴影。 true
shadow-color 设置阴影颜色。 #000000
shadow-blur 设置阴影模糊半径;0 且 offset≠0 时自动硬阴影。 12
shadow-offset-x 设置阴影水平偏移(像素)。 0
shadow-offset-y 设置阴影垂直偏移(像素)。 4
shadow-style 阴影风格:soft(柔边,默认)/ hard(不透明偏移,无模糊;新粗野/像素)。 hard
inner-shadow 设为 true 或颜色时启用内阴影(凹下感);:pressed 可单独设。 true
inner-shadow-color 内阴影颜色。 #000000
inner-shadow-blur 内阴影深度(像素,约 0–32)。 6
box-shadow-layers 多层外阴影,逗号/分号分隔;每层 ox oy blur #color,可含 inset。 0 2 8 #0003, 0 12 24 #0002
inner-shadow-layers 多层内阴影,语法同 box-shadow-layers(默认 inset)。 0 1 2 #0004, 0 4 8 #0003
clip-corner / clip-corners 斜切/切角边框:12 或 TL TR BR BL(像素)。 10 / 8 12 8 12
border-bevel / border-bevel-color 斜面高光描边颜色。 #FFFFFF88
border-bevel-width 斜面高光线宽(像素)。 1
text-3d 设为 true 时启用立体字效果。 true
text-3d-dark-color 设置立体字暗部颜色。 #202020
text-3d-depth 设置立体字深度(像素)。 4
padding-left / top / right / bottom 设置单侧内边距(像素)。 6
hover-color 设置 :hover 时文字颜色。 #FFFFFF
hover-text-color 同 hover-color(复选框等别名)。 #FFFFFF
hover-background-color 设置 :hover 时背景颜色。 #008CDC
pressed-color 设置 :pressed 时文字颜色。 #FFFFFF
pressed-background-color 设置 :pressed 时背景颜色。 #005A9E
focus-border-color 设置 :focus 时边框颜色。 #007ACC
focus-background-color 设置 :focus 时背景颜色。 #1E1E1E
focus-glow-color 设置 :focus 时光晕颜色。 #007ACC
disabled-color 设置 :disabled 时文字颜色。 #888888
disabled-background-color 设置 :disabled 时背景颜色。 #3A3A3A
border-style 边框线型:solid / dashed / dotted / dash-dot / underline(仅底边,按钮等)。 solid
outline-color / outline-width 设置焦点描边颜色与宽度。 #007ACC / 2
box-shadow 设为 true 时启用阴影(配合 shadow-*)。 true

边距与内边距

属性 说明
padding 内边距简写:8 / 8 12 / 8 12 8 12(上 右 下 左)。
padding-left / top / right / bottom 设置内容区单侧内边距(像素)。
margin 外边距简写,语法同 padding。
margin-left / top / right / bottom 设置绘制区域单侧外边距(在控件矩形内缩进背景)。

复选框 / 单选框专用(indicator)

分文档:checkbox.md · radiobutton.md。示例样式见 examples/。

属性 作用 范围 / 备注
indicator-size 指示器宽高(复选方框边长 / 单选外径) 8–48
indicator-spacing 指示器与文字间距 0–64;pill 忽略
indicator-radius 指示器圆角;单选设后改圆角矩形(0=像素方点) 0–24
indicator-style 单选:default 圆点 / pill 胶囊选中 / none 隐藏圆点 仅 radiobutton
indicator-background-color 未选中(或外环)填充色 #2D2D30
indicator-border-color 指示器描边色 #707070
indicator-checked-background-color 选中时单色填充(复选;单选方点可用) #9B6FD0
indicator-background-gradient 选中时指示器渐变(≥2 色,逗号分隔);覆盖单色选中底 #FFB020, #FF5722
checkmark-color 复选勾号色 #00CC66
mark-color 单选选中中心点色(勿用 :checked { color } 代替) #007ACC
indeterminate-color 复选三态不确定横条色 #FFB020
indicator-checked-image / checked-image 选中态图片 :/img/on.png
indicator-unchecked-image / unchecked-image 未选中态图片 :/img/off.png
indicator-indeterminate-image / indeterminate-image 不确定态图片 :/img/dash.png
hover-indicator-border-color 悬停时指示器边框色 #0096FF
hover-indicator-background-color 悬停时指示器填充色 #3A3A3E

伪态注意: 复选 :checked { background-color; color } → 指示器选中底 / 勾号色;单选 :checked { background-color; color } → 外壳(胶囊),圆点用 mark-color。


运行时加载

完整命令签名见 basic-yss.md。

(自动)

  • 签名:—
  • 说明:窗体启动加载 exe 旁 {窗体名}.yss

加载YSS

  • 签名:逻辑 加载YSS([文本 文件路径=""])
  • 说明:从 .yss 文件加载并应用到当前窗体;返回真=成功。
  • 参数一│[文本 文件路径=”“]: 省略则加载 exe 旁「主窗口.yss」;支持相对 exe 路径与 :/…

应用YSS

  • 签名:逻辑 应用YSS(文本 样式文本)
  • 说明:将 YSS 规则文本直接应用到当前窗体;推荐 R"(...)" 原始字符串。
  • 参数一│文本 样式文本: 规则文本;空或格式错误返回假
加载YSS()
加载YSS(":/yss/主题.yss")
加载YSS("yss/demo.yss")
应用YSS(R"(button#按钮1 { background-color: #2ecc71; })")

两层样式机制:

  1. form_yss_ext.bin(F5 自动生成):复选/单选等指示器扩展,启动自动加载
  2. 完整 .yss 文件:外壳与控件样式;可用 加载YSS() 换肤

易错对照

错误 正确
#确定 用按钮标题 #按钮1 用 XML「名称」
背景色: #fff background-color: #FFFFFF;
YSS 在 yss/ 下写 img/a.png 写 :/img/a.png
只拷 exe 不带 .yss/img F5/发布目录整棵资源一起带
布局控件写 layout { … } 期望生效 布局/弹簧不走 YSS

设计器

  • 打开窗口 XML 进入设计视图时,自动尝试加载 资源/{窗体名}.yss 或 窗口/{窗体名}/{窗体名}.yss
  • 编辑 .yss 文件并保存后,若当前在设计视图且与窗口同名,会即时刷新预览
  • 设计器中 :/ 路径解析为工程「资源」目录

常见问题

Q:F5 后双击发布目录的 exe 没有样式?
A:确认 exe 旁存在 主窗口.yss、img/ 等文件;仅复制 exe 而不带资源无效。Debug 模式也可直接运行编译缓存目录中的 exe(该目录在 F5 时同样会部署资源)。

Q::/img/xx.png 和 YSS 子目录的关系?
A::/ 始终相对 exe 根目录。YSS 在 yss/demo.yss 时,图片仍写 :/img/xx.png,不要写相对于 YSS 文件的路径。

Q:还需要写 加载YSS() 吗?
A:勾选「YSS 自动加载」且 exe 旁有 {窗体名}.yss 时会自动套用;否则请 加载YSS(),或在设计器中套用窗体主题包。

Q:复选框图片不显示?
A:检查 资源/img/... 是否在 F5 后出现在 exe 旁 img/;YSS 中路径是否为 :/img/文件名.png。