Background image of TextInput

How-to Discussions
1

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.

file

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?

Thanks

2

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:

3

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…

4

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

DETAILS:

  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" />

    <WhileNotFocused>

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

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

    </WhileNotFocused>

</TextInput>
  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">
                    <DockPanel>
                        <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" />
                    </DockPanel>
                    <DockPanel>
                        <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" />
                    </DockPanel>
                </StackPanel>

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