xaml - Xamarin Forms List View Showing Row items in Frames -
can please recommend me sample code create framed lines shown in picture. can see in image, example first row, m should in 1 frame , other 3 items in row should in row.
below please see code, appreciated.
<?xml version="1.0" encoding="utf-8" ?> <contentpage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:class="xyzclass.views.exams.examspage" title="{binding pagetitle}"> <stacklayout verticaloptions="fillandexpand"> <image source="xyzclassheader.png" aspect="aspectfit" /> <grid backgroundcolor="#0075c1"> <grid.rowdefinitions> <rowdefinition/> </grid.rowdefinitions> <grid.columndefinitions> <columndefinition width="*"/> <columndefinition width="*"/> <columndefinition width="*"/> <columndefinition width="*"/> </grid.columndefinitions> <label grid.row="0" grid.column="1" text="" textcolor="white" horizontaloptions="center"/> <label grid.row="0" grid.column="2" text="type:" textcolor="white" horizontaloptions="center"/> <label grid.row="0" grid.column="3" text="created:" textcolor="white" horizontaloptions="center"/> <label grid.row="0" grid.column="4" text="finished:" textcolor="white" horizontaloptions="center"/> </grid> <listview grid.row="1" grid.column="0" itemssource="{binding exams}" horizontaloptions="center"> <listview.itemtemplate> <datatemplate> <viewcell> <viewcell.view> <grid> <grid.rowdefinitions> <rowdefinition/> </grid.rowdefinitions> <grid.columndefinitions> <columndefinition width="*"/> <columndefinition width="*"/> <columndefinition width="*"/> <columndefinition width="*"/> </grid.columndefinitions> <frame outlinecolor="accent" grid.row="0" grid.column="1" horizontaloptions="center"> <frame.content> <label text="{binding displayname}" /> </frame.content> </frame> <label grid.row="0" grid.column="2" text="{binding type}" horizontaloptions="center"/> <label grid.row="0" grid.column="3" text="{binding creationdate}" horizontaloptions="center"/> <label grid.row="0" grid.column="4" text="{binding completiondateinfo}" horizontaloptions="center"/> </grid> </viewcell.view> </viewcell> </datatemplate> </listview.itemtemplate> </listview> <stacklayout backgroundcolor="#0075c1" verticaloptions="fillandexpand"> <stacklayout.gesturerecognizers> <tapgesturerecognizer command="{binding deleteselectedexamscommand}"/> </stacklayout.gesturerecognizers> <label text="delete selected(3) " textcolor="white" /> <label text="" textcolor="white" fontsize="large" /> </stacklayout> <stacklayout backgroundcolor="#0075c1" verticaloptions="fillandexpand"> <stacklayout.gesturerecognizers> <tapgesturerecognizer command="{binding createnewexamcommand}"/> </stacklayout.gesturerecognizers> <label text="create new exam " textcolor="white"/> <label text="" textcolor="white" fontsize="large" fontfamily="fontawesome"/> <!--note fontawesome ios: fontfamily reference ios. on android ignored--> </stacklayout> </stacklayout> </contentpage> 
thanks answers have implemented it, used grid control, sharing here in case need similar screen:
<?xml version="1.0" encoding="utf-8" ?> <contentpage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:class="xyzclass.views.exams.examspage" backgroundcolor="white" xmlns:controls="clr-namespace:xyzclass.controls"> <contentpage.padding> <onplatform x:typearguments="thickness" ios="10, 20, 10, 10" android="0,0,0,10"/> </contentpage.padding> <contentpage.resources> <resourcedictionary> <style x:key="labelstyle" targettype="label"> <setter property="textcolor" value="white"/> <setter property="font" value="medium"/> <setter property="verticaloptions" value="center"/> <setter property="horizontaloptions" value="center"/> </style> <style x:key="labelstylesmall" targettype="label"> <setter property="textcolor" value="#41a4dc"/> <setter property="font" value="small"/> <setter property="verticaloptions" value="center"/> <setter property="horizontaloptions" value="center"/> </style> </resourcedictionary> </contentpage.resources> <grid rowspacing="0"> <grid.rowdefinitions> <rowdefinition height="1*" /> <rowdefinition height="10*" /> </grid.rowdefinitions> <grid grid.row="0"> <controls:navigation/> </grid> <grid rowspacing="0" grid.row="1" padding="10,10,10,0"> <grid.rowdefinitions> <rowdefinition height="145*" /> <rowdefinition height="415*" /> <rowdefinition height="2*" /> <rowdefinition height="88*" /> </grid.rowdefinitions> <grid grid.row="0" rowspacing="10" backgroundcolor="#ed004a"> <grid.rowdefinitions> <rowdefinition height="*" /> <rowdefinition height="*" /> </grid.rowdefinitions> <grid grid.row="0" backgroundcolor="#ed004a" padding="30,0,0,0"> <label text="your personal exam history information" style="{staticresource labelstyle}" horizontaloptions="startandexpand"/> </grid> <grid grid.row="1" backgroundcolor="#0075c1"> <grid.columndefinitions> <columndefinition width="*"/> <columndefinition width="*"/> <columndefinition width="*"/> <columndefinition width="2*"/> </grid.columndefinitions> <label grid.column="0" text="" style="{staticresource labelstyle}"/> <label grid.column="1" text="type:" style="{staticresource labelstyle}"/> <label grid.column="2" text="created:" style="{staticresource labelstyle}"/> <label grid.column="3" text="finished:" style="{staticresource labelstyle}"/> </grid> </grid> <scrollview grid.row="1"> <listview x:name="examlist" itemssource="{binding exams}" horizontaloptions="center" rowheight="70"> <listview.itemtemplate> <datatemplate> <viewcell> <viewcell.view> <grid> <grid.columndefinitions> <columndefinition width="1*"/> <columndefinition width="4*"/> </grid.columndefinitions> <frame outlinecolor="#ed004a" grid.column="0"> <frame.content> <label text="{binding name}" font="large" style="{staticresource labelstyle}" textcolor="#ed004a" fontattributes="bold"/> </frame.content> </frame> <frame outlinecolor="#ed004a" grid.column="1"> <frame.content> <grid> <grid.columndefinitions> <columndefinition width="*"/> <columndefinition width="*"/> <columndefinition width="2*"/> </grid.columndefinitions> <label grid.column="0" text="{binding type}" style="{staticresource labelstylesmall}"/> <label grid.column="1" text="{binding startdatetext}" style="{staticresource labelstylesmall}"/> <label grid.column="2" text="{binding finisheddatetext}" style="{staticresource labelstylesmall}"/> </grid> </frame.content> </frame> </grid> </viewcell.view> </viewcell> </datatemplate> </listview.itemtemplate> </listview> </scrollview> <boxview grid.row="2" color="#0075c1" widthrequest="100" heightrequest="2"/> <grid grid.row="3"> <grid.rowdefinitions> <rowdefinition height="1*"/> <rowdefinition height="40*" /> </grid.rowdefinitions> <grid grid.row="1"> <grid.columndefinitions> <columndefinition width="*"/> <columndefinition width="10"/> <columndefinition width="*"/> </grid.columndefinitions> <grid grid.column="0" backgroundcolor="{binding deletebuttonbackgroundcolor}" padding="30,0,0,0"> <grid.columndefinitions> <columndefinition width="5*"/> <columndefinition width="2*"/> </grid.columndefinitions> <label grid.column="0" x:name="labeldeleteselectedexamspartone" text="{binding deletebuttontext}" style="{staticresource labelstyle}"/> <label grid.column="1" x:name="labeldeleteselectedexamsparttwo" text="" style="{staticresource labelstyle}" font="large"/> <grid.gesturerecognizers isenabled="{binding deletebuttonisenabled}"> <tapgesturerecognizer command="{binding deleteselectedexamscommand}"/> </grid.gesturerecognizers> </grid> <grid grid.column="2" backgroundcolor="#0075c1" padding="30,0,0,0"> <grid.columndefinitions> <columndefinition width="5*"/> <columndefinition width="2*"/> </grid.columndefinitions> <label grid.column="0" x:name="labelcreatenewexampartone" text="create new exam " style="{staticresource labelstyle}"/> <label grid.column="1" x:name="labelcreatenewexamparttwo" text="" style="{staticresource labelstyle}" font="large"/> <grid.gesturerecognizers> <tapgesturerecognizer command="{binding createnewexamcommand}"/> </grid.gesturerecognizers> </grid> </grid> </grid> </grid> </grid> </contentpage>
Comments
Post a Comment