如何在共享应用资源中实现导航按钮？

Question

我目前正在尝试创建一个简单的应用程序，该应用程序从我创建的 API 中提取数据并将其显示在列表中。然后，您应该能够单击要导航到带有图像查看器等的详细视图页面的列表项。为此，我需要导航到名为 PlanViewer.xaml 的页面（目前仅适用于 Windows Phone 应用程序部分，但两者都适用）。

为了使我的列表生效，我在共享的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>

我将它应用到我的MainPage.xaml 中，如下所示：

<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，并带有描述应该显示哪个计划的参数（例如 ID 或文件路径）。

Answer 1

这是一个通用应用解决方案。它基本上可以看作是关于模型、视图和视图模型的教程。

我不知道您要使用什么 UI 元素，但为此我将选择一个同时受 Windows 8.1 和 WP 8.1 支持的 UI 元素。 ListView，所以在两个项目的 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>

如您所见，我使用 Command 和 CommandParameter 对 Button 进行了数据绑定。该命令是用户单击按钮时要执行的 ViewModel 中的函数。 CommandParameter 是您要传递给 Command 函数的对象。在你的情况下，你的 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。我通常在每个页面的加载函数中这样做。

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
}

---

你有它，每次用户单击按钮时，无论在什么平台上都会执行命令功能。

示例截图