• Smobiler 仿脉脉APP个人主页


    原型如下:

    完整代码参考

    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属性设置Relative,依次拖入Panel、Tabpageview控件。

    实现部分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设置为“加好友”;

    实现效果图

  • 相关阅读:
    年末deadline汇总
    [线性代数]2016.12.19周一作业
    [线性代数]2016.12.15周四作业
    Android SDK的安装与环境变量的配置
    安装JDK环境变量的配置
    Python中单引号,双引号,三引号
    带有支付功能的产品如何进行测试
    Android稳定性测试工具Monkey的使用
    mysql数据库单表增删改查命令
    svn
  • 原文地址:https://www.cnblogs.com/smobiler/p/14893459.html
Copyright © 2020-2023  润新知