TextEdit Styling

How-to Discussions
1

Hello,

I have been reading Fuse for a few days and have finally decided to test some features by building a simple form with customized UI styling. So Instead of using TextInput, I am using TextEdit.

However I am not able to type anything in the edit box or add a place holder text, What am I doing wrong? Here’s the code:

<App>
    <Rectangle Width="350" Height="27" Alignment="Center" Background="#E5FFB3">
        <TextEdit TextColor="#000" PlaceholderColor="#000"  TextAlignment="Center" FontSize="22" Height="25" Value="Hello World" Width="348" PlaceholderText="Hello World">
        </TextEdit>
        <Stroke Width="3">
            <SolidColor Color="#CCC" />
        </Stroke>
    </Rectangle>
</App>
2

Hi!

TextEdit is completely plain, so it does not support PlaceholderText. You can however implement your own like this:

<TextEdit>
    <Text ux:Name="placeholder">This is the placeholder</Text>
    <WhileContainsText>
        <Change placeholder.Visibility="Hidden" />
    </WhileContainsText>
</TextEdit>

Not sure why you can’t type anything, can you describe a bit more of what’s happening please?

3

I have integrated the placeholder code you suggested, but I still don’t see placeholder text. Also I am still not able to type anything in the Input field. Can you test the code?

<App>
    <Rectangle Width="350" Height="27" Alignment="Center" Background="#E5FFB3">
        <TextEdit TextColor="#000" PlaceholderColor="#000"  TextAlignment="Center" FontSize="22" Height="25" Value="Hello World" Width="348" PlaceholderText="Hello World">
        <Text ux:Name="placeholder" TextColor="#000">This is the placeholder</Text>
        <WhileContainsText>
            <Change placeholder.Visibility="Hidden" />
        </WhileContainsText>
        </TextEdit>
        <Stroke Width="3">
            <SolidColor Color="#CCC" />
        </Stroke>
    </Rectangle>
</App>
4

The reason you don’t see the placeholder text is because you’ve set Value="Hello World" for TextEdit. In other words WhileContainsText is true. :slight_smile:

The TextEdit is invisible because you haven’t set a Theme in the App tag. This is because TextEdit (just like TextInput) relies on native platform controls.

This should do the trick:

<App Theme="Basic">
    <Rectangle Width="350" Height="27" Alignment="Center" Background="#E5FFB3" HitTestMode="Children">
        <TextEdit TextColor="#000" TextAlignment="Center" FontSize="22" Height="25" Width="348" >
        <Text ux:Name="placeholder" TextColor="#000">This is the placeholder</Text>
        <WhileContainsText>
            <Change placeholder.Visibility="Hidden" />
        </WhileContainsText>
        </TextEdit>
        <Stroke Width="3">
            <SolidColor Color="#CCC" />
        </Stroke>
    </Rectangle>
</App>