Change Border Color Of AutoSuggestBox On Focus In UWP App

In the last article we learned how to change styles in a text box, but in the auto suggest box we have to implement it at a deep level.

Before starting let’s see what exactly we are going to implement in the below images.



In the above image you can see AutoSuggestBox border color is #8d8d8d. Now if I click on AutoSuggestBox to write something then after focus its border color will change into a blue color -- see the below image,



This is my main motive to write this article to describe how can we change border color of AutoSuggestBox on focus. Follow these steps.

1. Create project in Microsoft visual studio blend 2015.
   
   
   
   
2. Create App with any name at any location,
   
   
   
   
   
   
3. On the page write the code,
   
   1. <Page
   2. x:Class="AutoSuggestBoxApp.MainPage"
   3. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   4. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   5. xmlns:local="using:AutoSuggestBoxApp"
   6. xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   7. xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   8. mc:Ignorable="d">
   10. <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
   11. <Grid.RowDefinitions>
   12. <RowDefinition Height="50"/>
   13. <RowDefinition Height="220"/>
   14. </Grid.RowDefinitions>
   15. <Grid.ColumnDefinitions>
   16. <ColumnDefinition Width="*"/>
   17. </Grid.ColumnDefinitions>
   18. <Grid Grid.Row="0" Background="#0086dc">
   19. <TextBlock Text="Search" Foreground="White" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="24" FontWeight="SemiBold" Margin="25,0,0,0"></TextBlock>
   20. </Grid>
   21. <Grid Grid.Row="1">
   22. <AutoSuggestBox VerticalAlignment="Top" PlaceholderText="Search Name" Height="40" Padding="8" Margin="10" BorderBrush="#8d8d8d" BorderThickness="1"></AutoSuggestBox>
   23. </Grid>
   24. </Grid>
   26. </Page>
4. In the above code I have made 1 AutoSuggestBox Example.
   
   
   
   
5. Lets change the border color on focus, open the state window
   
   
   
   Then add a state group
   
   
   
   Then add a state group and a new state in it. Name that new state focused,
   
   
   
   
6. Now click on AutoSuggestBox and then open objects and Timeline
   
   
   
   Then Edit Template of AutoSuggestBox
   
   
   
   
   
   Now we can see in below image that AutoSuggestBox contains only Orientation state and two components in it
   
   1. TextBox
   2. SuggestionsPopup
   
   
   
   And to change the border color now we have to edit the template of the Textbox in the AutoSuggestBox.
   
   
   
   And then change the BorderBrush Property,
   
   
   
   
7. Now run the app and check.
   
   
   

In Visual state Manager you will get another Element to implement like Background Element, Content Element etc.