0

I would like to navigate to another page from the specific list but at the moment no matter what list i click, it will still go to the same page. What should I do. I am still new here and to learn more. Thanks. Below are the codes.

MainPage.xaml

<!--Pivot Control-->
    <phone:Pivot Title="DAILY ROUTINE">
        <!--Pivot item one-->
        <phone:PivotItem Header="activity">
            <!--Double line list with text wrapping-->
            <phone:LongListSelector x:Name="MainLongListSelector" Margin="0,0,-12,0" ItemsSource="{Binding Items}" SelectionChanged="LongListSelector_SelectionChanged">
                <phone:LongListSelector.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Margin="0,0,0,17">
                            <TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                        </StackPanel>
                    </DataTemplate>
                </phone:LongListSelector.ItemTemplate>
            </phone:LongListSelector>
        </phone:PivotItem>

        <!--Pivot item two-->
        <phone:PivotItem Header="today">

        </phone:PivotItem>
    </phone:Pivot>

MainPage.xaml.cs

namespace PivotApp3
{
    public partial class MainPage : PhoneApplicationPage
    {
    // Constructor
    public MainPage()
    {
        InitializeComponent();

        // Set the data context of the listbox control to the sample data
        DataContext = App.ViewModel;

        // Sample code to localize the ApplicationBar
        //BuildLocalizedApplicationBar();
    }

    // Load data for the ViewModel Items
    protected override void OnNavigatedTo(NavigationEventArgs e)
    {
        if (!App.ViewModel.IsDataLoaded)
        {
            App.ViewModel.LoadData();
        }
    }

    private void LongListSelector_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        NavigationService.Navigate(new Uri("/todolistPage.xaml", UriKind.Relative));
    }

}

}

todolistPage.xaml

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!--TitlePanel contains the name of the application and page title-->
    <StackPanel Grid.Row="0" Margin="12,17,0,28">
        <TextBlock Text="TO DO LIST" Style="{StaticResource PhoneTextNormalStyle}"/>
        <TextBlock Text="add" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
    </StackPanel>

    <!--ContentPanel - place additional content here-->
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

    </Grid>
</Grid>

MainViewModel.cs

namespace PivotApp3.ViewModels
{
public class MainViewModel : INotifyPropertyChanged
{
    public MainViewModel()
    {
        this.Items = new ObservableCollection<ItemViewModel>();
    }

    /// <summary>
    /// A collection for ItemViewModel objects.
    /// </summary>
    public ObservableCollection<ItemViewModel> Items { get; private set; }

    private string _sampleProperty = "Sample Runtime Property Value";
    /// <summary>
    /// Sample ViewModel property; this property is used in the view to display its value using a Binding
    /// </summary>
    /// <returns></returns>
    public string SampleProperty
    {
        get
        {
            return _sampleProperty;
        }
        set
        {
            if (value != _sampleProperty)
            {
                _sampleProperty = value;
                NotifyPropertyChanged("SampleProperty");
            }
        }
    }

    /// <summary>
    /// Sample property that returns a localized string
    /// </summary>
    public string LocalizedSampleProperty
    {
        get
        {
            return AppResources.SampleProperty;
        }
    }

    public bool IsDataLoaded
    {
        get;
        private set;
    }

    /// <summary>
    /// Creates and adds a few ItemViewModel objects into the Items collection.
    /// </summary>
    public void LoadData()
    {
        // Sample data; replace with real data
        this.Items.Add(new ItemViewModel() { LineOne = "+ To Do List" });
        this.Items.Add(new ItemViewModel() { LineOne = "+ Reminder" });
        this.Items.Add(new ItemViewModel() { LineOne = "+ Expenses" });

        this.IsDataLoaded = true;
    }

    public event PropertyChangedEventHandler PropertyChanged;
    private void NotifyPropertyChanged(String propertyName)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (null != handler)
        {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

}

ItemViewModel.cs

using System;
using System.ComponentModel;
using System.Diagnostics;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;

namespace PivotApp3.ViewModels
{
public class ItemViewModel : INotifyPropertyChanged
{
    private string _lineOne;
    /// <summary>
    /// Sample ViewModel property; this property is used in the view to display its value using a Binding.
    /// </summary>
    /// <returns></returns>
    public string LineOne
    {
        get
        {
            return _lineOne;
        }
        set
        {
            if (value != _lineOne)
            {
                _lineOne = value;
                NotifyPropertyChanged("LineOne");
            }
        }
    }

    private string _lineTwo;
    /// <summary>
    /// Sample ViewModel property; this property is used in the view to display its value using a Binding.
    /// </summary>
    /// <returns></returns>
    public string LineTwo
    {
        get
        {
            return _lineTwo;
        }
        set
        {
            if (value != _lineTwo)
            {
                _lineTwo = value;
                NotifyPropertyChanged("LineTwo");
            }
        }
    }

