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.

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,

AutoSuggestBox

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.

    project

  2. Create App with any name at any location,

    App

    App

  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">  
    9.   
    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>  
    25.   
    26. </Page>  
  4. In the above code I have made 1 AutoSuggestBox Example.

    Example

  5. Lets change the border color on focus, open the state window

    window

    Then add a state group

     state group

    Then add a state group and a new state in it. Name that new state focused,

     state group

  6. Now click on AutoSuggestBox and then open objects and Timeline

    AutoSuggestBox

    Then Edit Template of AutoSuggestBox

    Edit

    Edit

    Now we can see in below image that AutoSuggestBox contains only Orientation state and two components in it

    1. TextBox
    2. SuggestionsPopup

    TextBox

    And to change the border color now we have to edit the template of the Textbox  in the AutoSuggestBox.

    AutoSuggestBox

    And then change the BorderBrush Property,

    Property

  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.