Intersoft Community - Crosslight - How to Use Crosslight to Display Circular Image on ListView

How to Use Crosslight to Display Circular Image on ListView

jtungol@silentpartnersoft.com — Mon, 23 Mar 2015 21:37:41 GMT

This is awesome! We'll give it a try. Thanks!

How to Use Crosslight to Display Circular Image on ListView

yudi — Mon, 23 Mar 2015 08:36:15 GMT

Nice, how about for other platforms? Like android...

I'd like to update that a nightly build of Crosslight is now available in here. This update includes the feature to display circular image on ListView for Android platform.

Simply ImageSettings property in the activity such as shown in the following snippet code.

public override ImageSettings ImageSettings
{
    get
    {
        return new ImageSettings()
        {
            ImageSize = new SizeF(160, 160), CornerRadius = 80f
        };
    }
}

Hope this help.

How to Use Crosslight to Display Circular Image on ListView

jtungol@silentpartnersoft.com — Wed, 18 Feb 2015 14:41:41 GMT

Awesome! Please notify us about this update. We'd really love to see how it'll turn out.

Thanks!

How to Use Crosslight to Display Circular Image on ListView

Arief — Wed, 18 Feb 2015 08:07:05 GMT

Hi Jimmy,

Both WinPhone and WinRT can use this:

<!--Replace
<Image Source="{Binding YourImage, Converter={StaticResource ImageConverter}"/>
With
-->

<Ellipse>
    <Ellipse.Fill>
        <ImageBrush ImageSource="{Binding YourImage, Converter={StaticResource ImageConverter}"/>
    </Ellipse.Fill>
</Ellipse>

But for Android currently there are no easy way to create circular image however Crosslight Team already solve the issue and will be available in next version of crosslight also it will be similar to how IOS create circular image.

i will update you when next version are available.

Best Regards,

Arief

How to Use Crosslight to Display Circular Image on ListView

jtungol@silentpartnersoft.com — Mon, 16 Feb 2015 20:39:31 GMT

Nice, how about for other platforms? Like android, windows phone, and winrt?

How to Use Crosslight to Display Circular Image on ListView

leo.c — Mon, 16 Feb 2015 10:09:46 GMT

Hi Jimmy Tungol,

Unfortunately, Crosslight not yet support circular image on ListView controls using formbuilder.
But you could adopt other approach by using UITableViewController on iOS and override the CellImageSettings to have a CornerRadius. Example:

public override ImageSettings CellImageSettings {
	get 
	{
		return new ImageSettings() 
		{
			ImageSize = new SizeF(36, 36),
			CornerRadius = 18;
		};
	}
}

Best Regards,

Leo

How to Use Crosslight to Display Circular Image on ListView

jtungol@silentpartnersoft.com — Fri, 13 Feb 2015 16:52:09 GMT

Hi Guys,

Is this feature already implemented on Crosslight? We understand there is a UseCircleMask property for ImageAttribute on Forms, but is there an implementation for images on ListView controls used by Crosslight?

http://blog.xamarin.com/elegant-circle-images-in-xamarin.forms/