2

In my Xamarin.Forms app for Windows Phone 8.1, we have a number of pages that the user can swipe between using a CarouselPage. One of these pages contains a ListView that fills the screen, and when that page selected the user can't swipe any more; the action is interpreted by the list view as a tap in one of its cells. What can I do so that horizontal swipes will still change page in the carousel? I still want vertical swipes to scroll the list view.

Rohit Vipin Mathews
  • 11,629
  • 15
  • 57
  • 112
Simon
  • 25,468
  • 44
  • 152
  • 266
  • Have you tried using CarouselView instead of CarouselPage? CarouselPage page will go obsolete soon – Ahmad ElMadi Aug 17 '16 at 12:56
  • You don't need taps on the `ListView`? Check out the `InputTransparent` property on it – Gerald Versluis Aug 17 '16 at 13:07
  • @BraveHeart it doesn't look like CarouselView is available in the Xamarin Forms stable release yet. Do you know when it will be available? – Simon Aug 17 '16 at 13:49
  • @Gerald I do need taps on the ListView. But I want horizontal swipes, and only horizontal swipes, to be captured by the CarouselPage, so that it can scroll. – Simon Aug 17 '16 at 13:49
  • You can add Carousel View as Nuget. https://blog.xamarin.com/flip-through-items-with-xamarin-forms-carouselview/ – Rohit Vipin Mathews Aug 17 '16 at 13:53
  • @Rohit thanks. That doesn't look like a replacement for CarouselPage though; it looks like it's for swiping between views, not swiping between pages. – Simon Aug 17 '16 at 13:59
  • I don't think there is any way you could get it working in any simple way. The touch will be handled by listview even before it would be recognised as a swipe as list is the top view and corousel page is only underneath it. If you can instead of tap use a button to set the listview selected item, then you can set inputTransparent as false. – Rohit Vipin Mathews Aug 17 '16 at 14:11
  • @Rohit so if I set InputTransparent on the ListView, and use buttons in the list view cells, will the buttons receive the taps? – Simon Aug 17 '16 at 14:18
  • Yes, You are setting input transparent for only the listview. Button is a separate control and should receive the click event without any issues. – Rohit Vipin Mathews Aug 17 '16 at 14:21
  • @Rohit is that true even if the Button is inside the ListView? I believe that will be the case if the Button is part of the ListView's template. – Simon Aug 17 '16 at 14:23
  • The button should be part of listview itemtemplate. – Rohit Vipin Mathews Aug 17 '16 at 14:36
  • @Rohit I set InputTransparent on the ListView, and it had no effect. The cells still do their little animation when I try to swipe. – Simon Aug 17 '16 at 14:55
  • @Simon You can disable the effect to be less like this: `listView.ItemTapped += (sender, e) => { tripsListView.SelectedItem = null; };` – Mario Galván Aug 17 '16 at 15:53
  • @Mario that doesn't stop the cell from intercepting the tap. It just resets the selected item to null after the cell has been selected. – Simon Aug 17 '16 at 16:11
  • @Simon well man obviously you are doing something really hard to do :) do you know of any design with this solution ? think about it like this . What if the listview would support a swipe ? so what would the swipe be applied on the listItem of the page? Maybe you can use tabbedPage instead – Ahmad ElMadi Aug 17 '16 at 20:15
  • @BraveHeart TabbedPage works fine on Windows Phone but is utterly unusable on Windows Desktop. – Simon Aug 17 '16 at 21:31
  • @Simon oh you have really great ambition for juicing Xamarin.Froms :) I like the spirit , but you know that the more platforms you target the more compromises you make. My advice is in case of the listpage appears, have two buttons one on the left side and the other on the right side to do the swiping . Otherwise have an empty area below the listview so the user can swipe the page from it . Actually i think you can unify all the pages to have such "Swipe Area" . You could place a nice image there maybe :) – Ahmad ElMadi Aug 18 '16 at 07:31
  • 1
    @Rohit I upgraded to Xamarin.Forms 2.3 and now InputTransparent works! If you add that as an answer, I'll mark it as accepted. – Simon Aug 18 '16 at 08:48
  • @Simon - Thanks, for getting back. I have added the answer. – Rohit Vipin Mathews Aug 18 '16 at 09:29

1 Answers1

1

This can not be directly achieved in the Xamarin Forms project because when there is a list view available all the taps, gestures, etc will handled by the listview itself. Only the gestures which are not handled by the top most layout/control will be passed into the controls/layouts beneath it. So in your case the listview handles all the gestures and nothing is passed to your carousel page.

The only work around for the problem that I can think of is, setting the InputTransparent property of the listview as true. In that case no gestures will be handled by the listview and everything will be passed on to the carousel page. But since you need to have the selected item and open the detail page from the list view, what you can do is have a button in the listview item template and handle the click of the button. Since button is a separate control and on top of listview, the setting InputTransparent wont affect the button click event/command binding.

EDIT : As per OP's experience he is able to access the selected item and all other features of listview even after setting the InputTransparent.

Rohit Vipin Mathews
  • 11,629
  • 15
  • 57
  • 112
  • 1
    I've set `InputTransparent` and the ListView is still working as I would hope, even without setting buttons for its content. I can still scroll it and tap items, but I can also swipe to change the carousel. Thanks! – Simon Aug 18 '16 at 08:59
  • You mean you get listview selected item, even after setting the InputTransparent? – Rohit Vipin Mathews Aug 18 '16 at 09:13
  • 1
    Yeah - I can still scroll the list view and select items. – Simon Aug 18 '16 at 09:49