How do I create my own ImageCell in Xamarin? - windows-phone-8.1

Question

What I need:
A DataTemplate of Image, Title, Description.
What I tried:
I tried ImageCell but it's image size cannot be controlled and hence the Image goes out of screen (on Windows Phone 8.1)
I tried creating CustomRenderer, wasn't able to do it for WP8.1 (couldnt extract the UI Controls from DataTemplate in public override Windows.UI.Xaml.DataTemplate GetTemplate(Cell cell)
I created a ViewCell.View, put Image + two Labels in a Grid. BUT again, it doesnt work properly on WP8.1. When I scroll back up, the Text gets cut.
<ViewCell>
<ViewCell.View>
<StackLayout Padding="20,10,20,10">
<Grid ColumnSpacing="10" RowSpacing="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
</Grid.RowDefinitions>
<Label Text="{Binding Title}"
Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" FontSize="Medium"
XAlign="Start" HorizontalOptions="StartAndExpand" YAlign="Start" LineBreakMode="CharacterWrap" MinimumHeightRequest="60"
FontAttributes="Bold"
TextColor="Black">
</Label>
<Image Source="{Binding Image}"
Grid.Row="1" Grid.RowSpan="2" Grid.Column="0"
Aspect="AspectFill" HorizontalOptions="Start">
</Image>
<Label Text="{Binding Description}"
Grid.Row="1" Grid.RowSpan="2" Grid.Column="1"
FontSize="14" XAlign="Start" HorizontalOptions="StartAndExpand" YAlign="Start" LineBreakMode="CharacterWrap"
TextColor="Black">
</Label>
</Grid>
</StackLayout>
</ViewCell.View>
</ViewCell>
So, how do I create my own Cell or Control more attributes of ImageCell

Answer 1

This is a code that I once wrote to make a custom ViewCell, it has a label and an image, hope this helps you (I tested this on iOS, Android and WP):
public class ViewCellExtend : ViewCell
{
Label menuText;
Image menuImagen;
public ViewCellExtend()
{
menuText = new Label();
menuImagen = new Image()
{
Aspect = Aspect.AspectFit,
HeightRequest = 30,
WidthRequest = 30
};
StackLayout stContenedor = new StackLayout
{
Orientation = StackOrientation.Horizontal,
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand,
Spacing = 20,
Children =
{
CreateCellBlock()
}
};
View = stContenedor;
}
Xamarin.Forms.Layout CreateCellBlock()
{
StackLayout st2 = new StackLayout
{
Orientation = StackOrientation.Horizontal,
VerticalOptions = LayoutOptions.FillAndExpand,
HorizontalOptions = LayoutOptions.FillAndExpand,
Children =
{
new StackLayout
{
Padding = new Thickness(15,0,10,0),
HorizontalOptions = LayoutOptions.Start,
VerticalOptions = LayoutOptions.Center,
Children =
{
menuImagen
}
},
new StackLayout
{
Padding = new Thickness(0,5,10,0),
HorizontalOptions = LayoutOptions.Start,
VerticalOptions = LayoutOptions.Center,
Children =
{
menuText
}
}
}
};
st2.SetBinding(Layout.BackgroundColorProperty, new Binding("BackgroundColor"));
return st2;
}
public static BindableProperty BindableTextProperty = BindableProperty.Create<ViewCellExtend, string>(ctrl =>
ctrl.TextProperty,
defaultValue: string.Empty,
defaultBindingMode: BindingMode.TwoWay,
propertyChanging: (bindable, oldValue, newValue) =>
{
var ctrl = (ViewCellExtend)bindable;
ctrl.TextProperty = newValue;
});
public string TextProperty
{
get { return (string)GetValue(BindableTextProperty); }
set
{
SetValue(BindableTextProperty, value);
menuText.Text = value;
}
}
public static BindableProperty BindableImageProperty = BindableProperty.Create<ViewCellExtend, ImageSource>(ctrl =>
ctrl.ImageProperty,
defaultValue: default(ImageSource),
defaultBindingMode: BindingMode.Default,
propertyChanging: (bindable, oldValue, newValue) =>
{
var ctrl = (ViewCellExtend)bindable;
ctrl.ImageProperty = newValue;
}
);
protected override void OnBindingContextChanged()
{
base.OnBindingContextChanged();
System.Diagnostics.Debug.WriteLine(BindingContext.ToString());
}
public ImageSource ImageProperty
{
get { return (ImageSource)GetValue(BindableImageProperty); }
set
{
SetValue(BindableImageProperty, value);
menuImagen.Source = value;
}
}
}

