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

Crown / Scroll Wheel does not work properly with CicleScrollView #347

Closed matthewkrueger closed 4 years ago

matthewkrueger commented 4 years ago

Describe the bug My layout root is an IndexPage, where each page is a vertical StackLayout, with a Label and a CircleScrollView inside the StackLayout. The Content in the CircleScrollView does not scroll using the crown or digital crown on the Galaxy Active 2, Galaxy Watch 3, or Gear S3.

To Reproduce Steps to reproduce the behavior:

Create an IndexPage (yes, it's obsolete, but there are 0 examples of how to use the suggested replacements on Tizen anywhere, so I'm stuck with this).

Add to the Children of the IndexPage a vertical StackLayout, which contains a Label and a CircleScrollView

var page = new CoolPage();
IndexPage.Children.Add(page);

Class "CoolPage" has content like this:

CircleScrollView.Content = PlayerStackLayouts;
StackLayout.Children.Add(Label);
StackLayout.Children.Add(CircleScrollView);
this.Content = StackLayout;

Expected behavior The crown / digital crown should scroll the content in the CircleScrollView

Screenshots N/A

Environment (please complete the following information):

Additional context Strangely, after you interact with the page once, the crown starts to work. By interact I mean clicking a button on the page. This is clearly a bug since the scrolling with the crown works after an interaction, but not before.

I suspect this is an issue with IndexPage, but since there are 0 examples anywhere on the internet or in this project of how to properly replace IndexPage, I'm completely stuck. Thanks in advance!

myroot commented 4 years ago

ScrollView on ContentPage, is react to bezel rotation when it has focus Ocausally, ScrollView on Page can't get focus You can use BezelInteractionPage instead ContentPage to ensure react with bezel rotation

matthewkrueger commented 4 years ago

HI @myroot - thanks for the reply.

I replaced the ContentPage with BezelInteractionPage, and this actually breaks it even more.

When using ContentPage, all you need to do is tap on the CircleScrollView on the page to give it focus, then the Bezel will work to scroll. With BezelInteractionPage, the Bezel never works, even if you tap on the page to give it focus.

There seem to be some major issues with IndexPage not giving focus to a new ContentPage after swiping to a new page. How can we fix this? I've tried manually calling "Focus()" on various elements on the page when the IndexPage.CurrentPageChanged event fires, but that does not work, because I suspect the Focus() call happens before the elements are fully on the screen.

The only thing I can get to work is if you actually tap, with your finger, somewhere on the CircleScrollView to give it focus. After that, the Bezel will scroll. This is not a good user experience, and our users are complaining about Bezel scrolling not working in the app. Any help you can provide is appreciated.

Thanks!

myroot commented 4 years ago

@matthewkrueger Sorry, you need to set BezelInteractionPage.RotaryFocusObject property to interact with bezel

You can refer it

https://samsung.github.io/Tizen.CircularUI/api/Tizen.Wearable.CircularUI.Forms.BezelInteractionPage.html

https://github.com/Samsung/Tizen.CircularUI/blob/c31a28423df9ea211352ac76647121cfeec37224/test/WearableUIGallery/WearableUIGallery/TC/TCBezelInteractionPage.xaml#L10

https://github.com/Samsung/Tizen.CircularUI/blob/c31a28423df9ea211352ac76647121cfeec37224/test/WearableUIGallery/WearableUIGallery/TC/TCBezelInteractionPage.xaml.cs#L33

matthewkrueger commented 4 years ago

Thank you @myroot, it worked!

For anyone else reading this, I'm building my views programmatically (instead of XAML) since the page's content is dynamic, depending on the data received from the paired Android phone. So, I just needed to set the RotaryFocusObject on my BezelInteractionPage (MyPage) to my CircleScrollView in the constructor for my BezelInteractionPage.

public MyPage() {
    InitViews();

    // This allows scrolling with the Bezel!
    this.RotaryFocusObject = MyCircleScrollView;
}

Thanks again, I just wish this was documented better in the official documentation. Hopefully this thread is useful to someone else!