How to implement a navigation button in application shared resources?

Question

I'm currently trying to create a simple application that extracts data from the API I created and displays it in a list. Then you will have to click on the list items that will be moved to the detailed view page using the image viewer, etc. To do this, I need to go to a page with a name PlanViewer.xaml(currently only available for the Windows Phone application part, will do for both).

For my job list, I created the following data template in my general App.xaml:

    <DataTemplate x:Key="PlanDataTemplate">
        <StackPanel Orientation="Horizontal">
            <Button Name="NavigatePlan" Tag="{Binding FilePath}">
                <StackPanel>
                    <TextBlock Style="{StaticResource SubheaderTextBlockStyle}" Text="{Binding Name}" />
                    <TextBlock Style="{StaticResource TitleTextBlockStyle}" Text="{Binding LastUpdate}" />
                </StackPanel>
            </Button>
        </StackPanel>
    </DataTemplate>

I applied it in mine MainPage.xamlas shown below:

<ItemsControl x:Name="PlanList" ItemTemplate="{StaticResource PlanDataTemplate}" ItemsSource="{Binding PlanItems}" >
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

- ​​ App.xaml, , ICommand. , .

TL; DR : , PlanViewer.xaml , , (, ).

Answer 1

. Model, View ViewModel.

, , , Windows 8.1, WP 8.1. ListView, Project MainPage.xaml .

---

<ListView x:Name="myListView">
    <ListView.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="{Binding Artist}"></TextBlock>
                <TextBlock Text="{Binding Song}"></TextBlock>
                <Button Command="{Binding ElementName=myListView, Path=DataContext.SimpleCommand}"
                        CommandParameter="{Binding Extra}"
                        x:Name="mybutton" Width="200" Height="50" FontFamily="Global User Interface" Content="Click Me"/>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

, Button Command CommandParameter. - ViewModel, , . CommandParameter - , . TAG.

---

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

---

( )

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;
}

---

( )

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
}

---

ViewModel ListView (s). ( )

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<sample_model> CreateData()
    {
        ObservableCollection<sample_model> my_list = new ObservableCollection<sample_model>();
        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<sample_model> DataSource{ get; set; }

}

---

, , ListView ViewModel, "Artist, Song Button (Command and CommandParamters)". .

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
}

---

, , , , .