Answer 2

Here's a very good demonstration of using custom ViewCellRenderer:
https://github.com/xamarin/xamarin-forms-samples/tree/master/WorkingWithListviewNative
Android:
public class NativeAndroidCellRenderer : ViewCellRenderer
{
protected override Android.Views.View GetCellCore (Xamarin.Forms.Cell item, Android.Views.View convertView, Android.Views.ViewGroup parent, Android.Content.Context context)
{
var x = (NativeCell)item;
var view = convertView;
if (view == null) {// no view to re-use, create new
view = (context as Activity).LayoutInflater.Inflate (Resource.Layout.NativeAndroidCell, null);
} else { // re-use, clear image
// doesn't seem to help
//view.FindViewById<ImageView> (Resource.Id.Image).Drawable.Dispose ();
}
view.FindViewById<TextView>(Resource.Id.Text1).Text = x.Name;
view.FindViewById<TextView>(Resource.Id.Text2).Text = x.Category;
// grab the old image and dispose of it
// TODO: optimize if the image is the *same* and we want to just keep it
if (view.FindViewById<ImageView> (Resource.Id.Image).Drawable != null) {
using (var image = view.FindViewById<ImageView> (Resource.Id.Image).Drawable as BitmapDrawable) {
if (image != null) {
if (image.Bitmap != null) {
//image.Bitmap.Recycle ();
image.Bitmap.Dispose ();
}
}
}
}
// If a new image is required, display it
if (!String.IsNullOrWhiteSpace (x.ImageFilename)) {
context.Resources.GetBitmapAsync (x.ImageFilename).ContinueWith ((t) => {
var bitmap = t.Result;
if (bitmap != null) {
view.FindViewById<ImageView> (Resource.Id.Image).SetImageBitmap (bitmap);
bitmap.Dispose ();
}
}, TaskScheduler.FromCurrentSynchronizationContext() );
} else {
// clear the image
view.FindViewById<ImageView> (Resource.Id.Image).SetImageBitmap (null);
}
return view;
}
}
iOS:
public class NativeiOSCellRenderer : ViewCellRenderer
{
static NSString rid = new NSString("NativeCell");
public override UIKit.UITableViewCell GetCell (Xamarin.Forms.Cell item, UIKit.UITableViewCell reusableCell, UIKit.UITableView tv)
{
var x = (NativeCell)item;
Console.WriteLine (x);
NativeiOSCell c = reusableCell as NativeiOSCell;
if (c == null) {
c = new NativeiOSCell (rid);
}
UIImage i = null;
if (!String.IsNullOrWhiteSpace (x.ImageFilename)) {
i = UIImage.FromFile ("Images/" + x.ImageFilename + ".jpg");
}
c.UpdateCell (x.Name, x.Category, i);
return c;
}
}
public class NativeiOSCell : UITableViewCell {
UILabel headingLabel, subheadingLabel;
UIImageView imageView;
public NativeiOSCell (NSString cellId) : base (UITableViewCellStyle.Default, cellId)
{
SelectionStyle = UITableViewCellSelectionStyle.Gray;
ContentView.BackgroundColor = UIColor.FromRGB (255,255,224);
imageView = new UIImageView();
headingLabel = new UILabel () {
Font = UIFont.FromName("Cochin-BoldItalic", 22f),
TextColor = UIColor.FromRGB (127, 51, 0),
BackgroundColor = UIColor.Clear
};
subheadingLabel = new UILabel () {
Font = UIFont.FromName("AmericanTypewriter", 12f),
TextColor = UIColor.FromRGB (38, 127, 0),
TextAlignment = UITextAlignment.Center,
BackgroundColor = UIColor.Clear
};
ContentView.Add (headingLabel);
ContentView.Add (subheadingLabel);
ContentView.Add (imageView);
}
public void UpdateCell (string caption, string subtitle, UIImage image)
{
imageView.Image = image;
headingLabel.Text = caption;
subheadingLabel.Text = subtitle;
}
public override void LayoutSubviews ()
{
base.LayoutSubviews ();
imageView.Frame = new CoreGraphics.CGRect(ContentView.Bounds.Width - 63, 5, 33, 33);
headingLabel.Frame = new CoreGraphics.CGRect(5, 4, ContentView.Bounds.Width - 63, 25);
subheadingLabel.Frame = new CoreGraphics.CGRect(100, 18, 100, 20);
}
}