最前面的话:Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便
一、目标样式
我们要实现上图中的效果,需要如下的操作:
1.从工具栏上的“Smobiler Components”拖动一个GaugeView控件到窗体界面上
2.修改GaugeView控件的属性
a.AxisLines属性
设置仪表盘轴线段,打开集合编辑器,并点击"添加",Color属性(仪表盘轴线段的颜色)和SplitNumRate属性(仪表盘轴线段占总线段的比例,取值0-1),如图1、图2;
b.AxisLineVisiable属性
设置是否显示仪表盘轴线,默认设置为“True”,如图3;
c.AxisLineWidth属性
设置仪表盘轴线宽度,将该属性设置为“4”,如图4;
图1 | 图2 | 图3 | 图4 |
d.AxisTickColor属性
设置仪表盘刻度线颜色,默认设置为“White”,如图5;
e.AxisTickLength属性
设置仪表盘刻度线长度,将该属性设置为“2”,如图6;
f.AxisTickSplitNum属性
设置仪表盘轴线内的分割刻度数,默认设置为“5”,如图7;
g.AxisTickVisiable属性
设置是否显示仪表盘刻度线,默认设置为“True”,如图8;
图5 | 图6 | 图7 | 图8 |
h.EndAngle属性
设置仪表盘结束角度,默认设置为“-45”,如图9;
i.Location属性
让控件显示在合适的位置(5, 37),如图10;
j.MaxValue属性
设置仪表盘最大值,将该属性设置为“150”,如图11;
k.MinValue属性
设置仪表盘最小值,默认设置为“0”,如图12;
图9 | 图10 | 图11 | 图12 |
l.PointerColor属性
设置指针颜色,将该属性设置为“255, 128, 128”,表示RGB颜色,如图13;
m.PointerLength属性
设置指针长度,将该属性设置为“40”,如图14;
n.PointerVisiable属性
设置是否显示仪表盘指针,默认设置为“True”,如图15;
o.PointerWidth属性
设置指针宽度,将该属性设置为“10”,如图16;
图13 | 图14 | 图15 | 图16 |
p.Size属性
设置控件的宽度和高度,将该属性设置为(108, 75),如图17;
q.SplitLineColor属性
设置仪表盘分割线颜色,默认设置为“White”,如图18;
r.SplitLineLength属性
设置仪表盘分割线长度,将该属性设置为“4”,如图19;
s.SplitLineVisiable属性
设置是否显示仪表盘分割线,默认设置为“True”,如图20;
图17 | 图18 | 图19 | 图20 |
t.SplitNum属性
设置仪表盘刻度的分割段数,默认设置为“10”,如图21;
u.StartAngle属性
设置仪表盘的起始角度,默认设置为“225”,如图22;
v.Text属性
设置仪表盘文本,将该属性设置为“2.3%”,如图23;
w.TextForeColor属性
设置仪表盘文本颜色,将该属性设置为“255, 128, 128”,表示RGB颜色,如图24;
图21 | 图22 | 图23 | 图24 |
s.Title属性
设置仪表盘标题,将该属性设置为“绩效完成率”,如图25;
y.TitleForeColor属性
设置仪表盘标题的文本颜色,默认设置为“Black”,如图26;
z.Value属性
设置仪表盘指针值,将该属性设置为“2.3”,如图27;
图25 | 图26 | 图27 |