Single-line text input control.
TextInput is what you typically use or subclass when making input fields that only require a single line, like usernames, passwords, numbers, email, search fields, etc.
It has no appearance by default, which means it will be invisible until you give it a look or a text value.
If you want a text input control with a default appearance, see TextBox. If you want to accept multiple lines of text, use TextView.
This example shows a basic TextInput with some style and a button to clear its contents.
<Panel>
<Button Alignment="CenterRight" Text="Clear" Margin="5">
<Clicked>
<Set text.Value="" />
</Clicked>
</Button>
<TextInput ux:Name="text" PlaceholderText="Text field" PlaceholderColor="#ccc" Height="50" Padding="5" >
<Rectangle Layer="Background">
<Stroke Width="2" Brush="#BBB" />
</Rectangle>
</TextInput>
</Panel>The following example illustrates how you can subclass TextInput to achieve a consistent look throughout your app.
<!-- Subclassing TextInput -->
<TextInput ux:Class="MyTextInput" FontSize="20" PlaceholderColor="#ccc" Padding="5">
<Rectangle Layer="Background" CornerRadius="3">
<Stroke Width="1" Color="#ccc" />
<SolidColor Color="White" />
</Rectangle>
</TextInput>
<!-- Example usage -->
<StackPanel Margin="10" ItemSpacing="10">
<MyTextInput PlaceholderText="Username" />
<MyTextInput PlaceholderText="Password" IsPassword="true" />
<MyTextInput PlaceholderText="Repeat password" IsPassword="true" />
<MyTextInput />
</StackPanel>This example shows how you can configure the layout and behavior of the on-screen keyboard when the TextInput is in focus using the InputHint, AutoCorrectHint, AutoCapitalizationHint and ActionStyle properties.
<TextInput PlaceholderText="Search..." ActionStyle="Search" AutoCapitalizationHint="None" />
<TextInput PlaceholderText="Email" InputHint="Email" ActionStyle="Send" AutoCorrectHint="Disabled" AutoCapitalizationHint="None" />
<TextInput PlaceholderText="http://" InputHint="URL" ActionStyle="Go" AutoCorrectHint="Disabled" AutoCapitalizationHint="None" />
<TextInput PlaceholderText="+47 123 456 789" InputHint="Phone" />
<TextInput PlaceholderText="1234" InputHint="Number" />
<TextInput PlaceholderText="1.234" InputHint="Decimal" />
<TextInput PlaceholderText="1" InputHint="Integer" />A common use-case is to have the TextInput raise an event when the user presses the return/search key on their virtual/physical keyboard.
The following example demonstrates using ActionTriggered to get an event when this happens:
<StackPanel>
<JavaScript>
var Observable = require("FuseJS/Observable");
var searchStr = Observable("Please enter a query...");
var entryStr = Observable("");
function onSearch(args) {
searchStr.value = "You entered: " + entryStr.value;
}
module.exports = {
searchStr: searchStr,
onSearch: onSearch,
entryStr: entryStr
};
</JavaScript>
<Text FontSize="20">Search</Text>
<TextInput Value="{entryStr}" PlaceholderText="Enter your query...." ActionTriggered="{onSearch}" />
<Text FontSize="20" Value="{searchStr}" />
</StackPanel>In some cases, it might be undesirable for the virtual keyboard to disappear when a certain other ux element is pressed.
This can be done by passing a parent container to the Focus.Delegate property, causing the focus state to be delegated to the delegate target:
<DockPanel ux:Name="dockpanel" IsFocusable="true" Color="#fff">
<TextInput Focus.Delegate="dockpanel" />
<Panel Dock="Right">
<Text Value="SEND" Alignment="Center" Margin="4,0" Color="#fff" />
<Rectangle CornerRadius="4" Color="#000" />
</Panel>
</DockPanel>Specifies what the returnkey should mean. For exmaple:
ActionStyle="Send" will change the return key to a send icon if the platform supports it.
ActionStyle="Next" will make the return key focus the next TextInputControl if any. Typically
used in forms.
Visual alignment of the underlying text editor.
Set to true to display dots instead of the actual text value.
Color of the PlaceholderText
Text to show when the TextInputControl does not have a value
Hint for systems that support autocapitalization (Like Android and iOS)
Hint for systems that support autocorrect (Like Android and iOS)
The color of the caret (also know as cursor) shown when editing text
Font size in points
InputHint can change what kind of onscreen-keyboard will show on mobile export targets.
For example InputHint="Phone" will give a numerical keyboard and InputHint="Email"
will give keyboard with @ and no autocorrect
Text can be selected and copied only
Spacing in points between each line of text
Max number of characters in the Value string
The color of the selected-text rectangle
How text should wrap. Default is NoWrap
The Alignment of the Element.
Determines how the aspect ratio is maintained in a situation when it violates the min or max sizing constraints.
The manner in which the size and position of the element is calculated.
Clips the child elements to the bounds of this element visually.
Specifies how hit tests should be performed on this element.
The height limit for an element using BoxSizing="Limit".
The width limit for an element using BoxSizing="Limit".
The Visibility of the Element.
Begins removing a given node, playing all RemovedAnimations before actual removal.
Begins removing a given visual, playing all RemovedAnimations before actual removal.
Requests that this visual be brought into the visible are of the screen. Typically a containing
ScrollView will scroll to ensure it is visible.
Brings the given child to the front of the Z-order. In UX markup, use the BringToFront trigger action instead.
The number of child nodes of this visual.
The children of the visual. All nodes placed inside the visual in UX markup are assigned to this list. The order of Visuals this list determines the order of layout. The Z-order of the children is by default equal to this order, but can be manipulated separately using methods like BringToFront and SendToBack.
Whether this visual has any visual child nodes.
Indicates the visual for this node has changed. This allows the root-level node to know that it must draw, and any caching that it must invalidate the cache for this node.
Indicates the composition of the visual has changed, but that the visual drawing itself is still valid (for example a position change).
Whether this node is in an enabled context.
The context is disabled if one of the ancestor nodes have IsEnabled set to false.
Returns whether this visual is visible without concern for whether an ancestor visual is hidden or collapsed.
Returns whether this visual is currently visible. Will return false if any of the ancestor visuals are hidden or collapsed. This property can not be used to check whether a visual is hidden because it is occluded by another visual, or is outside the view but otherwise visible.
The layer this visual belongs to in the Parent container.
Describes how this visual participates in layout.
Converts a coordinate from the local space into the parent space.
The list of resources defined at this node.
Sends the given child to the back of the Z-order. In UX markup, use the SendToBack trigger action instead.
Whether to snap the result of layout of this visual to physical device pixels.
Converts a coordinate from the parent space into the local space.
The number of child visuals of this visual.
The list of bindings belonging to this node.
The context parent is the semantic parent of this node. It is where non-UI structure should be resolved, like looking for the DataContext, a Navigation, or other semantic item.
Finds the first node with a given name that satisfies the given acceptor. The serach algorithm works as follows: Nodes in the subtree are matched first, then it matches the nodes in the subtrees ofthe ancestor nodes by turn all the way to the root. If no matching node is found, the function returns null.
Whether rooting for this node is completed. Returns false if unrooting has started.
Whether rooting of this node has started. Note that even if this property returns true, rooting may not yet be completed for the node. See also IsRootingCompleted.
Run-time name of the node. This property is automatically set using the ux:Name attribute.
Returns the next sibling node of the given type.
If you override OnRooted you must call base.OnRooted() first in your derived class. No other processing should happen first, otherwise you might end up in an undefined state.
The parent Visual of this node. Will return null if the node is not rooted.
Returns the next sibling node of the given type.
A linked list holding data for extrinsic properties.
hide
hide
Specifies how an element is docked while inside a DockPanel
Shorthand for setting the MatchKey property on the implicit Each created when using the Items attached property.
Called when a Visual receives input focus.
Called when a Visual loses input focus.
The index of the column the element occupies while in a Grid. If not set, the grid will place the element in a cell according to its position in the child list.
The number of columns this element occupies in a Grid. Defaults to 1.
The index of the row the element occupies while in a Grid. If not set, the grid will place the element in a cell according to its position in the child list.
The number of rows this element occupies in a Grid. Defaults to 1.
Called when a Visual receives a key press event while having input focus. On mobile devices, keyboard input only applies to physical buttons (such as BackButton), not soft keyboards.
Called when a Visual receives a key release event while having input focus. On mobile devices, keyboard input only applies to physical buttons (such as BackButton), not soft keyboards.
Determines how the layout of the master element is used to control the size of this one.
Adds a handler for when the page is Activated
Adds a handler for when the page is Deactivated
Called when a pointer enters a visual.
Called when a pointer leaves a visual.
Called when a pointer is moved on a visual.
Called when a pointer is pressed on the visual.
Called when a pointer is released on a visual.
Called when a pointer wheel is moved on a visual.
Allows TextEdit and TextInput to be treated the same in triggers.
Interface for objects that can have a script engine representation
hide