Strange behavior on ListView when user reload page

Question

I put a ListView inside a page that display in a frame. The ItemsSource is set to a var of type ObservableCollection. When I run the program, it behaves as follows:

1. display is always correct the first time that page is loaded (adding/reordering actions works fine):

2. When the frame is navigated to any other page and is navigated back to that page with ListView, the first object of the list is always not displaying:

3. Although the first object is not displayed, it can be drag and reorder. Once it is reordered, it will display as normal:

The not-display bug seems like following the following rules:

1. it will not appear the first time the page is loaded
2. only one object will not display in the whole list
3. if user drag and reorder the invisible object, it will display normally as expected
4. after action 3 , drag and reorder any item in the list will cause the dragged item display erroneously.

The core code are as follows:

// XAML

// c#
public OrganizePage()
{
this.InitializeComponent();
regexList.ItemsSource = App.datas.regex.blocks;
}

If XAML code is not displayed, see here or the image below:

could anyone plz help me

---

update 20200207 22:07 UTC+8:

I did more test on it, only to bring more question. Here's how things go strange:

when I started debuging, instead of switching pages, i first add some style definition to the XAML like this

I then switch between pages to reload the page... boom! the bug is gone and everything looks fine.

HOWEVER

when i stop debuging and build the project again... it comes back!

---

update 20200207 22:31 UTC+8:

I tried to implement those steps above using code inside program (on each launch, clear the style and add them back)... and it doesn't work at all.

---

update 20200211 15:58 UTC+8:

The problem is yet not solved, and I published the project onto GitHub, see here: https://github.com/APassbyDreg/PowerRenameUWP/tree/ListView-Bug

---

update 20200212 01:08 UTC+8:

Another similar bug occurred and i think that it might be caused by the same mechanism. Here's the new bug:

I created another ListView using the same ItemTemplate technic. This time, it contains a border made line at the bottom of each listview item.

However, the first line will not render every time I enter that page until the list is updated:

The lists should look like this:

However, it looks like this everytime I navigate to that page (except the first time when the left side function normally):

Answer 1

Hello,​

Welcome to our Microsoft Q&A platform!

I downloaded the code you provided and tested your project.

You try to determine the width of the children in the DataTemplate with the width of the container, which is not recommended.

Border Width="{Binding ActualWidth, ElementName=patternContent}"

Please try this:

1. Modify ListView.ItemContainerStyle

<ListView.ItemContainerStyle>

<Style TargetType="ListViewItem">

...

<Setter Property="HorizontalContentAlignment" Value="Stretch" />

</Style>

</ListView.ItemContainerStyle>

---

2. Modify ListView.HorizontalAlignment to Stretch

<ListView Name="regexList" ...
HorizontalAlignment="Stretch">

---

3. delete this line of code : Width="{Binding ActualWidth, ElementName=patternContent}"

---

Finally, a word of caution, please don't post your actual project link in the forum. What we need is a minimal runnable demo that can reproduce the problem.

Thanks.

Answer 2

Have you tried enabling the Navigation Cache Mode in the page constructor? For example:

  public MainPage()
  {
   this.InitializeComponent();
   this.NavigationCacheMode = Windows.UI.Xaml.Navigation.NavigationCacheMode.Enabled;
  }