CornerRadius, RoundedImage

[bezysoftware]

Is there currently a way to have circular images / controls? In the sample app PageControl -> Thumbnail the images are rounded, but I have no idea how that is achieved.

Is there an easy way to have rounded image? I could only find this nuget, but it seems it's not supported on Tizen: https://github.com/jamesmontemagno/ImageCirclePlugin

    <PackageReference Include="Tizen.NET.Sdk" Version="1.0.1" />
    <PackageReference Include="Tizen.Wearable.CircularUI" Version="1.2.0" />
    <PackageReference Include="Xamarin.Forms" Version="4.0.0.425677" />

[jkpu]

I will consider to add circle images control in next version(1.3.0).

If you want to use this control, please make your custom renderer. you can refer to following files in XUIComponents sample.

\UIComponents\Extensions\ThumbnailItem \UIComponents.Tizen.Wearable\Renderers\ThumbnailIndexRenderer

[bezysoftware]

Can you help me understanding the code? Which part of ThumbnailIndexRenderer is responsible for making the image round? Is it the ElmSharp.Image itself which has it as defdault?

[jkpu]

Initialize() in ThumbnailIndexRenderer.cs draw circle image. below code make circle crop for displaying circle image. This theme( body_thumbnail) has static size(width /height is fixed size) and circle shape. so If you want to make your own customize circle image, It may not be proper. And you should have knowledge for EFL and Elmsharp for making your custom renderer with this codes.

                var page = new ElmSharp.Layout(box)
                {
                    WeightX = 1.0,
                    WeightY = 1.0,
                    AlignmentX = -1.0,
                    AlignmentY = 0.5
                };
                page.SetTheme("layout", "body_thumbnail", "default");  // this  cropped circle area
                page.Show();

                // set icon
                var img = new ElmSharp.Image(page);
                var icon = item.Image;
                Console.WriteLine($"item.Image File:{icon.File}");
                img.LoadAsync(ResourcePath.GetPath(icon.File));
                page.SetPartContent("elm.icon", img);   //draw image in circle cropped area.

Here is more easy sample code for making custom renderer(circle Image) https://github.com/Samsung/Tizen-CSharp-Samples/tree/master/Wearable/PhotoWatch

following files are custom renderer for circle image. https://github.com/Samsung/Tizen-CSharp-Samples/blob/master/Wearable/PhotoWatch/PhotoWatch/CircleContentView.cs https://github.com/Samsung/Tizen-CSharp-Samples/blob/master/Wearable/PhotoWatch/PhotoWatch/CircleContentViewRenderer.cs

[jkpu]

CircleImage control was included in Tizen.Wearable.CircularUI 1.3.0-pre1-00043 nuget. You can find the way to use in guide or Testcase in test\WearableUIGallery\WearableUIGallery\TC\TCCircleImage.xaml