Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

Xamarin forms: Listview scrollbar showing on the left side

SreeeeSreeee INMember ✭✭✭✭✭

I have added the following codes for reversing the listview(first item on bottom).

In the ListView set following two properties:

FlowDirection=”RightToLeft”
Rotation=”180″

And in the view cells main layout:

FlowDirection=”LeftToRight”
Rotation=”180″

After that my scrollbar showing on the left side and mouse scrolling behaves opposite of the normal behavior(on UWP). Also, scrolling is not smooth. How can I fix these issues?

I got the above codes from this blog. Please see the Rotate the list section. In the blog itself, they are telling about the scroll bar on the left side issue and suggested to add FlowDirection property to solve this.

Complete Code:

 <ListView 
      FlowDirection="RightToLeft"
      Rotation="180"
      <ListView.ItemTemplate>
         <DataTemplate>
             <ViewCell>
               <ViewCell.View>
                  <StackLayout
                     FlowDirection="LeftToRight"
                     Rotation="180"> 
                     //Listview items
                  </StackLayout>
                </ViewCell.View>
             </ViewCell>
          </DataTemplate>
       </ListView.ItemTemplate>
   </ListView>

Answers

  • LandLuLandLu Member, Xamarin Team Xamurai

    The content will be totally reversed as you set the Rotation to 180.
    If you want the scroll bar to be displayed on the left side on each platform, there's no need to use Rotation. Creating a custom renderer for your list view on the specific platform will fit your requirement.
    For iOS:

    protected override void OnElementChanged(ElementChangedEventArgs<ListView> e)
    {
        base.OnElementChanged(e);
    
        Control.ScrollIndicatorInsets = new UIEdgeInsets(0, 0, 0, Control.Bounds.Size.Width - 10);
    }
    

    For Android:

    protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.ListView> e)
    {
        base.OnElementChanged(e);
    
        Control.VerticalScrollbarPosition = ScrollbarPosition.Left;
    }
    

    For UWP:

    // UWP is a little different
    // Set the flow direction on forms Xaml (please notice only for UWP platform we need to do this)
    <ListView ItemsSource="{Binding ListViewSource}">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <StackLayout>
                        <StackLayout.FlowDirection>
                            <OnPlatform UWP="RightToLeft"/>
                        </StackLayout.FlowDirection>
    
                        <Label Text="{Binding Text}"/>
                    </StackLayout>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
    
    // Custom Renderer
    protected override void OnElementChanged(ElementChangedEventArgs<ListView> e)
    {
        base.OnElementChanged(e);
    
        Control.FlowDirection = Windows.UI.Xaml.FlowDirection.RightToLeft;
    }
    
  • SreeeeSreeee INMember ✭✭✭✭✭

    @LandLu I am not looking for making the scroll bar on left, I wished it is on the right.

    Normally in xamarin listview, the first item is on the top and remaining items are showing on the bottom of that. I just reverse that feature, the first item will be on the bottom and remaining items are on the top of that(Using the above codes). Now the bottom of my ListView is at the top.

    My problems are:
    1. The scrollbar showing on the left side(I wished it is on the right)
    2. Mouse scrolling behaves opposite of the normal behavior(on UWP).
    3. Scrolling is not smooth.

    In the blog itself, they are telling about the scroll bar on the left side issue and suggested to add FlowDirection property to solve this. But that is not working as expected, after adding FlowDirection property scrollbar is on the left side.

  • LandLuLandLu Member, Xamarin Team Xamurai

    @Sreeee If you want to show the items from bottom to top, you could easily achieve that by reversing the items source:

    // This property in the view model has been bound to the list view's items source
    public List<MainPageModel> ListViewSource { set; get; }
    
    //... Set the value
    ListViewSource.Reverse();
    
  • SreeeeSreeee INMember ✭✭✭✭✭

    @LandLu said:
    @Sreeee If you want to show the items from bottom to top, you could easily achieve that by reversing the items source:

    // This property in the view model has been bound to the list view's items source
    public List<MainPageModel> ListViewSource { set; get; }
    
    //... Set the value
    ListViewSource.Reverse();
    

    I think this is not possible in my case since I already binded one collection as list view's items source.

    <ListView 
                        x:Name="MyTweetsList" 
                        ItemsSource="{Binding AllItems,Mode=TwoWay}"
                        HorizontalOptions="Fill"
                        IsPullToRefreshEnabled="True"
                        FlowDirection="RightToLeft"
                        Rotation="180"
                        HasUnevenRows="True"
                        RefreshCommand="{Binding RefreshCommand}"
                        IsRefreshing="{Binding IsRefreshing}">
                        <ListView.ItemTemplate>
    

    Where AllItems is an ObservableCollection of my Model.

  • LandLuLandLu Member, Xamarin Team Xamurai
    edited March 2019

    ObservableCollection can consume Reverse method.

    // I simulate the adding operation
    AllItems = new ObservableCollection<MainPageModel>();
    for (int i=0; i<100; i++)
    {
        var model = new MainPageModel() { Text = "Title" + i };
    
        AllItems.Add(model);
    }
    AllItems = new ObservableCollection<MainPageModel>(AllItems.Reverse());
    
  • SreeeeSreeee INMember ✭✭✭✭✭
    edited March 2019

    @LandLu I am not trying to reverse my items. :'(

    Normally the listview starting from the top, I implemented WhatsApp model listview. Latest message is on the bottom and remaining items are on top of that. Please see the following screenshot.

    After this implementation, the scrollbar showing on the left side(all platforms) and mouse control behave opposite of the normal behavior(UWP only).

    I changed the listview starting to bottom by the following code.

    In the ListView set following two properties:

    FlowDirection=”RightToLeft”
    Rotation=”180″
    

    And in the view cells main layout:

    FlowDirection=”LeftToRight”
    Rotation=”180″
    

    From this blog, I got these codes. Please see the Rotate the list section. In the blog itself, they are telling about the scroll bar on the left side issue and suggested to add FlowDirection property to solve this.

  • TobyKTobyK GBMember ✭✭✭
    edited March 2019

    Instead of messing around around with UI settings - can't you just insert items into the list instead?
    Changing: Collection.Add(item)
    To: Collection.Insert(0, item) - new items always added to top....
    ?

    for your example

    // I simulate the adding operation
    AllItems = new ObservableCollection<MainPageModel>();
    for (int i=0; i<100; i++)
    {
        var model = new MainPageModel() { Text = "Title" + i };
    
        AllItems.Insert(0, model);
    }
    AllItems = new ObservableCollection<MainPageModel>(AllItems);
    
  • LandLuLandLu Member, Xamarin Team Xamurai

    Ah, now, I know you want to implement a chat view.
    I think you'd better use a third party library than implement it by yourself.
    https://github.com/CometChat/xamarin-forms-chat-sdk-demo
    https://github.com/EgorBo/CrossChat-Xamarin.Forms/
    You could refer to them to find what you need.
    Moreover, there is a paid library you could choose too: https://www.telerik.com/xamarin-ui/conversational-ui

  • SreeeeSreeee INMember ✭✭✭✭✭

    @LandLu and @TobyK

    If I provide a sample can you solve this issue?

  • SreeeeSreeee INMember ✭✭✭✭✭

    Hi @Sahadev_Gupta

    But part2 contains about my feature. Please see the Rotate the list section. In the blog itself, they are telling about the scroll bar on the left side issue and suggested to add FlowDirection property to solve this.

  • Krishna_DashKrishna_Dash Member ✭✭

    Hi,
    @Sreeee scroll not smooth work

    I also faced same issue if you found any solution please suggest me i have tried too many solution but nothing happen.

    scroll not smooth please help me

  • SreeeeSreeee INMember ✭✭✭✭✭

    @Krishna_Dash said:
    Hi,
    @Sreeee scroll not smooth work

    I also faced same issue if you found any solution please suggest me i have tried too many solution but nothing happen.

    scroll not smooth please help me

    Still, I didn't get a solution for this issue, If I get anything will update here.

  • Krishna_DashKrishna_Dash Member ✭✭

    HI @Sreeee thanks for response then what you find any alternative for listview

    need urgent solution for that

    please let me know if any one have idea really need your help

    Thanks

  • MuthuramMuthuram Member ✭✭

    Hi @Sreeee @Krishna_Dash Did u find any solution for scroll view

  • SreeeeSreeee INMember ✭✭✭✭✭

    @Muthuram said:
    Hi @Sreeee @Krishna_Dash Did u find any solution for scroll view

    Still didn't get any solution for this, if you found any please update here.

  • MuthuramMuthuram Member ✭✭

    Hi @Sreeee Do u have any sample for Scroll view Like Xamboy Chat UI .

    I am using Xamboy Chat UI .In Android its working fine but in iOS the Scroll view not working properly the Last index value only showing if i am scroll up then its showing all the message.

    Please let me know if u have a solution

  • SreeeeSreeee INMember ✭✭✭✭✭

    @Muthuram I refered following blogs for this feature.
    Part1
    Part2
    Part3

    From part 2 I got the solution for reversing the listview(first item on bottom).

  • MuthuramMuthuram Member ✭✭

    @Sreeee is it working in iOS.

  • SreeeeSreeee INMember ✭✭✭✭✭

    @Muthuram said:
    @Sreeee is it working in iOS.

    Yes, but scrollbars are showing on the left side.

  • mjromkamjromka Member ✭✭

    Did you find any solution?

  • SreeeeSreeee INMember ✭✭✭✭✭

    @mjromka said:
    Did you find any solution?

    Not yet :)

  • @Sreeee , I hope you got a solution

  • SreeeeSreeee INMember ✭✭✭✭✭
Sign In or Register to comment.