my designer created background image style inputs looks this:
how accomplish in xamarin.forms? easy part i'm guessing removing border, need position on top of image (i'd assume using relativelayout?) , hardest (in point of view) setting proper size "fill" remaining of image. i'm using xaml, if know in c# can extrapolate that, no problem. ideas?
edit: i've managed far: 
the code:
<relativelayout> <image source="input_selected.png"></image> <stacklayout orientation="horizontal" horizontaloptions="centerandexpand"> <image source="ico_password.png" scale="0.7"></image> <entry x:name="passwordt" placeholder="senha" ispassword="true" horizontaloptions="centerandexpand" text=""></entry> </stacklayout> </relativelayout> edit2:
<?xml version="1.0" encoding="utf-8" ?> <contentpage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:class="loginpage" style="{staticresource loginbackground}"> <scrollview> <relativelayout x:name="relativelayoutlogin"> <stacklayout x:name="backgroundlayout" spacing="15" horizontaloptions="center" verticaloptions="start"> <stacklayout.padding> <onplatform x:typearguments="thickness" ios="15, 38, 15, 15" android="15, 18, 15, 15" winphone="15, 18, 15, 15" /> </stacklayout.padding> <stacklayout.children> <image source="logo.png" aspect="aspectfit" heightrequest="75"></image> <image x:name="backgroundbox" source="box_completo.png" aspect="aspectfill"></image> </stacklayout.children> </stacklayout> <stacklayout relativelayout.yconstraint="{constraintexpression type=relativetoview, elementname=backgroundlayout, property=y, constant=111}" relativelayout.widthconstraint="{constraintexpression type=relativetoview, elementname=backgroundlayout, property=width, factor=1}"> <!--<stacklayout.padding> <onplatform x:typearguments="thickness" ios="15, 38, 15, 15" android="15, 18, 15, 15" winphone="15, 18, 15, 15" /> </stacklayout.padding>--> <relativelayout> <image source="input.png" x:name="bgusername"></image> <image source="input_selected.png" x:name="selectedbgusername" isvisible="false"></image> <stacklayout relativelayout.xconstraint="{constraintexpression type=constant, constant=8}" relativelayout.yconstraint="{constraintexpression type=constant, constant=8}" relativelayout.widthconstraint="{constraintexpression type=relativetoparent, property=width, constant=-16}" relativelayout.heightconstraint="{constraintexpression type=relativetoparent, property=height, constant=-16}" orientation="horizontal"> <image source="ico_user.png" scale="0.6"></image> <entry x:name="usernameoremail" placeholder="nome de usuário" isenabled="true" horizontaloptions="fillandexpand" text="" textcolor="black"></entry> </stacklayout> </relativelayout> <relativelayout> <image source="input.png" x:name="bgpassword"></image> <image source="input_selected.png" x:name="selectedbgpassword" isvisible="false"></image> <stacklayout relativelayout.xconstraint="{constraintexpression type=constant, constant=8}" relativelayout.yconstraint="{constraintexpression type=constant, constant=8}" relativelayout.widthconstraint="{constraintexpression type=relativetoparent, property=width, constant=-16}" relativelayout.heightconstraint="{constraintexpression type=relativetoparent, property=height, constant=-16}" orientation="horizontal"> <image source="ico_password.png" scale="0.6"></image> <entry x:name="password" placeholder="senha" ispassword="true" horizontaloptions="fillandexpand" text="" textcolor="black"></entry> </stacklayout> </relativelayout> <!--<relativelayout scale="0.85"> <image source="input.png" x:name="bgusername"></image> <image source="input_selected.png" x:name="selectedbgusername" isvisible="false"></image> <stacklayout orientation="horizontal" horizontaloptions="centerandexpand" padding="15, 5, 0, 0"> <image source="ico_user.png" scale="0.6"></image> <entry x:name="usernameoremail" placeholder="nome de usuário" isenabled="true" widthrequest="300" horizontaloptions="centerandexpand" text="" textcolor="black"></entry> </stacklayout> </relativelayout> <relativelayout scale="0.85"> <image source="input.png" x:name="bgpassword"></image> <image source="input_selected.png" x:name="selectedbgpassword" isvisible="false"></image> <stacklayout orientation="horizontal" horizontaloptions="centerandexpand" padding="10, 5, 0, 0"> <image source="ico_password.png" scale="0.6"></image> <entry x:name="password" placeholder="senha" ispassword="true" horizontaloptions="centerandexpand" widthrequest="300" text="" textcolor="black"></entry> </stacklayout> </relativelayout>--> <image x:name="loginbuttonfm" style="{staticresource fmloginbutton}" scale="0.85"></image> <label text="ou" textcolor="black" horizontaloptions="centerandexpand"></label> <image x:name="loginbuttonfacebook" style="{staticresource facebookloginbutton}" scale="0.85"></image> <image x:name="loginbuttongoogle" style="{staticresource googleloginbutton}" scale="0.85"></image> <image x:name="loginbuttontwitter" style="{staticresource twitterloginbutton}" scale="0.85"></image> </stacklayout> </relativelayout> </scrollview> </contentpage> thanks!
you're on right track. need add few constraints 1 of views in relativelayout.
<relativelayout> <image source="input_selected.png"></image> <stacklayout relativelayout.xconstraint="{constraintexpression type=constant, constant=8}" relativelayout.yconstraint="{constraintexpression type=constant, constant=8}" relativelayout.widthconstraint="{constraintexpression type=relativetoparent, property=width, constant=-16}" relativelayout.heightconstraint="{constraintexpression type=constant, constant=48}" orientation="horizontal"> <image source="ico_password.png" scale="0.7"></image> <entry x:name="passwordt" placeholder="senha" ispassword="true" horizontaloptions="fillandexpand" text="offspring"></entry> </stacklayout> </relativelayout> that position stacklayout fill entire relativelayout 8dpx padding on each side. because entry set fillandexpand, take space in stacklayout not occupied ico_password.
Comments
Post a Comment