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:

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.



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:



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.
   
   
   
   
2. Create app with any name at any location.
   
   
   
   
   
   
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.
   
   
   
   
   
   
   
   
5. Let's change the border color on focus, open the state window, as given below:
   
   
   
   Add a state group:
   
   
   
   Add a state, as shown below:
   
   
   
   Name that new state as Focused, as shown below:
   
   
   
   
6. Now, click the textbox and open objects & Timeline, as shown below:
   
   
   
   Edit the template of the textbox, as shown below:
   
   
   
   
   
   Set the Border Brush color according to the image, given below:
   
   
   
   
   
   
7. Now, run the app and check.
   
   
   

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