How to add item to ListView in different page and link it to relevant page

Question

Does UWP have capabilities of allowing developers to created a history list for list view items? How can I send the name of the clicked item, and the date stamp when it was clicked to the clicked list class, whilst also allowing me to click the list item that was added to go to the item page? Forvige me if I missed a step in my code.

Main list (XAML)

<ListView 
    x:Name="ListFlowers" 
    IsItemClickEnabled="True">
    <ListView.ItemTemplate>
        <DataTemplate>
            <StackPane>
                <TextBlock Text="{Binding TitleFlower}" Style="{StaticResource TitleTextBlockStyle}"/>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Main list (C#)

public sealed partial class Flowers: Page
{
    public List<ListItemFlowers> listItemFlowers;

    public Flowers()
    {
        this.InitializeComponent();

        listItemFlowers = ItemManagerFlowers.GetListItems();
    }

    private void MyList_ItemClick(object sender, ItemClickEventArgs e)
    {
        var resourceLoader = Windows.ApplicationModel.Resources.ResourceLoader.GetForCurrentView();

        ListItem item = (ListItem)e.ClickedItem;

        if (item.Name == resourceLoader.GetString("Sunflower/Text"))
        {
            Frame.Navigate(typeof(Sunflower));

            ??
        }
    }
}

Flowers list item class

public class ListItemFlowers
{
public string FlowerName { get; set; }
}

public class ItemManagerFlowers
{
    public static List<ListItemFlowers> GetListItems()
    {
        var resourceLoader = Windows.ApplicationModel.Resources.ResourceLoader.GetForCurrentView();

        var items = new List<ListItemFlowers>
        {
            new ListItemFlowers{ FlowerName = resourceLoader.GetString("Sunflower/Text")
        }

        return items;
    }
}

History list (XAML)

<ListView 
    x:Name="ListHistory" 
    IsItemClickEnabled="True">
    <ListView.ItemTemplate>
        <DataTemplate>
            <StackPane>
                <TextBlock Style="{StaticResource TitleTextBlockStyle}"/>
                <TextBlock Style="{StaticResource SubtitleTextBlockStyle}"/>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

History list (C#)

public sealed partial class Flowers: Page
{
    public List<ListItemClickedFlowers> listItemClickedFlowers;

    public FlowersClicked()
    {
        this.InitializeComponent();

        listItemClickedFlowers = ItemManagerClickedFlowers.GetListItems();
    }

    private void MyClickedList_ItemClick(object sender, ItemClickEventArgs e)
    {
        var resourceLoader = Windows.ApplicationModel.Resources.ResourceLoader.GetForCurrentView();

        ListItem item = (ListItem)e.ClickedItem;

        ??
    }
}

Flowers list clicked item class

public class ListItemClickedFlowers
{
    public string FlowerName { get; set; }
    public string FlowerVisitedDatestamp { get; set; }
}

public class ItemManagerClickedFlowers
{
    public static List<ListItemClickedFlowers> GetListItems()
    {
        var resourceLoader = Windows.ApplicationModel.Resources.ResourceLoader.GetForCurrentView();

        var items = new List<ListItemFlowers>
        {
            new ListItemFlowers{ FlowerName = ??, FlowerVisitedDatestamp = ??)
        }

        return items;
    }
}

Answer 1

Maintain a separate list (or ObservabelCollection, or dictionary, or similar) for the "clicked"/history items and add to it whenever an item is clicked/selected from the first/main list.
There is no built-in control or collection for this purpose.

Answer 2

Hello,

Welcome to Microsoft Q&A!

I will use a simple structure to explain how to meet your needs. In the explanation process, I omitted how to get the data (because you have given).

1. Create a public instance (AppViewModel)

AappViewModel.cs

public class AppViewModel
{
    public Frame MainFrame;
    public ObservableCollection<ListItemClickedFlowers> HistoryFlowerList = new ObservableCollection<ListItemClickedFlowers>();

    public AppViewModel()
    {

    }
}

If you want to bind the list to the ListView, it is recommended to use ObservableCollection<T> instead of List<T>, because when you add items to the collection, ObservableCollection<T> will change the UI in response to data changes, while List<T> will not.

App.xaml.cs

public static AppViewModel appViewModel = new AppViewModel();

2. Has three pages: MainPage, MainListPage and HistoryListPage

When creating the application, we already have MainPage, we now need to insert a Frame in MainPage as our navigation frame:

MainPage.xaml

<Grid>
    <Frame x:Name="MainFrame" Loaded="MainFrame_Loaded"/>
</Grid>

MainPage.xaml.cs

private void MainFrame_Loaded(object sender, RoutedEventArgs e)
{
    App.appViewModel.MainFrame = MainFrame;
}

In MainListPage, click an item, we need to add the click item to the history list, then we can access our history list through AppViewModel

MainListPage.xaml.cs

private void MyList_ItemClick(object sender, ItemClickEventArgs e)
{
    var resourceLoader = Windows.ApplicationModel.Resources.ResourceLoader.GetForCurrentView();
    ListItemFlowers item = (ListItemFlowers)e.ClickedItem;
    // Need convert ListItemFlowers to ListItemClickedFlowers
    ListItemClickedFlowers historyItem = SomeConvert(item);

    App.appViewModel.HistoryFlowerList.Add(historyItem);

    if(item.Name == resourceLoader.GetString("Sunflower/Text"))
    {
        App.appViewModel.MainFrame.Navigate(typeof(Sunflower));
    }
}

When you click an item in HistoryListPage, you can also navigate by accessing the Frame in AppViewModel

HistoryListPage

private void MyClickedList_ItemClick(object sender, ItemClickEventArgs e)
{
    var resourceLoader = Windows.ApplicationModel.Resources.ResourceLoader.GetForCurrentView();
    ListItemClickedFlowers item = (ListItemClickedFlowers)e.ClickedItem;

    if(item.FlowerName == resourceLoader.GetString("Sunflower/Text"))
    {
        App.appViewModel.MainFrame.Navigate(typeof(Sunflower));
    }
}

Note here that if you are using a data source bound ListView, then e.ClickedItem is the data entity you bound, not ListViewItem.

The above code is not complete, but it can indicate a rough meaning. That is to create a publicly accessible AppViewModel, create a Frame in MainPage, and assign it to AppViewModel, so that it can be accessed in various places of the application. MainListPage and HistoryListPage are subpages of MainPage, they will only be loaded in MainPage.MainFrame.

If you need to cache the page, you can enable NavigationCacheMode：

public MainListPage()
{
    this.InitializeComponent();
    NavigationCacheMode = NavigationCacheMode.Enabled;
}

Thanks.