c# - 如何在共享应用程序资源中实现导航按钮？

Question

我目前正在尝试创建一个简单的应用程序，它从我创建的 API 中提取数据并将其显示在列表中。然后，您应该能够单击要导航到带有图像查看器等的详细 View 页面的列表项。为此，我需要导航到名为 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>

我无法将任何事件绑定(bind)到 App.xaml 中的按钮，因此我认为我需要使用 ICommand 接口(interface)。到目前为止，我在构建这个东西的过程中可能还犯了一个更根本的错误。

TL;DR 我的目标:我想调整数据模板，以便每个按钮都链接到一个页面 PlanViewer.xaml，其中包含一个描述应该显示哪个计划的参数(例如 ID 或文件路径)。

Answer 1

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

我不知道您想使用什么 UI 元素，但为此我将选择 Windows 8.1 和 WP 8.1 都支持的一个。 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 进行了数据绑定(bind)。命令是当用户单击按钮时我要执行的 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
}

---

现在让我们为要使用的 ListView 设置一个 ViewModel。 (应该是共享项目的一部分)

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，它应该绑定(bind)“艺术家、歌曲和按钮(命令和命令参数)”。我通常在每个页面的加载函数中执行此操作。

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
}

---

就是这样，每次用户单击按钮时，无论在哪个平台上，它都会执行命令功能。

示例截图