如何实现共享应用资源导航按钮？ [英] How to implement a navigation button in shared application resources?
问题描述
目前，我正在试图创建一个简单的应用程序，从我做了一个API中提取数据，并将其显示在列表中。然后，您应该是能够单击要导航到具有图片浏览器等，对于详细视图页面列表项工作，我需要导航到一个名为页 PlanViewer.xaml （目前仅适用于Windows Phone应用程序的一部分，将两个虽然做的）。
I'm currently trying to create a simple app that pulls data from an API I made and displays it in a list. You are then supposed to be able to click the list items to be navigated to a detailed view page with an image viewer etc. For that to work I need to navigate to a page called PlanViewer.xaml (currently only available for the Windows Phone app part, will do for both though).
有关我的名单工作，我建了以下数据模板在我的共享的App.xaml ：
For my list to work I built the following data template in my shared 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 接口。我可能也有我如何建造这个东西至今一个更为基本的错误。
I can't bind any events to the button in the App.xaml, so I think I need to use an ICommand interface. I might also have a much more fundamental mistake in how I built this thing so far.
TL; DR为我的目标：我想调整的DataTemplate让每一个按钮链接到一个网页 PlanViewer.xaml 有一个参数，它描述了计划，被认为是如图（如ID或文件路径）。
TL;DR for my goal: I want to adjust the datatemplate so that every button links to a page PlanViewer.xaml with an argument describing which plan is supposed to be shown (e.g. ID or file path).
推荐答案
这是一个通用的应用解决方案。这是可以看到的基本上是一个教程模型，视图，视图模型和
This is an Universal App solution. It's can view as basically a tutorial on Model, View,and ViewModel.
我不知道UI元素，你想用什么，但是为了这个，我会挑这是在Windows 8.1和WP 8.1支持的。 ListView控件，所以在这两个项目的MainPage.xaml中可以定义。
I don't know what UI Element you want to use, but for this I going to pick a one that is supported in both Windows 8.1 and WP 8.1. The ListView, so in both Project's MainPage.xaml lets define that.
<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>
正如你所看到的，我databinded按钮以命令和 CommandParameter 。该命令是，我想，当用户单击该按钮执行视图模型的功能。该CommandParameter是你想传递给你的命令函数对象。在你的情况，你的TAG。
As you can see, I databinded the Button with a Command and a CommandParameter. The command is the function in the ViewModel that I want to execute when the user clicks the button. The CommandParameter is a object you want to pass to your Command function. In your case, your TAG.
命名空间
using System.Collections.ObjectModel; // ObservableCollection
using System.Windows.Input; // ICommand
现在让定义的命令（应该是共享项目的一部分）
Now lets defined a Command (Should be part of the Shared Project)
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;
}
现在可以设置一个简单的模型（应该是共享项目的一部分）
Now lets setup a simple model (Should be part of the Shared Project)
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（S）来使用。 （应该是共享项目的一部分）
Now lets setup a ViewModel for our ListView(s) to use. (Should be part of the Shared Project)
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的链接到我们应结合艺术家，歌曲，和按钮（指挥放; CommandParamters）视图模型。我通常这样做在每个页面的加载功能。
And finally, lets link the ListView to our ViewModel which should bind the "Artist, Song, and Button (Command & CommandParamters)". I usually do this in each Page's Load function.
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
}
有你有它，每次在用户点击按钮不管是什么平台，它将执行命令功能。
There you have it, each time the user clicks on the button no matter what platform it will perform the Command function.
样品截图
Sample Screenshot
这篇关于如何实现共享应用资源导航按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
