CODEWITHSUNDEEP
xamarinxamarin.forms
yesman
yesman

Reputation: 7848

Fire a command on tap in ListView.ItemSource

In a Xamarin project I have this ListView inside a view called menu.xaml:

        <ListView x:Name="listView" x:FieldModifier="public">
            <ListView.ItemsSource>
                <x:Array Type="{x:Type local1:MasterPageItem}">
                    <local1:MasterPageItem Title="foo" TargetType="{x:Type local:FooPage}" />
                    <local1:MasterPageItem Title="bar" TargetType="{x:Type local:BarPage}" />
                    <local1:MasterPageItem Title="logout" TargetType="{x:Type local:LogoutPage}"  />
                </x:Array>
            </ListView.ItemsSource>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid Padding="5,10">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="30"/>
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Image Source="{Binding IconSource}" />
                            <Label Grid.Column="1" Text="{Binding Title}" />
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

These produces this list:

enter image description here

In my viewmodel, I have this command: 

class MasterViewModel : BaseViewModel
{
    public ICommand LogoutActivity { get; private set; }

    public MasterViewModel()
    {
        LogoutActivity = new Command(async () => await LogoutAsync());
    }
}

Tapping one of these items opens a corresponding page. I want the logout link to fire a command instead of opening a page. How do I accomplish this?

Upvotes: 0

Views: 73

Answers (2)

Tuğ&#231;e Arar
Tuğ&#231;e Arar

Reputation: 806

You can add Tapped Gesture Recognizer to your grid:

<Grid Padding="5,10">
    <Grid.GestureRecognizers>
        <TapGestureRecognizer Command="{Binding LoginActivity}" CommandParameter="{Binding .}">
        </TapGestureRecognizer>
    </Grid.GestureRecognizers>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="30"/>
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Image Source="{Binding IconSource}" />
    <Label Grid.Column="1" Text="{Binding Title}" />
</Grid>

For executing specific action for menu items, you can add unique property to your MasterPageItem model and set for each of them.

Upvotes: 1

Marcel Callo
Marcel Callo

Reputation: 437

public partial class MainPage : MasterDetailPage
{
    public MainPage ()
    {

        masterPage.listView.ItemSelected += OnItemSelected;
    }

    void OnItemSelected (object sender, SelectedItemChangedEventArgs e)
    {
        var item = e.SelectedItem as MasterPageItem;
        if (item != null) {

            // Check here if is the logout link that is clicked and perform the required a action

        }
    }
}

Upvotes: 0

Related Questions