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.

How to raise click event on nested listview ?

VIVEKNEGIVIVEKNEGI USMember ✭✭✭

Hello all,

Can anyone please help me to understand how to call nested item click event in prism?

Best Answer

Answers

  • LandLuLandLu Member, Xamarin Team Xamurai

    What's the architecture of the page which contains this nested listview?
    I noticed that you mentioned prism. Have you tried to use binding to achieve it?
    A listview has a bindable property called SelectedItem. You could bind it to any property in your view model.
    If its value changes, it means one item has been clicked.
    Or try to convert the ItemSelected to command using:
    https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/behaviors/reusable/event-to-command-behavior

    <ListView.Behaviors>
         <local:EventToCommandBehavior EventName="ItemSelected" Command="{Binding BindingContext.Command, Source={x:Reference page}" Converter="{StaticResource SelectedItemConverter}" />
    </ListView.Behaviors>
    

    Use Source={x:Reference page} here to change its source to your root page.

  • VIVEKNEGIVIVEKNEGI USMember ✭✭✭
    edited August 6

    @LandLu
    I want a click event on Image.

    <List>
    <ListView.ItemTemplate>
    <DataTemplate>
     <ViewCell>
    <List>
    <ListView.ItemTemplate>
     <DataTemplate>
      <ViewCell>
    <StackLayout>
    <Image>
     <Image.GestureRecognizers>
     <TapGestureRecognizer/>
    </Image.GestureRecognizers>
    </Image>
    </StackLayout>
     </ViewCell>
    </DataTemplate>
    </ListView.ItemTemplate>
    </ListView>
     </ViewCell>
    </DataTemplate>
    </ListView.ItemTemplate>
    </ListView>
    

    I want a click event on Image.

  • LandLuLandLu Member, Xamarin Team Xamurai

    You could register it on the current page directly.
    Or use a command as I suggested above.

  • VIVEKNEGIVIVEKNEGI USMember ✭✭✭
    edited August 10

    @LandLu

    <ContentPage.Resources>
        <ResourceDictionary>
            <converter:SelectedItemEventArgsToSelectedItemConverter x:Key="SelectedItemConverter" />
        </ResourceDictionary>
    </ContentPage.Resources>
        <StackLayout BackgroundColor="White" HorizontalOptions="FillAndExpand">
            <Label Text="Hello" />
            <ListView ItemsSource="{Binding InnerList}" BackgroundColor="White" HasUnevenRows="True">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
    
                            <Grid Padding="10">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                                <Label Text="{Binding Name}" Grid.Column="0" Grid.Row="0" />
    
                                <ListView ItemsSource="{Binding Lists}"  BackgroundColor="Red" HasUnevenRows="True" Grid.Column="0" Grid.Row="1">
                                <ListView.ItemTemplate>
                                    <DataTemplate>
                                        <ViewCell>
    
                                            <StackLayout>
    
                                                <Image Source="{Binding ImageUrl}"/>
    
    
                                            </StackLayout>
                                        </ViewCell>
                                    </DataTemplate>
                                </ListView.ItemTemplate>
    
                                    <ListView.Behaviors>
                                        <local:EventToCommandBehavior EventName="ItemSelected"  Command="{Binding OutputAgeCommand, Source={x:Reference Page}}" Converter="{StaticResource SelectedItemConverter}"/>
    
    
                                    </ListView.Behaviors>
    
                                    </ListView>
                            </Grid>
    
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
    
            </ListView>
    
    
        </StackLayout>
    

    Still not working..... Can you please try at your end and help please

  • LandLuLandLu Member, Xamarin Team Xamurai

    I tried to use the code like:

    <ListView ItemsSource="{Binding Items}" HasUnevenRows="True">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <StackLayout>
                        <ListView ItemsSource="{Binding}" ItemSelected="ListView_ItemSelected">
                            <ListView.ItemTemplate>
                                <DataTemplate>
                                    <ViewCell>
                                        <Label Text="{Binding}"/>
                                    </ViewCell>
                                </DataTemplate>
                            </ListView.ItemTemplate>
                        </ListView>
                        <Label Text="footer"/>
                    </StackLayout>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
    

    Register the selected event on the inner list view directly on the page. It raises successfully like:

    But I still don't recommend putting a list view inside a list view. The inner list view can't be scrolled as the conflict. List view has a grouped feature:
    https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/listview/customizing-list-appearance#grouping
    You could use it to build the header and footer for each section.

  • VIVEKNEGIVIVEKNEGI USMember ✭✭✭


    @LandLu Still I am not able to achieve inner listview click even...

    I have attached a screenshot.. could you help me how to create such design and get click event on each item ?

  • VIVEKNEGIVIVEKNEGI USMember ✭✭✭

    Thanks @LandLu , I am able to raise click event now.

Sign In or Register to comment.