How to open another page when a listview item is selected in xamarin forms?

11,397

Solution 1

Define ItemSelected for your Listview:

 <ListView HasUnevenRows="true"
           ItemSelected="OnItemSelected">

Then code the handler:

    private void OnItemSelected(object sender, SelectedItemChangedEventArgs e)
    {
        var item = e.SelectedItem;
        // Your code here
    }

Solution 2

You're probably looking for TapGestureRecognizer, which you'd set up in the constructor for SchoolTools.HomePage after the call to InitializeComponent():

var mathTapRecognizer = new TapGestureRecognizer();
mathTapRecognizer.Tapped += async delegate {
    // Whatever you need to do here, like
    await Navigation.PushAsync(new MathToolsHome());
};
Math.GestureRecognizers.Add(mathTapRecognizer);

Assuming that MathToolsHome is a Page of some sort.

EDIT

Adding XAML solution...

With the way that you have your XAML, the approach I outlined won't quite work, as you can't alter settings on members of DataTemplates that way (that's why the compiler is binding Math to System.Math instead of the Label in your layout).

The easiest way to do this is to add the TapGestureRecognizer into your XAML, with a call to your code-behind.

XAML:

<Label x:Name ="Math" Text="Math" HorizontalOptions="Center">
  <Label.GestureRecognizers>
    <TapGestureRecognizer Tapped="Math_Clicked"/>
  </Label.GestureRecognizers>
</Label>

And in your code behind:

public async void Math_Clicked(object sender, EventArgs e)
{
    await Navigation.PushAsync(new MathToolsHome());
}

I've written more DataTemplate implementations with pure C# rather than XAML, but this approach ought to work.

Share:
11,397
Phoneswapshop
Author by

Phoneswapshop

Updated on June 04, 2022

Comments

  • Phoneswapshop
    Phoneswapshop almost 2 years

    Hello I am working on a mobile app that is built using xamarin forms the main page is a list view with that lists categories. what I need to happen is when the user clicks a item in the list view it opens new page in the app heres the xaml code:

    <?xml version="1.0" encoding="UTF-8"?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="SchoolTools.HomePage">
         <ListView HasUnevenRows="true">
                   <ListView.ItemTemplate>
          <DataTemplate>
            <ViewCell>
              <Frame Padding="0,0,0,8" BackgroundColor="#d2d5d7">
                <Frame.Content>
                  <Frame Padding="15,15,15,15"   OutlineColor="Gray" BackgroundColor="White">
                    <Frame.Content>
                      <StackLayout Padding="20,0,0,0"  Orientation="Horizontal" HorizontalOptions="CenterAndExpand">
                        <Label x:Name="Internet" Text="Internet" HorizontalOptions="Center">
                            </Label>
                            <Label x:Name ="Math" Text="Math" HorizontalOptions="Center">
                            </Label>
                            <Label x:Name="Science" Text="Science" HorizontalOptions="Center">
                            </Label>
                            <Label x:Name ="Handwriting" Text="Handwriting" HorizontalOptions="Center">
                            </Label>
                              <Label x:Name ="FlashCards" Text="FlashCards" HorizontalOptions="Center">
                            </Label>
                            <Label x:Name="Books"  Text="Books" HorizontalOptions="Center">
                            </Label>   
                      </StackLayout>
                    </Frame.Content>
                  </Frame>
                </Frame.Content>
              </Frame>
            </ViewCell>
          </DataTemplate>
        </ListView.ItemTemplate>
      </ListView>
    </ContentPage>
    

    so my question is whats the code beind to make the math filed take you to the MathToolsHome class? and so on and so forth?

    any help would be amazing!

    Thanks a million in advance! :)

  • Phoneswapshop
    Phoneswapshop almost 8 years
    Thanks for the reply I get this error when I try your code: /Users/JailBrak0e/Projects/SchoolTools/SchoolTools/HomePage.‌​xaml.cs(9,9): Error CS0117: System.Math' does not contain a definition for GestureRecognizers' (CS0117) (SchoolTools)
  • DavidS
    DavidS almost 8 years
    See updated answer which ought to work better with a XAML-defined DataTemplate.
  • Tharkius
    Tharkius almost 8 years
    I don't think there's a need to complicate that much, Christine's answer should work just fine.