xamarin.forms - Text overlay on Image in Xamarin form using PCL -
i need text overlay on image in xamarin form using pcl project in image below
i created replative layout this, can 1 suggest how format text?
var mylabel = new label() { text = "hello world", font = font.systemfontofsize(20), textcolor = color.white, xalign = textalignment.center, yalign = textalignment.center }; var stack = new stacklayout { children = {mylabel} }; var slayout = new contentview { backgroundcolor = new color(0,0,0,.5), content = stack }; var myimage = new image() { source = "deal1.png" }; relativelayout layout = new relativelayout(); layout.children.add(myimage, constraint.constant(0), constraint.constant(0), constraint.relativetoparent((parent) => { return parent.width; }), constraint.relativetoparent((parent) => { return parent.height; })); layout.children.add(slayout, constraint.constant(0), constraint.constant(0), constraint.relativetoparent((parent) => { return parent.width; }), constraint.relativetoparent((parent) => { return parent.height; }));
i write (customize more bindable properties , labels regards different elements of overlayed text, bindable properties label background color , opacity).
public class overlayedimage : contentview { public static readonly bindableproperty sourceproperty = bindableproperty.create(nameof(source), typeof(imagesource), typeof(overlayedimage)); public imagesource source { { return (imagesource)getvalue(sourceproperty); } set { setvalue(sourceproperty, value); } } public static readonly bindableproperty textproperty = bindableproperty.create(nameof(text), typeof(string), typeof(overlayedimage)); public string text { { return (string)getvalue(sourceproperty); } set { setvalue(sourceproperty, value); } } protected override void onpropertychanged(string propertyname = null) { if (propertyname == sourceproperty.propertyname) { _image.source = source; } else if (propertyname == textproperty.propertyname) { _label.text = text; } else base.onpropertychanged(propertyname); } private readonly image _image =new image(); private readonly label _label = new label(); public overlayedimage() { var abs = new absolutelayout(); abs.children.add(_image, new rectangle(0, 0 , 1 , 1), absolutelayoutflags.all); abs.children.add(_label, new rectangle(0, 1, 1, 0.5), absolutelayoutflags.all); content = abs; } }
Comments
Post a Comment