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

enter image description here

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

Popular posts from this blog

javascript - AngularJS custom datepicker directive -

javascript - jQuery date picker - Disable dates after the selection from the first date picker -