|
原型如下：
完整代码参考 https://github.com/comsmobiler/BlogsCode/blob/master/Source/BlogsCode_SmobilerForm/MyForm/momo.cs
思路
可以将原型按照上图分成3个部分，部分A可以使用label、image、fontIcon、imagebutton控件来实现；部分B可以使用Tabpageview、Gridview、label、button、image、fontIcon实现；部分C使用button控件即可。 实现首先添加SmobilerFrom，类名为momo，将窗体的Layout属性
实现部分A
拖入panel1，设置BackColor为White； 在panel1中拖入image1，imageButton1，fontIcon1，imageButton2，image2，label1，fontIcon2，label2，label3，label4，label5，fontIcon3，label6，label7； image1的SizeMode设置为Stretch，Size设置为（300,80），Dock设置为Top； 在image1上拖入imageButton1，fontIcon1，imageButton2，imageButton1，imagButton2 IconColor设置为White，ImageType设置为FontIcon，imageButton1.ResourceID设置为angle-left，imageButton2.Resource.ID设置为ellipsis-h,fontIcon1的ForeColor设置为White，ResourceID设置为pencil-square-o； 在image1的边界处拖入image2，设置Size属性Width和Height为50，BorderRadius设置为25； label1的Text设置为“张凯特”，FontSize设置为20，Bold设置为True，HorizontalAlignment设置为Center； fontIcon2的ForeColor设置为SteelBlue，ResourceID设置为newspaper-o； label2的Text设置为“脉脉·运营”，FontSize设置为15，Bold设置为True，HorizontalAlignment设置为Center； label3的Text设置为“职业”，ForeColor设置为Orange； label4的Text设置为“社交网络·运营·影响力”，ForeColor设置为DimGray； label5的Text设置为“729”，ForeColor设置为DeepSkyBlue； FontIcon3的ForeColor设置为Silver，ResourceID设置为map-marker； label6的Text设置为“北京海淀区”，ForeColor设置为DimGray； label7的Text设置为““不解释，未结果负责。””，ForeColor设置为DimGray； 实现部分B
拖入tabPageView1，PageIndicator设置为Title,Titles设置为“个人信息，好友评价，她的动态，更多信息”，TitleStyle中BackColor属性设置为White，ForeColor设置为DimGray,SelectedForeColor设置为Black，BackColor设置为White； 在tabPageControl1中拖入label8，fontIcon4，label9，label10，fontIcon5，label11，label12，fontIcon6，label13，gridView1，label14，label15，fontIcon7，gridView2，label16，label17，label18，label18，label19，label20，label21，label22，fontIcon8,gridView3； label8的Text设置为“工作经历”，FontSize设置为15； fontIcon4的ForeColor设置为RoyalBlue，ResourceID设置为apple； label9的Bold设置为True，FontSize设置为15，Text设置为“Apple”； label10的Text设置为“2018.3-至今，运营”； fontIcon5的ForeColor设置为Orange，ResourceID设置为newspaper-o； label11的ForeColor设置为DimGray，FontSize设置为12，Text设置为“脉脉实名社区运营。 站内1000+大公司内容运营，提升大公司……”； label12的ForeColor设置为Silver，Text设置为“她有125个好友在此公司”； fontIcon6的ForeColor设置为DarkGray，ResourceID设置为angle-right； label13的FontSize设置为15，Text设置为“教育经历”； gridView1的TemplateControlName设置为momo2； 创建一个SmobilerUserControl，Name设置momo2，BackColor设置White，Size设置（0，130）；
拖入fontIcon1，label1，label2，label3，label4，fontIcon2； fontIcon1的ForeColor设置为BlueViolet，ResourceID设置为graduation-cap； label1的DisplayMember设置为lab1，Bold设置为True，FontSize设置为15； label2的DisplayMember设置为lab2，label3的DisplayMember设置为lab3，label4的DisplayMember设置为lab4； fontIcon2的ForeColor设置为DarkGray，ResourceID设置为angle-right； label14的FontSize设置为15，Text设置为“职业标签”； label15的HorizontalAlignment设置为Right，Text设置为“全部19个”； fontIcon7的ForeColor设置为DarkGray，ResourceID设置为angle-right； gridView2的TemplateControlName设置为momo3；
创建一个SmobilerUserControl，Name设置momo3，BackColor设置White，Size设置（0，100）；
拖入label1，label2，label3； label1的BorderRadius设置为15，DisplayMember设置为label1，HorizontalAlignment设置为Center； label2的ForeColor设置为DimGray，DisplayMember设置为label2； label3的ForeColor设置为DarkGray，DisplayMember设置为label3； label16的FontSize设置为15，Text设置为“更多资料”； label17的Text设置为“家乡”，label18的Text设置为“星座”； label19的ForeColor设置为DimGray，HorizontalAlignment设置为Right，Text设置为“浙江绍兴”； label20的ForeColor设置为DimGray，HorizontalAlignment设置为Right，Text设置为“天秤座”； label21的FontSize设置为18，HorizontalAlignment设置为Center，Text设置为“看了Ta的人还看了”； label22的ForeColor设置为DimGray，HorizontalAlignment设置为Center，Text设置为“我也要推广自己，提升人气！”； fontIcon8的ForeColor设置为Red，ResourceID设置为bolt； gridView3的TemplateControlName设置为momo4；
创建一个SmobilerUserControl，Name设置momo4，BackColor设置White，Size设置（0，80）；
拖入image1，label1，label2，label3，button1； image1设置Size属性Width和Height为50，BorderRadius设置为25； label1的DisplayMember设置为lab1，Bold设置为True，FontSize设置为15； label2的DisplayMember设置为lab2，ForeColor设置为DimGray，FontSize设置为11； label3的DisplayMember设置为lab3，ForeColor设置为DimGray，FontSize设置为11； button1的BorderRadius设置为2，Text设置为“+好友”；
实现部分C
拖入panel2，设置BackColor为White，Flex设置为1； 在panel2中拖入button1，button2； button1的BackColor设置为White，ForeColor设置为Gray，Text设置为“极速联系”； button2的Text设置为“加好友”； 实现效果图
| 
