ListView inside CarouselView scroll vertical is almost impossible.

I have a collection of listviews inside a horizontal CarouselView. When im trying to scroll vertically through the listview in focus, if make any tiny movement horizontally, the carousels horizontal scrolling "takes over" and makes scrolling vertically almost impossible. Anyway i can "prioritize" the listviews scrolling?

Hope it makes sense :)

Answers

  • LeonLuLeonLu Member, Xamarin Team Xamurai

    What is your specific code for your layout?

    I make a test demo, you can see this GIF.

    I create custom renderer for the listview. You can add following code in your demo, if this issue is disappar.

        [assembly: ExportRenderer(typeof(Xamarin.Forms.ListView), typeof(MyListviewRenderer))]
    namespace ScanDemo.Droid
    

    {
    public class MyListviewRenderer: ListViewRenderer
    {
    public MyListviewRenderer(Context context) : base(context) { }
    protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.ListView> e)
    {
    base.OnElementChanged(e);

            if (e.NewElement != null)
            {
                var listView = this.Control as Android.Widget.ListView;
                listView.NestedScrollingEnabled = true;
            }
        }
      }
     }
    

    And CarouselView actually is a RecyclerView in the android, If you put the Listview in the RecyclerView, Android system will confuse scrolling behavior of those two. You need to redesign your page with this in mind.
    Example: 1) Use ListViews inside StackLayout 2) Use TableViews inside CarouselView

  • LeonLuLeonLu Member, Xamarin Team Xamurai

    @larzraz Are there any update for this issue, If the reply is help, please mark it an answer, it will help others who have similar issue.

  • larzrazlarzraz Member ✭✭

    @LeonLu trying to implement your solution now.

    My code:
    Im binding to a collection of listviews. Its the same layout for all the listviews just a different date they are showing data from.

    <CarouselView.ItemTemplate>





    </CarouselView.ItemTemplate>

    The ListView Layout:

    ListView is binding to a collection in the ViewModel.

    <ListView.GroupHeaderTemplate>



    <Frame.. >

    <Grid.RowDefinitions>

    </Grid.RowDefinitions>

                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="50" />
                                        <ColumnDefinition Width="7*"/>
                                        <ColumnDefinition Width="2*"/>
                                    </Grid.ColumnDefinitions>
                                    <Label .../>
                                    <Label .../>
                    <Label .../>
                                </Grid>
                            </Frame>
                        </Frame>
                    </ViewCell>
                </DataTemplate>
            </ListView.GroupHeaderTemplate>
    
    
            <ListView.ItemTemplate>
                <DataTemplate >
                    <ViewCell>
                        <Frame ... >
                            <Grid >
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="25" />
                                    <RowDefinition Height="25" />
                                </Grid.RowDefinitions>
    
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="50" />
                                    <ColumnDefinition Width="6*"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Label .../>
                <Label .../>
                <Label .../>
                <Label .../>
                        </Frame>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    

    Was this what you wanted?

    This is what im trying to achieve:

  • LeonLuLeonLu Member, Xamarin Team Xamurai

    @larzraz
    I notice you achievement, TabbedPage maybe a good choice for you. You can refer to this link.
    https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/tabbed-page

    CarouselView actually is a RecyclerView in the android, If you put the Listview in the RecyclerView, Android system will confuse scrolling behavior of them.

  • larzrazlarzraz Member ✭✭

    @LeonLu I tried TabbedPage at first. But since I want tabs in the buttom(for deferent pages, where this page showing the different listviews is one of them) and tabs with something above it(for this page, where the tabs are the different listviews. So the TabbedPage do not work for me. I decided to use Carousel cause i could put in my slide between the items in the Carousel, and use the ChangedItemevent and Postitionchanged event to change the selected date in the top like this:

    is this possible with a stacklayout?

  • larzrazlarzraz Member ✭✭

    Btw My Mainpage is a TabbedPage

  • LeonLuLeonLu Member, Xamarin Team Xamurai

    You can use following code to make the Tabbedpage to the Bottom

    <TabbedPage xmlns="http://xamarin.com/schemas/2014/forms" 
               xmlns:android="clr- 
               namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
              android:TabbedPage.ToolbarPlacement="Bottom"></TabbedPage>
    

    Here is link.
    https://montemagno.com/xamarin-forms-official-bottom-navigation-bottom-tabs-on-android/

    If you want to update number in tab , you can use this custom render to achieve it.

  • larzrazlarzraz Member ✭✭

    @LeonLu I have the bottomtab sorted out. Its the top one on that specific page thats my issue. since i only want part of that page to be "slideable" with a "tabcontrol" on top. I tried to use CarouselView to achieve that. Like my picture on my previous post, where use can see the matches for that specific date, and if you slide to right, you see the matches for the next day.

  • LeonLuLeonLu Member, Xamarin Team Xamurai

    When you use CarouselView and Listview, if you met the focus issue?

  • larzrazlarzraz Member ✭✭

    Not entirely sure i understand your question. My listview inside my carousel is my issue, the scrolling focus seems to be on the carousel, making it impossible to slide vertically down my listview.

  • larzrazlarzraz Member ✭✭

    @LeonLu this is what it want to achieve:

    Maybe you have a better approach than ListView in CarouselView.

  • LeonLuLeonLu Member, Xamarin Team Xamurai

    If you have used Tabbedpage, then use the CarouselView and listview, it is a situable approach.

Sign In or Register to comment.