开关控件SwitchEx
SwitchEx 是一个功能丰富的开关控件,支持多种样式、形状、颜色自定义等功能。适用于状态切换、设置选项等场景
SwitchEx 开关控件
控件名称
SwitchEx
中文名称
开关控件
控件优点
SwitchEx 是一个功能丰富的开关控件,支持多种样式、形状、颜色自定义等功能。适用于状态切换、设置选项等场景。
主要特性
- 多种样式:支持发光字体、中心指示灯、拨动开关、简洁样式四种样式
- 多种形状:支持默认圆角和带弧度角方形两种形状
- 颜色自定义:支持自定义开启/关闭状态的颜色、边框颜色、外壳颜色
- 文本显示:支持显示开启/关闭文本
- 动画效果:支持滑块切换动画(可配置速度)
- 阴影效果:支持可配置的阴影效果(可关闭)
- 背景透明:支持透明背景
- 数据绑定:实现 INotifyPropertyChanged 接口
重要参数说明
基本属性
| 属性名 |
类型 |
默认值 |
说明 |
State |
bool |
false |
开关状态 |
Style |
SwitchStyle |
Style1 |
开关样式 |
Shape |
SwitchShape |
Default |
开关形状 |
开关样式(SwitchStyle)
| 样式值 |
说明 |
Style1 |
样式1:发光字体 |
Style2 |
样式2:中心圆指示灯 |
Style3 |
样式3:拨动开关样式 |
Style4 |
样式4:简洁样式(无外壳无阴影) |
开关形状(SwitchShape)
| 形状值 |
说明 |
Default |
圆角型(圆角半径为高度的一半) |
Round |
带弧度角方形(固定圆角半径) |
颜色属性
| 属性名 |
类型 |
默认值 |
说明 |
OnColor |
Color |
(0, 191, 165) |
开启状态颜色 |
OffColor |
Color |
(166, 166, 166) |
关闭状态颜色 |
OnTextColor |
Color |
(0, 191, 165) |
开启文本颜色 |
OffTextColor |
Color |
(166, 166, 166) |
关闭文本颜色 |
ThumbColor |
Color |
White |
滑块颜色 |
ShellColor |
Color |
(220, 220, 220) |
外壳填充色 |
ShellBorderColor |
Color |
(140, 140, 140) |
外壳边框颜色 |
InnerColor |
Color |
(220, 220, 220) |
内层主体填充色 |
InnerBorderColor |
Color |
(140, 140, 140) |
内层主体边框颜色 |
ThumbBorderColor |
Color |
(180, 180, 180) |
滑块边框颜色 |
文本属性
| 属性名 |
类型 |
默认值 |
说明 |
OnText |
string |
"ON" |
开启文本 |
OffText |
string |
"OFF" |
关闭文本 |
TextFontSize |
int |
9 |
字体大小 |
外观属性
| 属性名 |
类型 |
默认值 |
说明 |
OuterSpacing |
int |
6 |
外层间隔 |
CornerRadius |
int |
0 |
圆角半径(0表示自动) |
ShowShadow |
bool |
true |
是否显示阴影 |
ShadowColor |
Color |
(60, 0, 0, 0) |
阴影颜色(Alpha值控制透明度) |
ShadowOffsetX |
int |
2 |
阴影水平偏移 |
ShadowOffsetY |
int |
3 |
阴影垂直偏移 |
滑块图标属性(Style1、Style3 和 Style4 支持)
| 属性名 |
类型 |
默认值 |
说明 |
ThumbIconSvgName |
string? |
null |
滑块上的SVG图标名称 |
ThumbIconSvgColor |
Color |
Color.Empty |
滑块图标颜色,未设置时使用默认颜色(黑色) |
ThumbIconSvgRotation |
float |
0 |
滑块图标的旋转角度(度) |
ThumbIconSize |
int |
0 |
滑块图标的大小(像素),0表示自动计算(滑块大小的60%) |
动画属性
| 属性名 |
类型 |
默认值 |
说明 |
AnimationDuration |
int |
500 |
动画持续时间(毫秒,越大越慢) |
重要事件
| 事件名 |
说明 |
StateChanged |
状态改变时触发 |
PropertyChanged |
属性值改变时触发 |
使用示例
基本使用
// 创建开关
SwitchEx switch1 = new SwitchEx();
switch1.Size = new Size(80, 30);
this.Controls.Add(switch1);
// 状态改变事件
switch1.StateChanged += (sender, e) =>
{
Console.WriteLine($"开关状态:{switch1.State}");
};
不同样式
// 样式1:发光字体(默认)
switch1.Style = SwitchStyle.Style1;
// 样式2:中心圆指示灯
switch2.Style = SwitchStyle.Style2;
// 样式3:拨动开关样式
switch3.Style = SwitchStyle.Style3;
// 样式4:简洁样式(无外壳无阴影)
switch4.Style = SwitchStyle.Style4;
不同形状
// 默认圆角形状
switch1.Shape = SwitchShape.Default;
// 带弧度角方形
switch2.Shape = SwitchShape.Round;
switch2.CornerRadius = 4;
颜色自定义
// 设置颜色
switch1.OnColor = Color.Green;
switch1.OffColor = Color.Gray;
switch1.OnTextColor = Color.White;
switch1.OffTextColor = Color.DarkGray;
switch1.ThumbColor = Color.White;
自定义文本
// 设置文本
switch1.OnText = "开启";
switch1.OffText = "关闭";
switch1.TextFontSize = 10;
阴影效果设置
// 关闭阴影
switch1.ShowShadow = false;
// 自定义阴影
switch1.ShowShadow = true;
switch1.ShadowColor = Color.FromArgb(100, 0, 0, 0);
switch1.ShadowOffsetX = 3;
switch1.ShadowOffsetY = 4;
边框和填充色设置
// 设置外壳颜色
switch1.ShellColor = Color.LightGray;
switch1.ShellBorderColor = Color.Gray;
// 设置内层颜色
switch1.InnerColor = Color.White;
switch1.InnerBorderColor = Color.DarkGray;
// 设置滑块边框颜色
switch1.ThumbBorderColor = Color.Silver;
动画速度设置
// 设置动画速度(越大越慢)
switch1.AnimationDuration = 800; // 800毫秒
切换状态
// 切换开关状态
switch1.State = !switch1.State;
// 设置为开启
switch1.State = true;
// 设置为关闭
switch1.State = false;
数据绑定
// 属性改变事件
switch1.PropertyChanged += (sender, e) =>
{
if (e.PropertyName == nameof(SwitchEx.State))
{
Console.WriteLine($"开关状态已更改:{switch1.State}");
}
};
// 绑定到数据源
switch1.DataBindings.Add("State", dataSource, "IsEnabled");
注意事项
- 样式选择:不同样式适用于不同场景,可根据需求选择
- 圆角半径:CornerRadius 为 0 时根据 Shape 自动计算
- 点击切换:点击控件任意位置都会切换状态
- 动画效果:状态切换时有平滑的滑块动画