question

ApptacularApps-8305 avatar image
0 Votes"
ApptacularApps-8305 asked ·

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

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;
     }
 }


windows-uwpwindows-uwp-xaml
· 2
10 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hello, according to your needs, you can create an instance of a class that exists throughout the application life cycle (it can be a static class). When you click on a list item, modify the property or field in this static class and read it when needed. In short, you need to create a history class instance and maintain it during the application life cycle. In addition, can you explain in detail your needs, do you need to access the data of MainListPage in HistoryListPage?

0 Votes 0 ·

I don't think so as the HistoryListPage will allow the user to go to a specific page i.e. If they click the Sunflower item in the MainListPage, the name should be added to the HistoryListPage. After that, if the user clicks the Sunflower item in the HistoryListPage , it should take them to the Sunflower page.

0 Votes 0 ·
mrlacey avatar image
0 Votes"
mrlacey answered ·

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.

10 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

RichardZhang-MSFT avatar image
0 Votes"
RichardZhang-MSFT answered ·

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.

10 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.