search

Samsung / Tizen.CircularUI

Tizen Wearable CircularUI project is to develop an open source software motivate software developer to creating Tizen Wearable Xamarin Forms app more easily and efficiently.
Other
80 stars 32 forks source link

Can not scroll to first item in CircleListView after updating to CircularUI 1.5 #335

Closed axa88 closed 4 years ago

axa88 commented 4 years ago

Describe the bug Can no longer scroll to first item in CircleListView of a CirclePage after updating from CircularUI 1.4 to 1.5

Previously using CircularUI 1.4 using a CircleListView on a CirclePage allowed scrolling to the first item in the list: image

Then updating to CircularUI 1.5 with no code changes you can no longer scroll to the first item: image

Here only the second item to the top can be scrolled to. Also it appears rendering of the header and cells have changed.

To Reproduce Steps to reproduce the behavior:

  1. Create CircleListView on a CirclePage in CircularUI 1.5
  2. Populate list with items
  3. Attempt to scroll to first item
  4. Notice you can not scroll to first item

Expected behavior It understood CirclePage is depricated in CircularUI 1.5, but it might is expected that the same code would at least produce the same results even if no further improvments will be made to CirclePage

Environment (please complete the following information):

rookiejava commented 4 years ago

Can you share the package reference of the project file you are using?

axa88 commented 4 years ago

Can you share the package reference of the project file you are using?

<PackageReference Include="Tizen.Wearable.CircularUI" Version="1.5.0" />

rookiejava commented 4 years ago

Can you share the package reference of the project file you are using?

<PackageReference Include="Tizen.Wearable.CircularUI" Version="1.5.0" />

Thank you for sharing. Didn't you add specific version of Xamarin.Forms to the package reference separately?

rookiejava commented 4 years ago

I think I found the reason.

To understand this problem, it is necessary to understand the FishEye effect , one of the basic UX policies of list view provided by the Tizen wearable platform. This effect is designed to look more natural and beautiful when an item in the list view is selected, moved or highlighted. And, this effect was designed by assuming 3 items in the list on one screen basically. Circular UI 1.5 is designed to follow these platform UX policies.

It was a complicated but to make long story short, we recommend that the height of each item (including headers or footers) can be used to occupy at least one third of the screen (at least 115~120). Perhaps in your app, the height of the header and footer (or item) is set to a bit smaller. (Because the screenshot you uploaded shows 4 items including the header)

We will improve the guide documentation on these constraints to help developers minimize confusion when developing apps.

Thank you.

axa88 commented 4 years ago

perhaps in your app, the height of the header and footer (or item) is set to a bit smaller.

Perhaps this is true, i created Header containing a single Label with no specified size. Adding HeightRequest = 120 to Label forced Header large enough to repair issue as was suggeted