We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Float header and footer next buttons

Hi,

I am using a rotator which interacts with a list view for navigation. I hide and show the navigation buttons depending on if you are at the start or end of the list.

Start of list:

Middle of list:

End of list:

I wish to float the navigation buttons so that I don't have this gap:

I will make the buttons transparent so only the icon is visible with the square visible underneath.

Here is a example from the Windows store:

Button is visible and sits on top of content:

Disappears if at the end of the list and don't have the gap.

Attached is my Xaml code.

Thanks

Mark.








Attachment: Rotator_and_ListView_c10b956e.zip

7 Replies

DB Dinesh Babu Yadav Syncfusion Team July 2, 2019 07:23 AM UTC

Hi Mark, 
 
Thank you for contacting Syncfusion support. 
 
Based on your requirement, we have prepared the sample by arranging the grid elements in the XAML page with SfListView control. Please find the sample from the below link. 
 
 
Please let us know if you require further assistance. 
 
Regards, 
Dinesh Babu Yadav 



MA Mark July 2, 2019 09:59 AM UTC

Hi,

Thank you for this. It looks very promising.

One last request if possible:

I tried to make it transparent so the red shows through (I made the listview background red). Is there an easy way to achieve this?

xx
Thanks

Mark.


DB Dinesh Babu Yadav Syncfusion Team July 2, 2019 12:58 PM UTC

Hi Mark, 
 
Thanks for the update. 
 
In the last update, we have used the Image for Left and Right arrows so, transparent color doesn’t work on the Image. To overcome from this problem, we suggest you to use the custom fonts which has similar view like left and right arrows. Please refer the following UG documentation link for more reference about working with custom fonts in Xamarin.Forms. 
 
Working with Fonts in Xamarin Forms: https://xamarinhelp.com/custom-fonts-xamarin-forms/  
 
For your reference, we have modified the sample based on your requirement with custom fonts and you can download it from the below link. 
 
 
Please let us know if you require further assistance. 
 
Regards, 
Dinesh Babu Yadav 



MA Mark July 2, 2019 02:02 PM UTC

Hi,

I tried your sample and it is not working as expected. The problems I found were:

1. The arrows would not step one by one but go directly to the beginning or end.
2. I had to add an index property to ListViewBookInfo and then changed the code to this:

You can not see the image and purple in the below screenshot.


This is what we have (the text is cut off by the arrow so is not transparent):

This is what we are aiming for (created in a image editor)

The arrow background is truly transparent.

Attached is the modified project.

Thanks

Mark.






Attachment: ListViewsample_5c8f974d.zip


DB Dinesh Babu Yadav Syncfusion Team July 3, 2019 09:23 AM UTC

Hi Mark, 
 
Sorry for the inconvenience caused. 
 
Based on your requirement “Transparent arrow icon with SfListView”, we have modified the sample and you can download it from the below link. 
 
 
Please let us know if you require further assistance. 
 
Regards, 
Dinesh Babu Yadav 



MA Mark July 3, 2019 10:06 AM UTC

Hi Dinesh,

Thank you for this. This is awesome and working very well.

Thanks for all of your help.

Mark.


DB Dinesh Babu Yadav Syncfusion Team July 3, 2019 10:13 AM UTC

Hi Mark, 
 
Thanks for the update. Please get back to us if you require further assistance. 
 
Regards, 
Dinesh Babu Yadav  


Loader.
Live Chat Icon For mobile
Up arrow icon