Articles in this section

How to navigate across views by selecting an item from the horizontal list view?

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

Tap image to expand

 

Click here to download the sample.

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Access denied
Access denied