xaml - Implement floating action button bottom_right of listview - Xamarin.forms -
i have listview binds image & text. have been trying add floating button bottom-right of page no avail. done research there seems still no clear solution this. knows how can implement this? in xaml code , have shown have tried.
my xaml
<?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="loyaltyworx.page1" title="stores"> <contentpage.toolbaritems> <toolbaritem text="about" icon="ic_action_more_vert.png" priority="0" order="secondary" clicked="toolbaritem_clicked"/> <toolbaritem text="settings" icon="ic_action_more_vert.png" priority="0" order="secondary"/> </contentpage.toolbaritems> <listview x:name="mainlistview" hasunevenrows="true" itemtapped="mainlistview_itemtapped" separatorcolor="darkgray"> <listview.itemtemplate> <datatemplate> <imagecell imagesource="{binding image}" text="{binding name}" textcolor="black" /> </datatemplate> </listview.itemtemplate> </listview> ***//here attempted image covers whole page*** <image source="add.png" verticaloptions="fillandexpand" horizontaloptions="fillandexpand" heightrequest="0" widthrequest="0" absolutelayout.layoutbounds="1,.99, 65, 65" absolutelayout.layoutflags="positionproportional" > <image.gesturerecognizers> <tapgesturerecognizer command="{binding clicknewcard}" commandparameter="3" /> </image.gesturerecognizers> </image> </contentpage>
(sorry poor english)
there's lot of problems here:
- if setting content of contentpage, must declare 1 element (so should use layout container stacklayout - can handle multiple children - compose page). see this topic it;
- you're setting absolutelayout attached properties, image not inside absolutelayout. this topic lead way use absolutelayout (i guess it's not need here).
- you're setting
verticaloptions="fillandexpand"
,horizontaloptions="fillandexpand"
image view, when properties should on listview. this topic layoutoptions.
try way , tell me if works you:
<?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="loyaltyworx.page1" title="stores"> <contentpage.toolbaritems> <toolbaritem text="about" icon="ic_action_more_vert.png" priority="0" order="secondary" clicked="toolbaritem_clicked"/> <toolbaritem text="settings" icon="ic_action_more_vert.png" priority="0" order="secondary"/> </contentpage.toolbaritems> <grid> <listview grid.column="0" grid.row="0" x:name="mainlistview" hasunevenrows="true" verticaloptions="fillandexpand" horizontaloptions="fillandexpand" itemtapped="mainlistview_itemtapped" separatorcolor="darkgray"> <listview.itemtemplate> <datatemplate> <imagecell imagesource="{binding image}" text="{binding name}" textcolor="black" /> </datatemplate> </listview.itemtemplate> </listview> <image grid.column="0" grid.row="0" source="add.png" horizontaloptions="endandexpand" verticaloptions="endandexpand" margin="0,0,30,30" heightrequest="0" widthrequest="0" > <image.gesturerecognizers> <tapgesturerecognizer command="{binding clicknewcard}" commandparameter="3" /> </image.gesturerecognizers> </image> </grid> </contentpage>
Comments
Post a Comment