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

海科·罗特(Heiko Rothe)

我目前正在尝试创建一个简单的应用,该应用将从我制作的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或文件路径)。

Chubosaurus软件

这是通用应用程序解决方案。它基本上可以作为有关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>

如您所见,我将Button与CommandCommandParameter绑定在一起该命令是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使用。(应该是共享项目的一部分)

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,该ViewModel应该绑定“ Artist,Song和Button(Command&CommandParamters)”。我通常在每个页面的Load函数中执行此操作。

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
}

无论用户在哪个平台上执行命令功能,每次用户单击按钮时,都可以使用它。


样本截图 在此处输入图片说明

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在Flutter的单页Web应用程序中实现导航?

来自分类Dev

如何在Windows Phone应用程序开发中的按钮上单击导航到网页

来自分类Dev

如何在连接到API的移动应用程序(cordova)上启用跨域资源共享(在Yii中)

来自分类Dev

如何在连接到API的移动应用程序(cordova)上启用跨域资源共享(在Yii中)

来自分类Dev

如何在GWT应用程序中添加静态资源?

来自分类Dev

如何在Tizen本机API应用程序中的巨大圈子列表中实现快速导航?

来自分类Dev

如何在导航栏应用程序中显示网页?

来自分类Dev

如何在 dotnet 应用程序中创建导航菜单?

来自分类Dev

如何在应用程序中实现按钮,以便每次用户按下按钮时,整个应用程序的默认颜色都会改变

来自分类Dev

如何在Swift中实现“共享按钮”

来自分类Dev

如何在制图应用程序中实现稳定的缩放

来自分类Dev

如何在glfw应用程序中实现NSApplicationDelegate协议

来自分类Dev

如何在WPF应用程序中实现文档\帮助?

来自分类Dev

如何在WatchKit扩展应用程序中实现SpriteKit?

来自分类Dev

如何在iPhone应用程序中实现NFC?

来自分类Dev

如何在Vue应用程序中实现Paypal订阅?

来自分类Dev

如何在MeanJS应用程序中实现文件下载

来自分类Dev

如何在制图应用程序中实现稳定的缩放

来自分类Dev

如何在N层应用程序中实现IDependencyResolver?

来自分类Dev

如何在 Swift 中实现后台应用程序刷新?

来自分类Dev

如何在android应用程序中实现语言设置?

来自分类Dev

如何在测验应用程序中创建后退按钮

来自分类Dev

Swift 如何在很多应用程序中实现当您想要某些东西时出现在底部的按钮

来自分类Dev

如何在本地主机应用程序上创建共享到 Facebook 按钮

来自分类Dev

在控制台应用程序中实现导航菜单

来自分类Dev

在WPF应用程序的mvvm中实现导航的最佳方法

来自分类Dev

MEF中共享的应用程序资源

来自分类Dev

在Firefox OS应用程序中添加共享按钮

来自分类Dev

在Firefox OS应用程序中添加共享按钮

Related 相关文章

  1. 1

    如何在Flutter的单页Web应用程序中实现导航?

  2. 2

    如何在Windows Phone应用程序开发中的按钮上单击导航到网页

  3. 3

    如何在连接到API的移动应用程序(cordova)上启用跨域资源共享(在Yii中)

  4. 4

    如何在连接到API的移动应用程序(cordova)上启用跨域资源共享(在Yii中)

  5. 5

    如何在GWT应用程序中添加静态资源?

  6. 6

    如何在Tizen本机API应用程序中的巨大圈子列表中实现快速导航?

  7. 7

    如何在导航栏应用程序中显示网页?

  8. 8

    如何在 dotnet 应用程序中创建导航菜单?

  9. 9

    如何在应用程序中实现按钮,以便每次用户按下按钮时,整个应用程序的默认颜色都会改变

  10. 10

    如何在Swift中实现“共享按钮”

  11. 11

    如何在制图应用程序中实现稳定的缩放

  12. 12

    如何在glfw应用程序中实现NSApplicationDelegate协议

  13. 13

    如何在WPF应用程序中实现文档\帮助?

  14. 14

    如何在WatchKit扩展应用程序中实现SpriteKit?

  15. 15

    如何在iPhone应用程序中实现NFC?

  16. 16

    如何在Vue应用程序中实现Paypal订阅?

  17. 17

    如何在MeanJS应用程序中实现文件下载

  18. 18

    如何在制图应用程序中实现稳定的缩放

  19. 19

    如何在N层应用程序中实现IDependencyResolver?

  20. 20

    如何在 Swift 中实现后台应用程序刷新?

  21. 21

    如何在android应用程序中实现语言设置?

  22. 22

    如何在测验应用程序中创建后退按钮

  23. 23

    Swift 如何在很多应用程序中实现当您想要某些东西时出现在底部的按钮

  24. 24

    如何在本地主机应用程序上创建共享到 Facebook 按钮

  25. 25

    在控制台应用程序中实现导航菜单

  26. 26

    在WPF应用程序的mvvm中实现导航的最佳方法

  27. 27

    MEF中共享的应用程序资源

  28. 28

    在Firefox OS应用程序中添加共享按钮

  29. 29

    在Firefox OS应用程序中添加共享按钮

热门标签

归档