It allows the user to enter a text. It's similar to the Textbox control in the web world.
You can specify the line numbers, TextAlignment, Placeholder, Text Mode and Text Color.

Basic usage:

<TextInput Id="MyTextInput" Placeholder="Text here"
TextMode="GeneralText"  TextAlignment="Justify"></TextInput>new TextInput { Id = "MyTextInput", TextMode = TextMode.GeneralText,
TextAlignment = Alignment.Justify, Placeholder = "Text here"};

 

 

 

 

 

 

 

 

 

 

PseudoCssState

PseudoCssState is a boolean value that if it will be set to "disabled", it allows you to specify a visual style for it in CSS.

 

 Font and color

MarkUp:

<TextInput Text="TextInput 1" Style.Border="3" Style.Border.Color="red" Style.BackgroundColor="gold"/>

 

 

<TextInput Text="TextInput 2" Style.Border="3" Style.Border.Color="red" Style.BackgroundColor="brown"/>

 

 

Enabled & Ignored

Stylesheet has a boolean property named Ignored, which is false by default. When set to true it works the same as "display: none" in HTML. It means that the element will not only be invisible, but also it won't occupy space on the screen.

View has a boolean property named Enabled, which is true by default. When set to false the object will not respond to UI gesture events. But it will remain visible. Also, its PseudoCssState will be set to "disabled" which allows you to specify a visual style for it in CSS.

MarkUp:

<TextInput  Style.Height="20" Text="SearchInput 1" />
<TextInput  Style.Height="20" Text="SearchInput 2" Enabled="false" />
<TextInput  Style.Height="20" Text="SearchInput 3" />
<TextInput  Style.Height="20" Text="SearchInput 4" Ignored="true"/>
<TextInput  Style.Height="20" Text="SearchInput 5" />

 

PlaceHolder:

 The placeholder text shown when Text is null or empty. The default value is null.

<TextInput Id="MyTextInput"  Placeholder="Please Enter something here...!"/>

KeyboardActionType:

If instead of "Go" you want the submit button to have a different text or icon, you can set the KeyboardActionType property to any of the following values:

• Go
• Continue
• Done
• Join
• Next
• Search
• Send

Lines:

The Lines proeprty determines how many lines does InputText component have.

<TextInput Lines="5" Style.Border="1" Style.Border.Color="red"/>

Box Shadow

Zebble components have a special effect which is named BoxShadow. As you can see in next image, it has start X and Y position for effecting and the amount of radious.

MarkUp:

<TextInput Style.Height="40" Text=" SearchInput 1" Style.BoxShadow.Color ="red" Style.BoxShadow.BlurRadius="5" Style.BoxShadow.XOffset="5" Style.BoxShadow.YOffset="5" Style.Border="1"/>

Margin & Padding

You can see some information about Margin & Padding in Zebble here: http://zebble.net/docs/margin-padding

Position

The location of an object can be determined by Style.X and Style.Y.

MarkUp:

<TextInput Id="MyTextInput" Style.Height="30" Text=" InputBox 1" Style.Border ="1" Style.X="100" Style.Y="300"/>

TextAlign:

Gets or sets the horizontal alignment of the text displayed in the object.

MarkUp:

Sample 1:

<TextInput Id="MyTextInput" TextAlignment="Right" Text="My Text" Style.Border.Color="green"/>

C#:

MyTextInput.TextAlignment = Alignment.Right;

 

Sample 2:

<TextInput Id="MyTextInput" TextAlignment="TopLeft" Text="My Text" Style.Border.Color="green"/>

C#:

MyTextInput.TextAlignment = Alignment.TopLeft;

 

Sample 3:

<TextInput Id="MyTextInput" TextAlignment="TopRight" Text="My Text" Style.Border.Color="green"/>C#:

MyTextInput.TextAlignment = Alignment.TopRight;

 

Sample 4:

<TextInput Id="MyTextInput" TextAlignment="TopMiddle" Text="My Text" Style.Border.Color="green">C#:

MyTextInput.TextAlignment = Alignment.TopMiddle;

 

Sample 5:

<TextInput Id="MyTextInput" TextAlignment="Left" Text="My Text" Style.Border.Color="green"/>C#:

MyTextInput.TextAlignment = Alignment.Left;

 

Sample 6:

