如何在共享应用程序资源中实现导航按钮? [英] 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 中，如下所示:
I apply it in my MainPage.xaml as shown here:
<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 为我的目标:我想调整数据模板，以便每个按钮链接到页面 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).
推荐答案
这是一个通用应用解决方案.它基本上可以看作是关于 Model、View 和 ViewModel 的教程.
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>
如您所见，我使用 Command 和 CommandParameter 对 Button 进行了数据绑定.该命令是我想要在用户单击按钮时执行的 ViewModel 中的函数.CommandParameter 是您要传递给 Command 函数的对象.就您而言，您的 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
}
<小时>
现在让我们设置一个 ViewModel 供我们的 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 链接到我们的 ViewModel，它应该绑定艺术家、歌曲和按钮(命令和命令参数)".我通常在每个页面的加载函数中这样做.
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.
示例截图
这篇关于如何在共享应用程序资源中实现导航按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
