Skip to main content
Version: 0.10.x

TextBox

The TextBox control is an editable text field where a user can input text.

Reference​

TextBox

Source code​

TextBox.cs

Examples​

Basic one line TextBox​

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        x:Class="AvaloniaAppTemplate.MainWindow"
        Title="AvaloniaAppTemplate">
    <StackPanel Margin="10">
        <TextBox />
    </StackPanel>
</Window>

produces the following output in Windows 10

Password input TextBox​

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        x:Class="AvaloniaAppTemplate.MainWindow"
        Title="AvaloniaAppTemplate">
    <StackPanel Margin="10">
        <TextBox PasswordChar="#" />
    </StackPanel>
</Window>

produces the following output in Windows 10 when text is input

When using the Fluent theme, you can apply the style class, revealPasswordButton, and the TextBox will provide an eye 👁 glyph for the user to show the plane text temporally. Please note, the TextBox may be written to but not copied from.

<TextBox Classes="revealPasswordButton" PasswordChar="•" />

TextBox with watermark​

Avalonia can show a "watermark" in a TextBox, which is a piece of text that is displayed when the TextBox is empty (in HTML5 this is called a placeholder)

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        x:Class="AvaloniaAppTemplate.MainWindow"
        Title="AvaloniaAppTemplate">
    <StackPanel Margin="10">
        <TextBox Watermark="Street address" />
    </StackPanel>
</Window>

produces the following output in Windows 10

Multiline TextBox​

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        x:Class="AvaloniaAppTemplate.MainWindow"
        Title="AvaloniaAppTemplate">
    <Grid Margin="10">
        <TextBox AcceptsReturn="True" TextWrapping="Wrap" />
    </Grid>
</Window>

produces the following output in Windows 10 when text is input

TextInput Event Handling​

By default the TextInput event does nothing if you assign directly to it. This is due to the TextBox itself handling the event from the underlying InputElement.

If you wish to access the TextInput event, then you will have to use the TextBox.AddHandler method to intercept the event via event tunneling.

MyTextInput.AddHandler(TextInputEvent, MyTextInput_InputHandler, RoutingStrategies.Tunnel);

To see more details about this behavior, read routed events documentation page.