question

MartinZHe-9004 avatar image
0 Votes"
MartinZHe-9004 asked ·

Strange behavior on ListView when user reload page

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):

2406-%E7%90%86%E6%83%B3%E6%95%88%E6%9E%9C.png

  1. 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:

2654-%E6%AD%A4%E6%97%B6%E7%AC%AC%E4%B8%80%E9%A1%B9%E5%AD%98%E5%9C%A8%E4%B8%94%E5%8F%AF%E6%8B%96%E5%8A%A8.png

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

2427-%E6%8B%96%E5%8A%A8%E5%90%8E%E5%8F%AF%E8%83%BD%E6%98%BE%E7%A4%BA%E6%AD%A3%E5%B8%B8.png

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:

2477-xaml.png

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

2520-styledef.png

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:

2862-original.png

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

2832-newbug.png


windows-uwpwindows-uwp-xaml
· 1
10 |1000 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.

Sorry, I can't reproduce your problem, can you provide a minimum runnable demo for me to test?

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

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.

· 1 · Share
10 |1000 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.

Thanks for your generous help, the problem was solved.

0 Votes 0 ·
SteveWood-4261 avatar image
0 Votes"
SteveWood-4261 answered ·

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


· 1 · Share
10 |1000 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.

I tried but it turns out to be useless LOL
Thanks anyway.

0 Votes 0 ·