你的位置:首页 > ASP.net教程

[ASP.net教程].Net语言 APP开发平台——Smobiler学习日志:如何在手机上开发仪表盘控件


最前面的话: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;

AxisLines属性AxisLines属性AxisLineVisiable属性AxisLineWidth属性
图1图2图3图4

d.AxisTickColor属性

设置仪表盘刻度线颜色,默认设置为“White”,如图5;

e.AxisTickLength属性

设置仪表盘刻度线长度,将该属性设置为“2”,如图6;

f.AxisTickSplitNum属性

设置仪表盘轴线内的分割刻度数,默认设置为“5”,如图7;

g.AxisTickVisiable属性

设置是否显示仪表盘刻度线,默认设置为“True”,如图8;

AxisTickColor属性AxisTickLength属性AxisTickSplitNum属性AxisTickVisiable属性
图5图6图7图8

h.EndAngle属性

设置仪表盘结束角度,默认设置为“-45”,如图9;

i.Location属性

让控件显示在合适的位置(5, 37),如图10;

j.MaxValue属性

设置仪表盘最大值,将该属性设置为“150”,如图11;

k.MinValue属性

设置仪表盘最小值,默认设置为“0”,如图12;

EndAngle属性Location属性MaxValue属性MinValue属性
图9图10图11图12

l.PointerColor属性

设置指针颜色,将该属性设置为“255, 128, 128”,表示RGB颜色,如图13;

m.PointerLength属性

设置指针长度,将该属性设置为“40”,如图14;

n.PointerVisiable属性

设置是否显示仪表盘指针,默认设置为“True”,如图15;

o.PointerWidth属性

设置指针宽度,将该属性设置为“10”,如图16;

PointerColor属性PointerLength属性PointerVisiable属性PointerWidth属性
图13图14图15图16

p.Size属性

设置控件的宽度和高度,将该属性设置为(108, 75),如图17;

q.SplitLineColor属性

设置仪表盘分割线颜色,默认设置为“White”,如图18;

r.SplitLineLength属性

设置仪表盘分割线长度,将该属性设置为“4”,如图19;

s.SplitLineVisiable属性

设置是否显示仪表盘分割线,默认设置为“True”,如图20;

Size属性SplitLineColor属性SplitLineLength属性SplitLineVisiable属性
图17图18图19图20

t.SplitNum属性

设置仪表盘刻度的分割段数,默认设置为“10”,如图21;

u.StartAngle属性

设置仪表盘的起始角度,默认设置为“225”,如图22;

v.Text属性

设置仪表盘文本,将该属性设置为“2.3%”,如图23;

w.TextForeColor属性

设置仪表盘文本颜色,将该属性设置为“255, 128, 128”,表示RGB颜色,如图24;

SplitNum属性StartAngle属性Text属性TextForeColor属性
图21图22图23图24

s.Title属性

设置仪表盘标题,将该属性设置为“绩效完成率”,如图25;

y.TitleForeColor属性

设置仪表盘标题的文本颜色,默认设置为“Black”,如图26;

z.Value属性

设置仪表盘指针值,将该属性设置为“2.3”,如图27;

Title属性TitleForeColor属性Value属性
图25图26图27

二、手机效果显示

手机效果显示