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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to create a horizontal listview in Xamarin.Forms?

Platform: Xamarin.Forms |
Control: SfListView |
Published Date: October 30, 2018 |
Last Revised Date: November 12, 2019

The Xamarin.Forms ListView displays an item in vertical or horizontal view by setting the Orientation property of ListView. The default orientation is vertical. The horizontal listview supports all the essential features such as grouping, swiping, template selector, pull-to-refresh, load more and much more.

xaml

<ContentPage xmlns:sync="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
             xmlns:dataSource="clr-namespace:Syncfusion.DataSource;assembly=Syncfusion.DataSource.Portable">
    <ContentPage.Content>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid x:Name="headerGrid" HeightRequest="45">
                <Label Text="Photo Gallery"/>
            </Grid>
            <syncfusion:SfListView x:Name="listView" Orientation="Horizontal"
                                   SelectionMode="None" Grid.Row="1"
                                   ItemsSource="{Binding Gallerynfo}">
                <syncfusion:SfListView.ItemTemplate>
                    <DataTemplate>
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*" />
                                    <RowDefinition Height="48" />
                                </Grid.RowDefinitions>
                                <Image Source="{Binding Image}" Aspect="Fill"/>
                                <Label Grid.Row="1" Text="{Binding ImageTitle}"/>
                            </Grid>
                    </DataTemplate>
                </syncfusion:SfListView.ItemTemplate>
            </syncfusion:SfListView>
        </Grid>
    </ContentPage.Content>
</ContentPage>

 

Output:

 Horizontal ListView

 

Sample link: 

Horizontal ListView in Xamarin.Forms

Documentation References

The below documentation references will help you further to understand ListView usages,

 

API Documentation - https://help.syncfusion.com/cr/xamarin/Syncfusion.ListView.XForms.html

ListView Getting Started - https://help.syncfusion.com/xamarin/listview/getting-started

Horizontal ListView - https://help.syncfusion.com/xamarin/listview/viewappearance#horizontal-listview

https://help.syncfusion.com/xamarin/listview/viewappearance#horizontal-list-inside-vertical-list

 

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment
Comments
Srini T
Oct 18, 2019

Can you change the styling for the selected item vs the rest of the items on the horizontal list view? Can events be triggered on selecting items from the list view to display related content? more like Master detail page.

Thanks

Reply
Sangeetha Raju [Syncfusion]
Oct 20, 2019

Hi Srini,

We would like to inform you that you can apply styles for the SelectedItem using the SelectedItemTemplate as like below code snippet.

…..

You can perform Selection related operations in the SelectionChanging and SelectionChanged event.

listView.SelectionChanging += ListView_SelectionChanging;

private void ListView_SelectionChanging(object sender, ItemSelectionChangingEventArgs e) { ... }

listView.SelectionChanged += ListView_SelectionChanged;

private void ListView_SelectionChanged(object sender, Syncfusion.ListView.XForms.ItemSelectionChangedEventArgs e) { …
}

We have prepared a sample for your reference. Please find the sample from the below link.

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/HorizontalList-352046590

Please let us know if you have any concern.

Regards, Sangeetha Raju.

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon