Como implementar um botão de navegação em resources de aplicativos compartilhados?

Atualmente, estou tentando criar um aplicativo simples que extraia dados de uma API que fiz e os exibe em uma lista. Supõe-se que você possa clicar nos itens da lista para navegar em uma página de visualização detalhada com um visualizador de imagens etc. Para que isso funcione, preciso navegar para uma página chamada PlanViewer.xaml (atualmente disponível apenas para o aplicativo Windows Phone parte, vai fazer para ambos embora).

Para minha lista funcionar, construí o seguinte modelo de dados em meu App.xaml compartilhado:

       

Eu aplico-o no meu MainPage.xaml como mostrado aqui:

        

Não consigo vincular nenhum evento ao botão no App.xaml , por isso acho que preciso usar uma interface ICommand . Eu também poderia ter um erro muito mais fundamental em como eu construí isso até agora.

TL; DR para o meu objective: Eu quero ajustar o datatemplate para que cada botão se conecte a uma página PlanViewer.xaml com um argumento descrevendo qual plano deve ser mostrado (por exemplo, ID ou caminho do arquivo).

Esta é uma solução Universal App. É possível ver basicamente um tutorial sobre Model, View e ViewModel.

Eu não sei qual elemento de interface do usuário você deseja usar, mas para isso eu vou escolher um que é suportado no Windows 8.1 e WP 8.1. O ListView, portanto, em ambos os MainPage.xaml do Project permite definir isso.


            

Como você pode ver, eu conectei o Button com um Command e um CommandParameter . O comando é a function no ViewModel que eu quero executar quando o usuário clica no botão. O CommandParameter é um object que você deseja passar para sua function de comando. No seu caso, seu TAG.


Namespaces

 using System.Collections.ObjectModel; // ObservableCollection using System.Windows.Input; // ICommand 

Agora vamos definir um comando (deve ser parte do projeto compartilhado)

 public class MySimpleCommand : ICommand { public void Execute(object parameter) { // do stuff based off your tags string tag = parameter as string; if(tag == "WHATEVER_YOU_WANT") { } // void of the trigger libraries, lets make this simple // navigate to your page Frame rootFrame = Window.Current.Content as Frame; rootFrame.Navigate(typeof(YOUR_PAGE)); } public bool CanExecute(object parameter) { return true; } public event EventHandler CanExecuteChanged; } 

Agora vamos configurar um modelo simples (deve fazer parte do projeto compartilhado)

 public class sample_model { public sample_model(string artist, string song, string extra = "") { this.Artist = artist; this.Song = song; this.Extra = extra; } public string Artist { get; set; } public string Song { get; set; } public string Extra { get; set; } // this is your tag } 

Agora vamos configurar um ViewModel para nossos ListView (s) para usar. (Deve fazer parte do projeto compartilhado)

 public class sample_viewmodel { public sample_viewmodel() { this.DataSource = CreateData(); this.SimpleCommand = new MySimpleCommand(); // create the command } // create a static list for our demo private ObservableCollection CreateData() { ObservableCollection my_list = new ObservableCollection(); my_list.Add(new sample_model("Faith + 1", "Body of Christ", "A Track")); my_list.Add(new sample_model("Faith + 1", "Christ Again", "A Track")); my_list.Add(new sample_model("Faith + 1", "A Night With the Lord", "A Track")); my_list.Add(new sample_model("Faith + 1", "Touch Me Jesus", "A Track")); my_list.Add(new sample_model("Faith + 1", "I Found Jesus (With Someone Else)", "A Track")); my_list.Add(new sample_model("Faith + 1", "Savior Self", "A Track")); my_list.Add(new sample_model("Faith + 1", "Christ What a Day", "A Track")); my_list.Add(new sample_model("Faith + 1", "Three Times My Savior", "A Track")); my_list.Add(new sample_model("Faith + 1", "Jesus Touched Me", "A Track")); my_list.Add(new sample_model("Faith + 1", "Lord is my Savior", "A Track")); my_list.Add(new sample_model("Faith + 1", "I Wasn't Born Again Yesterday", "A Track")); my_list.Add(new sample_model("Faith + 1", "Pleasing Jesus", "A Track")); my_list.Add(new sample_model("Faith + 1", "Jesus (Looks Kinda Hot)", "A Track")); my_list.Add(new sample_model("Butters", "What What", "B Track")); return my_list; } public ICommand SimpleCommand { get; set; } public ObservableCollection DataSource{ get; set; } } 

E finalmente, vamos ligar o ListView ao nosso ViewModel, que deve ligar o “artista, música e botão (Command & CommandParamters)”. Eu costumo fazer isso na function Load de cada página.

 private void Page_Loaded(object sender, RoutedEventArgs e) { sample_viewmodel viewmodel = new sample_viewmodel(); // create the view model myListView.DataContext = viewmodel; // set the datacontext (this will link the commands) myListView.ItemsSource = viewmodel.DataSource; // set the ItemsSource, this will link the Artist,Songs } 

Lá você tem, cada vez que o usuário clica no botão, não importa qual plataforma ele irá executar a function de comando.

Captura de canvas da amostra insira a descrição da imagem aqui