Articles in this section
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

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)
Please sign in to leave a comment
Access denied
Access denied