Smobiler 仿美柚APP个人主页

Smobiler 仿美柚APP个人主页

原型如下:

 image.png

完整代码参考

https://github.com/comsmobiler/BlogsCode/blob/master/Source/BlogsCode_SmobilerForm/MyForm/meiyou.cs

 

思路

 image.png

 

 

可以将原型按照上图分成3个部分,部分A可以使用label imagebuttonimagebutton控件是实现;部分B可以使用TabpageviewGridview(或者listview)实现;部分C则是使用button控件即可。

 

实现

首先添加SmobilerFrom,类名为meiyou,将窗体的Layout属性设置Relative,依次拖入PanelTabpageviewButton控件。

 image.png

并设置窗体的StatusBar属性,设置如下

 image.png

 

实现部分A

Panel2.Size设置(300144),panel2.BackColor设置” PaleVioletRed”接着在放置imagebuttonlabelbutton控件。

 image.png

实现部分B

 image.png

tabpageview1.Location设置(80, tabpageview1.Width设置284tabpageview1.Flex设置1tabpageview1.PageIndicator设置TitleTitleTitleStyle属性设置如下

 image.png

接着再给tabpageview1中添加5个子项,并在第一个子项中添加GridviewGridview的模板类设置meiyouLayout类,meiyouLayout类布局如下

 image.png

绑定过程见代码

实现部分C

Button2.ForeColor设置PaleVioletRedbutton2.Text设置发消息button2.BackColor设置Whitebutton2.Size设置(040

到此,设计器中布局都以完成。

实现效果图

 image.png

 

 


猜你喜欢

转载自blog.51cto.com/14360220/2687945

相关文章