Skip to end of metadata
Go to start of metadata

This page discuss how you can customize the appearance and presentation of cell template with image in a table view to achieve round corner. It is expected that you have successfully displayed a list of data and create custom cell template with image before continuing.

Nowadays, a lot of mobile apps display circular image on list view. Crosslight has provided techniques that will help you easily customizing the look of your round corner image in your cell template.

Applied to:

  • Crosslight Android 3.4 or higher

On this page:

Implement Circular Image on iOS

To get started with round corner image in iOS, simply set/override the ImageSettings property in view controller class that derives from UITableViewController(TViewModel) Class.

Suppose that you have image in custom cell template where its size is 36 by 36, the next step is to set the CornerRadius to 18 (half size of its width and height).

At runtime, Crosslight automatically displays the image in round corner. See the following screenshot for the result.

For more information about iOS platform support in Crosslight, see Crosslight for iOS.

Implement Circular Image on Android

To get started with round corner image in Android, simply set/override the ImageSettings property in activity class that derives from ListActivity(TViewModel) Class.

Suppose that you have image in custom cell template where its size is 160 by 160, the next step is to set the CornerRadius to 80 (half size of its width and height).

At runtime, Crosslight automatically displays the image in round corner. See the following screenshot for the result.

For more information about Android platform support in Crosslight, see Crosslight for Android.

Implement Circular Image on Windows Phone

To get started with round corner image in Windows Phone, modify the image control in the item template of LongListSelector such as shown in the following snippet code.

Save the changes and see the following screenshot for the result.

 

For more information about Windows Phone platform support in Crosslight, see Crosslight for Windows Phone.

Samples

The sample code for this article can be downloaded from our Git server: http://git.intersoftpt.com/projects/CROS-SUPP/repos/listview-with-circular-image/browse.