Question

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

为了使我的列表生效，我在共享的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为我的目标：我想调整datatemplate，以便每个按钮链接到页面PlanViewer.xaml，其中包含一个描述应该显示哪个计划的参数（例如ID或文件路径）。

Answer 1

这是一款通用应用解决方案。它基本上可以查看Model，View和ViewModel的教程。

我不知道你想要使用什么UI元素，但为此我将选择一个Windows 8.1和WP 8.1都支持的UI元素。 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>

如您所见，我使用命令和 CommandParameter 对Button进行了数据绑定。该命令是ViewModel中的函数，我想在用户单击按钮时执行该函数。 CommandParameter是您要传递给Command函数的对象。在你的情况下，你的标签。

命名空间

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，它应该绑定＆＃34; Artist，Song和Button（Command＆amp; CommandParamters）＆＃34;。我通常在每个Page的加载函数中执行此操作。

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
}

如果用户点击按钮，无论在哪个平台上执行命令功能，都可以使用它。

示例截图 enter image description here

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

1 个答案: