Sajeev C
Sajeev C

Reputation: 1538

How to navigate to another page using Command Property of a Button in WP 8.1 using MVVM?

I have a ListView & each List Item in it is a Button containing an Image. Upon clicking a Button I am trying to navigate to another page (say., page2.xaml) I am using MVVM light framework.

Here's my XAML:

  <ListView  Grid.Row="1" Grid.ColumnSpan="2" 
             Visibility="Visible"
             ItemsSource="{Binding buttonLists}" >
        <ListView.ItemTemplate>
            <DataTemplate>
                <Button Style="{StaticResource ImageButton}" Command="{Binding GoToCommand}">
                    <Grid Style="{StaticResource GridItem}" Background="Blue">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"></RowDefinition>
                            <RowDefinition Height="Auto"></RowDefinition>
                        </Grid.RowDefinitions>
                        <Image Source="{Binding imageSource}"></Image>
                    </Grid>
                </Button>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

In my ViewModel, inside the class I gave,

    public ICommand GoToCommand
    {
        get
        {
            return new RelayCommand(GoToCommand);
        }
    }

private readonly INavigationService gotoNavigationService;

    private void GoToCommand()
    {

    }

What navigation command should be given inside GoToCommand()? I am not much familiar with RelayCommand. Thanks.

Upvotes: 0

Views: 1569

Answers (2)

Sajeev C
Sajeev C

Reputation: 1538

At last I found out a solution. Kudos.

As I am using MVVM, I had to include these two.

using GalaSoft.MvvmLight.Command;
using GalaSoft.MvvmLight.Ioc;

Inside the class, I made the following changes to the methods:

    private void GoTo()
    {
        var navigationService = SimpleIoc.Default.GetInstance<INavigationService>();
        navigationService.NavigateTo<Page2>(null);
    }

    public ICommand GoToCommand
    {
        get
        {
            return new RelayCommand(GoTo);
        }
    }

Ta-da! It works. I can navigate to Page2.xaml

Upvotes: 1

Luke Holmwood
Luke Holmwood

Reputation: 60

Here is maybe what you are looking for:

Page Navigation using MVVM in Store App

Its for Store App but the concept is very similar

Upvotes: 0

Related Questions