    private string _lineThree;
    /// <summary>
    /// Sample ViewModel property; this property is used in the view to display its value using a Binding.
    /// </summary>
    /// <returns></returns>
    public string LineThree
    {
        get
        {
            return _lineThree;
        }
        set
        {
            if (value != _lineThree)
            {
                _lineThree = value;
                NotifyPropertyChanged("LineThree");
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    private void NotifyPropertyChanged(String propertyName)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (null != handler)
        {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

}

Gene Lim
  • 1,068
  • 2
  • 14
  • 36
  • You probably want to manipulate the datacontext of the tapped item in your list. [Read here](http://stackoverflow.com/a/21089912/1028868) – Pantelis Jan 14 '14 at 13:24
  • Hi @Pantelis, honestly I am not sure what does datacontext means here as this is still new for me. – Gene Lim Jan 14 '14 at 13:32
  • [DataContext](http://www.codeproject.com/Articles/321899/DataContext-in-WPF) – Pantelis Jan 14 '14 at 13:42
  • [Here][1] is the same kind of problem so it may be helpful for you [1]: http://stackoverflow.com/questions/21016140/how-can-i-navigate-to-a-certain-pivot-page-in-windows-phone/21016607#21016607 – Jaihind Jan 14 '14 at 13:51
  • Thanks for the link. looking into it – Gene Lim Jan 14 '14 at 13:51

1 Answers1

3

The most trivial solution is:

private void LongListSelector_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
   var si = MainLongListSelector.SelectedItem as PivotApp3.ViewModels.ItemViewModel;

    if(si.LineOne.Equals("+ To Do List"))
       NavigationService.Navigate(new Uri("/todolistPage.xaml", UriKind.Relative));
    else if(si.LineOne.Equals("another"))
       NavigationService.Navigate(new Uri("/another.xaml", UriKind.Relative));
}

You don't have to use ItemViewModel to bind some data to the list. If you will use your own class - than you can place URI "behind" your item and use it. (It will be better solution).

Example:

public void LoadData()
{
    // Sample data; replace with real data
    this.Items.Add(new ItemViewModel() { LineOne = "+ To Do List", GotoUri = new Uri("/todolistPage.xaml", UriKind.Relative) });
    this.Items.Add(new ItemViewModel() { LineOne = "+ Reminder", GotoUri = new Uri("/other.xaml", UriKind.Relative) });
    this.Items.Add(new ItemViewModel() { LineOne = "+ Expenses", GotoUri = new Uri("/other2.xaml", UriKind.Relative) });

    this.IsDataLoaded = true;
}

Then:

public class ItemViewModel : INotifyPropertyChanged
{
  public Uri GotoUri {get; set;}
  //...
}

private void LongListSelector_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
   var si = MainLongListSelector.SelectedItem as PivotApp3.ViewModels.ItemViewModel;
       if(si != null)
       NavigationService.Navigate(si.GotoUri, UriKind.Relative));
}
Rayet
  • 298
  • 1
  • 11
  • Hi, regarding SelectedIndex, where is that from? thanks – Gene Lim Jan 14 '14 at 13:26
  • Sorry, my mistake. Just LongListSelector has no SelectedIndex. In this case you must use SelectedItem what is not so elegant... – Rayet Jan 14 '14 at 13:37
  • I am getting red underlines below this codes LongListSelector.SelectedItem as ItemViewModel; it said ItemViewModel is not found and LongListSelector.SelectedItem requires object reference for non-static field, method, or property. – Gene Lim Jan 14 '14 at 13:40
  • I suggested the name of the method. You have to change LongListSelector to MainLongListSelector. – Rayet Jan 14 '14 at 13:45
  • Oh that fixed it but the ItemViewModel still has the underline below mentioning that it could not be found. Not sure why but I actually still have the ItemViewModel.cs file – Gene Lim Jan 14 '14 at 13:49
  • If you have some namespace in ItemViewModel class, use it as using in MainPage.xaml.cs – Rayet Jan 14 '14 at 13:52
  • Do you mean this ? xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" – Gene Lim Jan 14 '14 at 13:53
  • No. Something like: namespace XYZ { class ItemViewModel { /*...*/ }} then you write using XYZ – Rayet Jan 14 '14 at 13:55
  • namespace PivotApp3.ViewModels this is in my namespace in ItemViewModel . I have tried it but it said that the namespace is used like a type – Gene Lim Jan 14 '14 at 13:59
  • please put all code of ItemViewModel.cs class. Look into my changes in code. – Rayet Jan 14 '14 at 13:59
  • So, var si = MainLongListSelector.SelectedItem as PivotApp3.ViewModels.ItemViewModel; should work. You can put URI to ItemViewModel and use it without all this "if's". – Rayet Jan 14 '14 at 14:05
  • One more question sir, When i press the selected list, it goes to a new page. When I press back and press it again, it wont work anymore. Why is this so sir?. thanks – Gene Lim Jan 14 '14 at 14:07
  • I think you're missing information about objects contained in the list. Try use URI as field or property for ItemViewModel. – Rayet Jan 14 '14 at 14:08
  • i've accepted your answer but not able to vote yet as i dont have enough reputation. sorry – Gene Lim Jan 14 '14 at 14:10
  • Regarding it not working when you go back and press it again. Make sure you set MainLongListSelector.SelectedItem = Null after your Navigation code. This will reinitialize the SelectedItem variable so you can reselect the item. – Ebsan Jan 14 '14 at 20:55
  • @WiteCastle, sorry for the late reply. I made it Null like what you said and it works. Thanks – Gene Lim Jan 15 '14 at 06:54