Change Border Color Of Text Box On Focus In UWP App

In this article, we are going to change the border style when the user focuses on a textbox in an app. It's very easy to change the border color by defining your text box style, as shown below:

  1. <Style x:Key="FeedtxtName" TargetType="TextBox">  
  2. <Setter Property="PlaceholderText" Value="Name/Email"></Setter>  
  3. <Setter Property="AcceptsReturn" Value="True"></Setter>  
  4. <Setter Property="Height" Value="40"></Setter>  
  5. <Setter Property="Padding" Value="8"></Setter>  
  6. <Setter Property="BorderBrush" Value="#8d8d8d"></Setter>  
  7. <Setter Property="BorderThickness" Value="1"></Setter>  
  8. <Setter Property="Margin" Value="5"></Setter>  
  9. </Style>  
The main issue is to change the border color, when the user focuses on textbox, for which, he has to implement Visual states in most of the examples. You will find that we can use the Style.Triggers, but if we are implementing Universal Windows app for Windows 10, using XAML & C#, it is not possible to use the triggers. Thus, let’s start to implement the task to change the border color on gotfocus.

border

In the image, given above, you can see, for both the text box border color is #8d8d8d, which is already mentioned in my style dictionary. Now, if I click text box to write something, after focusing in it, its border color will change into a blue color -- see the image, given below:

color

This is my main motive to write this article to describe, how we can change the border color of the text box on gotfocus. Follow these steps. 
  1. Create the project in Microsoft Visual Studio Blend 2015.

    project

  2. Create app with any name at any location.

    Create App

    Create App

  3. On the page, write the code, given below:
    1. <Page x:Class="TextBoxApp.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:TextBoxApp" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">  
    2.     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">  
    3.         <Grid.RowDefinitions>  
    4.             <RowDefinition Height="50" />  
    5.             <RowDefinition Height="220" /> </Grid.RowDefinitions>  
    6.         <Grid.ColumnDefinitions>  
    7.             <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions>  
    8.         <Grid Grid.Row="0" Background="#0086dc">  
    9.             <TextBlock Text="Feedback" Foreground="White" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="24" FontWeight="SemiBold" Margin="25,0,0,0"></TextBlock>  
    10.         </Grid>  
    11.         <Grid Grid.Row="1">  
    12.             <TextBox VerticalAlignment="Top" PlaceholderText="Name/Email" AcceptsReturn="True" Height="40" Padding="8" Margin="10" BorderBrush="#8d8d8d" BorderThickness="1"></TextBox>  
    13.         </Grid>  
    14.     </Grid>  
    15. </Page>  
  4. In the code, given above, I had made on Textbox Example. According to this, you can implement on the other textboxes too.

    textboxes

    textboxes

    textboxes

  5. Let's change the border color on focus, open the state window, as given below:

    state window

    Add a state group:

    state group

    Add a state, as shown below:

    state

    Name that new state as Focused, as shown below:

    new

  6. Now, click the textbox and open objects & Timeline, as shown below:

    objects & Timeline

    Edit the template of the textbox, as shown below:

    TextBox

    TextBox

    Set the Border Brush color according to the image, given below:

    Border Brush color

    Border Brush color

  7. Now, run the app and check.

    app

In Visual State Manager, you will get another element to implement like background element, content element etc.

Up Next
    Ebook Download
    View all
    Learn
    View all