<TextInput Id="MyTextInput" TextAlignment="Middle" Text="My Text" Style.Border.Color="green"/>C#:

MyTextInput.TextAlignment = Alignment.Middle;

 

Sample 7:

<TextInput Id="MyTextInput" TextAlignment="BottomLeft" Text="My Text" Style.Border.Color="green"/>C#:

MyTextInput.TextAlignment = Alignment.BottomLeft;

 

Sample 8:

<TextInput Id="MyTextInput" TextAlignment="BottomRight" Text="My Text" Style.Border.Color="green"/>C#:

MyTextInput.TextAlignment = Alignment.BottomRight;

 

Sample 9:

<TextInput Id="MyTextInput" TextAlignment="BottomMiddle" Text="My Text" Style.Border.Color="green"/>C#:

MyTextInput.TextAlignment = Alignment.BottomMiddle;

 

TextColor

TextColor sets the color of the Text whick shown in the object.

MarkUp:

<TextInput Id="MyTextInput" Style.TextColor="white" Style.BackgroundColor="black" Text="My Text" Style.Border.Color="green"/>

C#:

MyTextInput.TextColor = Zebble.Color.Parse("#A2B044");

TextTransform

This property determine the output format of text:

• None: The output is same to the text.
• Uppercase: The all character of output is uppercase.
• Lowercase: The all character of output is lowercase.
• Capitalize: Only the first character of each work is uppercase.

 

MarkUp:

Sample 1:

<TextInput  Style.Border.Color="green" Lines="3" Text="ZEBBLE framework" TextTransform="None"/>

 

 

Sample 2:

<TextInput  Style.Border.Color="green" Lines="3" Text="ZEBBLE framework" TextTransform="Uppercase"/>

 

 

Sample 3:

<TextInput  Style.Border.Color="green" Lines="3" Text="ZEBBLE framework" TextTransform="Lowercase"/>

 

 

Sample 4:

<TextInput  Style.Border.Color="green" Lines="3" Text="ZEBBLE framework" TextTransform="Capitalize"/>

 

 

TextMode

You can set the output format of text. By default, text mode is Auto, which allows Zebble to guess the correct TextMode depending on the Id of the control.

 

sample 1:

<TextInput  Style.Border.Color="green"  Text="ZEBBLE framework" TextMode="GeneralText"/>

C#:

MyTextInput.TextMode = TextMode.GeneralText; // This affects the keyboard.

 

Sample 2:

<TextInput  Style.Border.Color="green"  Text="Farhad.abaei@gmail.com" TextMode="Email"/>

C#:

MyTextInput.TextMode = TextMode.Email; // This affects the keyboard.

 

Sample 3:

<TextInput  Style.Border.Color="green"  Text="0123456" TextMode="Password"/>

C#:

MyTextInput.TextMode = TextMode.Password; // This affects the keyboard.

 

Sample 4:

<TextInput  Style.Border.Color="green"  Text="343434343434" TextMode="Decimal"/>

C#:

MyTextInput.TextMode = TextMode.Decimal; // This affects the keyboard.

 

Actions:

This control also has various event handling methods including: FocusChanged, TextCompleted, Clear, TextChanged, FontChanged etc. Any event handler usage is similar to each other, you just have to specify the method you want to handle events in it. For example:

MyTextInput.TextChanged = TextChanged;private void TextChanged() { /* Do something here*/ }

Events:

• on-Flashed: Raised when the TextInput is flashed.
• on-Initialized: Raised when the TextInput object is created and rendered.
• on-Initializing: Raised when the TextInput object is being created and rendered.
• on-LongPressed: Raised when user clicked on the TextInput for a long time.
• on-PanFinished: Raised when user panned on the TextInput.
• on-Panning: Raised when user starts to pan on the TextInput.
• on-PreRendered: Raised when the TextInput object is not started to rendered before rendering.
• on-UserFocusChanged: Raised when user clicks on the TextInput or lost the focus of object.
• on-UserTextChanged:Raised when the Text property is changed.
• on-UserTextChangeSubmitted: This event is fired when the user taps the submit button on the soft keyboard, or presses the Enter key on a physical keyboard.
• on-Swiped: Raised when user swiped on the TextInput
• on-Tapped: Raised when user tapped on the TextInput.