Jump List - UWP app

Question

I have an UWP app published in Microsoft/Windows Store, and I am working in a new update. I want add a jump list to my app. I already read Docs of Microsoft but I dont understand how make a jump list to my app. I want put in my jump list, XAML pages of my app. The user click in an item of jump list and go to the XAML page. How I make this?

Answer 1

Let's say you have pages called SecondPage and ThirdPage that you want to navigate straight from the JumpList .

First, you need to add the corresponding items to the JumpList itself:

JumpList jumpList = await JumpList.LoadCurrentAsync();

jumpList.Items.Clear();
jumpList.Items.Add(JumpListItem.CreateWithArguments("GoToSecondPage", "Go directly to the 2nd page"));
jumpList.Items.Add(JumpListItem.CreateWithArguments("GoToThirdPage", "Visit 3rd page"));

await jumpList.SaveAsync();

The standard place to perform this operation is in the OnLaunched method of your app ( App.xaml.cs file). The information about the JumpListItem that the user has clicked on is also passed into this method as a parameter, so you may want to place your page navigation logic into the OnLaunched method too and make it look like:

        if(e.Arguments == "GoToSecondPage")
        {
            rootFrame.Navigate(typeof(SecondPage));
        }
        else if(e.Arguments == "GoToThirdPage")
        {
            rootFrame.Navigate(typeof(ThirdPage));
        }

As a result your App.xaml.cs file is going to look like this:

sealed partial class App : Application
{
    ...
    protected override async void OnLaunched(LaunchActivatedEventArgs e)
    {
        await ConfigureJumpList();

        ...

        if(e.Arguments == "GoToSecondPage")
        {
            rootFrame.Navigate(typeof(SecondPage));
        }
        else if(e.Arguments == "GoToThirdPage")
        {
            rootFrame.Navigate(typeof(ThirdPage));
        }
    }
    ...
    private async Task ConfigureJumpList()
    {
        JumpList jumpList = await JumpList.LoadCurrentAsync();

        jumpList.Items.Clear();
        jumpList.Items.Add(JumpListItem.CreateWithArguments("GoToSecondPage", "Go directly to the 2nd page"));
        jumpList.Items.Add(JumpListItem.CreateWithArguments("GoToThirdPage", "Visit 3rd page"));

        await jumpList.SaveAsync();
    }
}

If you use Template 10, then everything is the same, except for some minor code changes and the fact that you edit OnStartAsync() instead of OnLaunched() method, so the end result in App.xaml.cs file should look like:

sealed partial class App : Template10.Common.BootStrapper
{
    ...
    public override async Task OnStartAsync(StartKind startKind, IActivatedEventArgs args)
    {
        if ((args as LaunchActivatedEventArgs).Arguments == "GoToSecondPage")
            await NavigationService.NavigateAsync(typeof(Views.SecondPage));
        else if ((args as LaunchActivatedEventArgs).Arguments == "GoToThirdPage")
            await NavigationService.NavigateAsync(typeof(Views.ThirdPage));
        else
            await NavigationService.NavigateAsync(typeof(Views.MainPage));

        await ConfigureJumpList();
    }
    ...
    private async Task ConfigureJumpList()
    {
        JumpList jumpList = await JumpList.LoadCurrentAsync();

        jumpList.Items.Clear();
        jumpList.Items.Add(JumpListItem.CreateWithArguments("GoToSecondPage", "Go directly to the 2nd page"));
        jumpList.Items.Add(JumpListItem.CreateWithArguments("GoToThirdPage", "Visit 3rd page"));

        await jumpList.SaveAsync();
    }
}

And if you'd like to display a custom icon in a JumpListItem , then all you need to do is to replace this line of code

jumpList.Items.Add(JumpListItem.CreateWithArguments("GoToSecondPage", "Go directly to the 2nd page"));

with the following lines

var secondPageItem = JumpListItem.CreateWithArguments("GoToSecondPage", "Go directly to the 2nd page");
secondPageItem.Logo = new Uri("ms-appx:///Icons/Page2Icon.png");
jumpList.Items.Add(secondPageItem);

where "ms-appx:///Icons/Page2Icon.png" is the path to the icon (in this example the Page2Icon.png file in the Icons folder of the project).