UWP - How to use TextBox TextChanged event

UWP - TextBox TextChanged Event

The TextBox class represents a control that can be used to display and edit plain text. A TextBox can be single or multi-line. The TextBox control enables the UWP app user to enter text into a UWP app. The TextBox is typically used to capture a single line of text but the UWP developers can configure it to capture multiple lines of text. The text displays on the screen in a simple uniform plaintext format.

The following Universal Windows Platform application development tutorial demonstrates how we can use the TextBox TextChanged event. Here we displayed the TextBox entered text on a TextBlock control when the TextBox text changed.

The TextBox TextChanged event Occurs when content changes in the text box. The TextBox TextChanged event type is TextChangedEventHandler. The TextChangedEventHandler delegate represents the method that will handle the TextChanged event.

The TextChangedEventHandler(object sender, TextChangedEventArgs e) method has two parameters named sender and e. The sender parameter is an Object to which the event handler is attached. And the e parameter is TextChangedEventArgs which is the event data.

The TextBox Text property gets or sets the text contents of the text box. This property value is a String which is the string containing the text contents of the text box. The default value of this property is an empty string.

MainPage.xaml

<Page
    x:Class="UniversalAppTutorials.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UniversalAppTutorials"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    >
    <StackPanel Padding="50" Background="AliceBlue">
        <TextBlock
            x:Name="TextBlock1"
            FontFamily="MV Boli"
            FontSize="25"
            Foreground="Crimson"
            TextWrapping="Wrap"
            Margin="5"
            />
        <TextBox
            x:Name="TextBox1"
            PlaceholderText="Input some colors here"
            Header="Colors"
            Margin="5"
            MaxHeight="125"
            Height="100"
            AcceptsReturn="True"
            TextWrapping="Wrap"
            TextChanged="TextBox1_TextChanged"
            ScrollViewer.VerticalScrollBarVisibility="Auto"
            />
    </StackPanel>
</Page>

MainPage.xaml.cs

using Windows.UI.Xaml.Controls;


namespace UniversalAppTutorials
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        /*
            TextBox.TextChanged event
                Occurs when content changes in the text box.
        */

        private void TextBox1_TextChanged(object sender, TextChangedEventArgs e)
        {
            // Cast sender as a TextBox
            TextBox textBox = sender as TextBox;

            // Get the TextBox inputted text and display it on TextBlock
            TextBlock1.Text = "You inputted:\n"+textBox.Text;
        }
    }
}