Float header and footer next buttons

[Mark]

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

[Dinesh Babu Yadav]

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. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/145608/ze/Sample-978558165 

 

Please let us know if you require further assistance. 

 

Regards, 

Dinesh Babu Yadav 

[Mark]

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.

[Dinesh Babu Yadav]

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. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/145608/ze/ListViewsample-203102389  

 

Please let us know if you require further assistance. 

 

Regards, 

Dinesh Babu Yadav 

[Mark]

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

[Dinesh Babu Yadav]

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. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/145608/ze/ListViewsample1669524113  

 

Please let us know if you require further assistance. 

 

Regards, 

Dinesh Babu Yadav 

[Mark]

Hi Dinesh,

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

Thanks for all of your help.

Mark.

[Dinesh Babu Yadav]

Hi Mark, 

 

Thanks for the update. Please get back to us if you require further assistance. 

 

Regards, 

Dinesh Babu Yadav