Languages

Menu
Sites
Language
Custom CircleProgressBarSurfaceItem

Hello, i am trying to customize the visual appearance of a CircleProgressBarSurfaceItem to include rounded corners and a label inside, much like the attachment image. How can it be done in .net? I understand that the suggested approach is via Xamarin Form's custom renderers, but i cound not find examples regarding this, and do not understand how. Could you help me out on this issue? Thank you very much.

List

Responses

3 Replies
Tizen .NET

Hello, 
Here is the sample codes about Tizen.CircularUI and guides for custom renderer in Xamarin.Forms.
CircularUI sample App -  https://github.com/Samsung/Tizen.CircularUI/tree/master/test/WearableUIGallery
Custom Renderer - https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/custom-renderer/

And I'd like to add one more document that describes a customazing image object using custom renderer in Tizen.
sample - https://samsung.github.io/Tizen.NET/tizen%20.net/how-to-set-image-borders/

I can't check the image, so I don't know what exactly you want.
But I hope these documents will help you.

If you have any question, please contact us again.

Tobia Apolloni

I followed these resources, but i am still in need of help. I understand how to redefine the renderer of an image, but how can i do with a CircleProgressBarSurfaceItem? My need is to put a label over the progress bar, and rotate it to respect the screen curvature.

A good example could be the alti-barometer shown here https://developer.samsung.com/galaxy-watch/design/resource#rnb0 under the section "Home Screen".

Thank you again for your time

 

Tizen .NET

Hello, I checked CircleProgressBarSurfaceItem class. It seems hard to extend because it is not a Xamarin.Forms.View.
If you want to customize, you may have to refine the CirclePageRenderer class.
(https://github.com/Samsung/Tizen.CircularUI/blob/master/src/Tizen.Wearable.CircularUI.Forms.Renderer/CirclePageRenderer.cs#L450)

So, I'd like to suggest to use that views separately like below samples.
https://samsung.github.io/Tizen.CircularUI/guide/CirclePage.html#add-circleprogressbarsurfaceitem-in-circlepage 
https://github.com/Samsung/Tizen-CSharp-Samples/blob/master/Wearable/XStopWatch/XStopWatch/XStopWatch/StopWatch.xaml 

And, about more details including supported visual appearance, It would be better to inquire to Tizen.CircularUI.
https://github.com/Samsung/Tizen.CircularUI/issues