原型如下：

 

https://github.com/comsmobiler/BlogsCode/blob/master/Source/BlogsCode_SmobilerForm/SelectForm/LGSelelctForm1.cs

创建窗体

创建一个SmobilerForm，文件名设置LGSelectForm1，将窗体的Layout设置Relative，再设置窗体的Statusbar属性，BarStyle设置为Dark，BackColor设置为White；

在窗体中拖入两个panel

 

panel1用来放置搜索框，panel2用来放置tabPageView1、“区域”按钮、“要求”按钮、“公司”按钮、“技能”按钮、“排序”按钮和listView1；

panel1的Height设置为45，panel2的Flex设置为1；

实现搜索框

设置panel1的Size设置为（300,45）；

在panel1中拖入imageButton1、panel3、button1；

imageButton1的ImageDirection设置为Right，ImageType设置为FontIcon，ResourceID设置为angle-down，Text设置为“北京”；

在panel3中拖入fontIcon1，textBox1,；

fontIcon1的ResourceID设置为“search”；

textBox1的Text为“产品经理”；

button1的BackColor设置为Transparent，BorderRadius设置为0，Text设置为“取消”；

 放置筛选按钮

tabPageView1的BackColor设置为White，PageIndicator设置为Title,Titles设置为“相关职位”、“相关公司”，TitleStyle中BackColor属性设置为White，ForeColor设置为DimGray,SelectedForeColor设置为Black；

在tabPageControl1中拖入panel3，panel3的Direction设置为Row，Layout设置为Relative；

在panel3中拖入imageButton2，imageButton3，imageButton4，imageButton5，imageButton6，listView1；

imageButton2的Flex设置为1，ImageDirection设置为Right，ImageType设置为FontIcon，ResourceID设置为caret-down，Text设置为“区域”；

imageButton3的Flex设置为1，ImageDirection设置为Right，ImageType设置为FontIcon，ResourceID设置为caret-down，Text设置为“要求”；

imageButton4的Flex设置为1，ImageDirection设置为Right，ImageType设置为FontIcon，ResourceID设置为caret-up，Text设置为“公司”；

imageButton5的Flex设置为1，ImageDirection设置为Right，ImageType设置为FontIcon，ResourceID设置为caret-down，Text设置为“技能”；

imageButton6的Flex设置为1，ImageDirection设置为Right，ImageType设置为FontIcon，ResourceID设置为caret-down，Text设置为“排序”；

listView1的Flex设置为1，templateControlName为ListLayout；

创建SmobilerUserControl

创建一个SmobilerUserControl，文件名设置为LGSelectLayout，将LGSelectLayout的Layout设置为Relactive，BackColor设置为White；

panel1用来实现搜索框，实现同上述相同，panel3中放置tabPageView1、mainpanel、panel5、panel6；

tabPageView1的BackColor设置为White，PageIndicator设置为Title,Titles设置为“相关职位”、“相关公司”，TitleStyle中BackColor属性设置为White，ForeColor设置为DimGray,SelectedForeColor设置为Green；

panel4用来放置筛选按钮：“区域”按钮、“要求”按钮、“公司”按钮、“技能”按钮、“排序”按钮，实现同上述相同；

mianpanel的Layout设置Relative，Flex设置1；

在panel5中拖入label1，checkBox1，label2；

label1的Text设置为“其他”，checkBox1的TintColor设置为Gray，label2的Text设置为“屏蔽已投递公司”；

panel6的Layout设置为Relactive，Direction设置为Row，BackColor设置为White，Height设置为40，Padding设置为（8,8,8,8）；

在panel6中放入button2和button3；

button2的BackColor设置为White，ForeColor设置为Black，Text设置为“重置”；

button3的BackColor设置为Green，ForeColor设置为White，Text设置为“确定”；

实现效果