Background image of TextInput

Hi guys.

As you can see, I’ve an image as background of my input fields but the TextInput always make its smaller than the real size.


How can I make my image fulfill the entire TextInput? Or how can I set a fixed size for my background image to expand as TextInput dimensions?


AFAIK you posted this question on Slack and got it answered there? If so, feel free to post the solution here as well so others can learn from it :slight_smile:

Hi Bent.

Thank you for your time. You are absolutely right, be sure I’ll post my solution here as soon as I get my problem entirely solved.

For now I could “expand” the background image using this <Image File="../Assets/FieldBackground.png" StretchMode="Fill" Layer="Background" /> but I still facing a trouble to render and use TextInput features ;). Like: my text always exceeds the TextInput limits and I have no idea why. Working to solve it…

Hi guys, I solved my problem doing these things:

  1. I created a component to render my “special” TextInput

  2. I splitted the background image into three parts

  3. I mount the object on the screen that has to renderer it


  1. My component ZFValidationInput.ux:
<TextInput ux:Class="ZFValidationInput" Value="{Property Text}"
  TextColor="{Property ValidationColor}" ValidationColor="White" PlaceholderColor="PlaceholderColor" MaxLength="40" >

    <string ux:Property="Text" />
    <bool ux:Property="IsValid" />
    <float4 ux:Property="ValidationColor" />
    <Uno.UX.FileSource ux:Property="JSValidator" />
    <Uno.UX.FileSource ux:Property="BackgroundImage" />

    <Image File="../Assets/FieldBackground.png" StretchMode="Fill" Layer="Background" />


       <JavaScript File="{Property JSValidator}" />

       <WhileTrue Value="{Property IsValid}">
           <Change this.ValidationColor="White"/>
       <WhileFalse Value="{Property IsValid}">
           <Change this.ValidationColor="RedError"/>


  1. The images:

Left: file

Center (only one used as background): file

And the right side: file

  1. A page where I call my personalized TextInput:
                <StackPanel ItemSpacing="20" ContentAlignment="Center" Margin="20">
                        <Image Dock="Left" File="../Assets/FieldSmileImage.png" />
                        <ZFValidationInput Value="{email}" JSValidator="../Components/ZFEmailInput.js" InputHint="Email" PlaceholderText="e-mail" />
                        <Image Dock="Right" File="../Assets/FieldRightImage.png" />
                        <Image Dock="Left" File="../Assets/FieldSmileImage.png" />
                        <ZFValidationInput Value="{password}" JSValidator="../Components/ZFPasswordInput.js" PlaceholderText="senha (6 caracteres)" IsPassword="true" />
                        <Image Dock="Right" File="../Assets/FieldRightImage.png" />

I hope this can help a lot of developers :slight_smile: