Strange behavior on ListView when user reload page

Question

question

MartinZHe-9004 asked · Feb 07, 2020 at 10:34 AM

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:

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

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

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:

it will not appear the first time the page is loaded
only one object will not display in the whole list
if user drag and reorder the invisible object, it will display normally as expected
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):

windows-uwp windows-uwp-xaml

理想效果.png (5.0 KiB)

此时第一项存在且可拖动.png (4.7 KiB)

拖动后可能显示正常.png (5.1 KiB)

xaml.png (46.6 KiB)

styledef.png (19.1 KiB)

original.png (32.9 KiB)

newbug.png (32.7 KiB)

· 1

10 |1000 characters needed characters left characters exceeded

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

RichardZhang-MSFT · Feb 10, 2020 at 12:57 AM

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

0 ·

Answer 1 · 2020-02-12T09:26:30.877Z

RichardZhang-MSFT answered · Feb 12, 2020 at 09:26 AM

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

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

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

MartinZHe-9004 · Feb 12, 2020 at 02:42 PM

Thanks for your generous help, the problem was solved.

0 ·

Answer 2 · 2020-02-10T22:24:18.17Z

SteveWood-4261 answered · Feb 10, 2020 at 10:24 PM

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

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

MartinZHe-9004 · Feb 11, 2020 at 07:37 AM

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

0 ·

question