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

asked 2020-06-12T12:45:39.737+00:00
Apptacular Apps 386 Reputation points

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;
    }
}
Universal Windows Platform (UWP)
{count} votes

2 answers

Sort by: Most helpful
  1. answered 2020-06-12T13:03:15.35+00:00
    Matt Lacey 786 Reputation points Microsoft MVP

    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.

    No comments

  2. answered 2020-06-12T15:51:01.777+00:00
    Richard Zhang-MSFT 6,916 Reputation points

    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.

    No comments