Category / Section
How to navigate across views by selecting an item from the horizontal list view?
1 min read
SfListView allows to layout the items in horizontal direction by setting its Orientation property value as ‘Horizontal’. Using ItemTapped event bring any desired View above the horizontal list as like below.
XAML
<ContentPage> <ContentPage.Content> <Grid x:Name="GridView"> <Grid.RowDefinitions> <RowDefinition Height="50"/> <RowDefinition Height="*"/> <RowDefinition Height="100"/> </Grid.RowDefinitions> <Label Text="Tap image to expand" BackgroundColor="#d3d3d3" FontSize="Medium" FontAttributes="Bold" VerticalTextAlignment="Center"/> <Grid BackgroundColor="Bisque" Grid.Row="1"> <Grid.RowDefinitions> <RowDefinition Height="100" /> <RowDefinition Height="30" /> <RowDefinition Height="30" /> </Grid.RowDefinitions> <Image Source="{Binding ContactImage}" VerticalOptions="Center" HorizontalOptions="Center" HeightRequest="200" Grid.Row="0"/> <Label LineBreakMode="NoWrap" TextColor="#474747" Text="{Binding ContactName}" Grid.Row="1" FontSize="20" HorizontalTextAlignment="Center" /> <Label Grid.Row="2" TextColor="#474747" LineBreakMode="NoWrap" Text="{Binding ContactNumber}" FontSize="20" HorizontalTextAlignment="Center" /> </Grid> <listView:SfListView x:Name="list" Grid.Row="2" ItemTapped="list_ItemTapped" SelectionBackgroundColor="#d3d3d3" ItemSize="70" ItemsSource="{Binding contactsinfo}" ItemSpacing="0,0,5,0" SelectionMode="Single" Orientation="Horizontal"> <listView:SfListView.ItemTemplate> <DataTemplate x:Name="ItemTemplate" x:Key="ItemTemplate" > <ViewCell> <ViewCell.View> <Grid x:Name="grid" RowSpacing="5"> <Image Source="{Binding ContactImage}" VerticalOptions="Center" HorizontalOptions="Center" HeightRequest="50"> </Image> </Grid> </ViewCell.View> </ViewCell> </DataTemplate> </listView:SfListView.ItemTemplate> </listView:SfListView> </Grid> </ContentPage.Content> </ContentPage>
C#
public partial class MainPage : ContentPage { public MainPage() { InitializeComponent(); list.BindingContext = new ContactsViewModel(); } private void list_ItemTapped(object sender, Syncfusion.ListView.XForms.ItemTappedEventArgs e) { GridView.BindingContext = e.ItemData; } }
Screenshot
Click here to download the sample.