Smobiler实现app的主页——C# 或.NET Smobiler实例开发手机app（三） - 好文

其实在写这篇文章的时候，我已经成功的将代码打包成apk的安装包了并且在手机上安装成功了，但是目前我这个掌上川电的app生活服务功能还未实现。这里只是展示下如何使用控件布局，如果您有更好的想法完全可大胆尝试哦，有兴趣了解一下打包的可以直接跳到本文末尾，点击链接直通车。

目录

一、本文目标
<https://blog.csdn.net/qq_41647999/article/details/83626267#%E4%B8%80%E3%80%81%20%E6%9C%AC%E6%96%87%E7%9B%AE%E6%A0%87>

二、准备工作
<https://blog.csdn.net/qq_41647999/article/details/83626267#%E4%BA%8C%E3%80%81%20%E5%87%86%E5%A4%87%E5%B7%A5%E4%BD%9C>

三、界面布局
<https://blog.csdn.net/qq_41647999/article/details/83626267#%E4%B8%89%E3%80%81%20%E7%95%8C%E9%9D%A2%E5%B8%83%E5%B1%80>

1、标题栏
<https://blog.csdn.net/qq_41647999/article/details/83626267#1%E3%80%81%20%E6%A0%87%E9%A2%98%E6%A0%8F>

2、中间部分
<https://blog.csdn.net/qq_41647999/article/details/83626267#2%E3%80%81%20%E4%B8%AD%E9%97%B4%E9%83%A8%E5%88%86>

（1）图片设置
<https://blog.csdn.net/qq_41647999/article/details/83626267#%EF%BC%881%EF%BC%89%20%E5%9B%BE%E7%89%87%E8%AE%BE%E7%BD%AE>

（2）按钮设置
<https://blog.csdn.net/qq_41647999/article/details/83626267#%EF%BC%882%EF%BC%89%20%E6%8C%89%E9%92%AE%E8%AE%BE%E7%BD%AE>

（3） “暂无数据”设置
<https://blog.csdn.net/qq_41647999/article/details/83626267#%EF%BC%883%EF%BC%89%20%E2%80%9C%E6%9A%82%E6%97%A0%E6%95%B0%E6%8D%AE%E2%80%9D%E8%AE%BE%E7%BD%AE>

3、底部菜单
<https://blog.csdn.net/qq_41647999/article/details/83626267#3%E3%80%81%20%E5%BA%95%E9%83%A8%E8%8F%9C%E5%8D%95>

四、书写业务逻辑代码
<https://blog.csdn.net/qq_41647999/article/details/83626267#%C2%A0%E5%9B%9B%E3%80%81%20%E4%B9%A6%E5%86%99%E4%B8%9A%E5%8A%A1%E9%80%BB%E8%BE%91%E4%BB%A3%E7%A0%81>

1、底边栏点击事件
<https://blog.csdn.net/qq_41647999/article/details/83626267#1%E3%80%81%E5%BA%95%E8%BE%B9%E6%A0%8F%E7%82%B9%E5%87%BB%E4%BA%8B%E4%BB%B6>

2、一键购电按钮点击事件
<https://blog.csdn.net/qq_41647999/article/details/83626267#%C2%A02%E3%80%81%E4%B8%80%E9%94%AE%E8%B4%AD%E7%94%B5%E6%8C%89%E9%92%AE%E7%82%B9%E5%87%BB%E4%BA%8B%E4%BB%B6>

一、本文目标

二、准备工作

一张“你用电，我用心”的图片放在执行目录的resource的image文件夹里面，新建一个窗体命名为frm_Main（命名看个人，绝不可命名成frmMain）。

三、界面布局

这个界面分成了三大块，“掌上川电”“中间部分”“底部菜单”。首先拖入一个panel控件在窗体里面，dock设置为fill。

接着再分别拖入panel，位置放在标题、图片、剩余电费和预估、暂无数据的位置，如下图位置：

1、标题栏

拖入一个label，text改为掌上川电，手动将label放在居中的位置，设置一下字体颜色为白色，size为15。

设置标题的panel的属性，size为0,40 如下图。

2、中间部分

（1）图片设置

拖入一个image的控件撑满整个图片的panel。这里会遇到一个问题，图片不能被撑满整个Image，其实是可以的。如下图属性设置即可。

（2）按钮设置

这里有两个按钮，一个是“详情”，一个是“一键购电”。

详情的属性如下图：

一键购电的属性如下图：

（3） “暂无数据”设置

这里只是一个label，我想的是如果当前有数据则将label的text属性改为“”，如果没有数据则显示当前属性。颜色为DarkOrange，size为53,
23。

3、底部菜单

设置items。

编辑一下内容，很简单不多说。

点击保存。

四、书写业务逻辑代码

1、底边栏点击事件

先将一下大家最感兴趣的底边栏的项。

写入代码：
ProcessToolbarFormName(e.Name);
在写上ProcessToolbarFormName这个函数。
/// <summary> /// Toolbar方法 /// </summary> /// <param
name="toolbarItemName"></param> private void ProcessToolbarFormName(string
toolbarItemName) { try { switch (toolbarItemName) { case "": this.Close();
break; case "Life": MessageBox.Show(toolbarItemName+"还未创建窗体！"); break; case
"Me": frmMain_Me frm = new frmMain_Me(); Show(frm); break; } } catch (Exception
ex) { MessageBox.Show(ex.Message); } }
2、一键购电按钮点击事件
MessageBox.Show("当前不可购电");
如果您没有成功遇到了什么问题，请评论或邮箱903131009@qq.com告诉我哦~

下一篇文章：Smobiler打包apk安装包——C# 或.NET Smobiler实例开发手机app（四）
<https://blog.csdn.net/qq_41647999/article/details/83618628>

热门工具换一换