How to change the color of the Border of a TextBox when it has focus?

Question

In my windows phone app, I have set the border of my Text box to null:

But when it has focus, it still show a blueish color as its border. How can I config that color? I tried looking at the template for Text Box, I don't see there is a property for the color of border when it has focus:

Does anyone has any idea if that is changable?

    <Thickness x:Key="TextControlHeaderMarginThemeThickness">0,0,0,4.8</Thickness>
    <x:Double x:Key="TextControlThemeMinHeight">33</x:Double>
    <x:Double x:Key="ContentControlFontSize">20.26</x:Double>
    <SolidColorBrush x:Key="TextBoxDisabledBackgroundThemeBrush" Color="Transparent" />
    <x:Double x:Key="TextControlBackgroundThemeOpacity">0.8</x:Double>
    <x:Double x:Key="TextControlBorderThemeOpacity">0.8</x:Double>
    <ControlTemplate x:Key="TextBoxControlTemplate1" TargetType="TextBox">
        <Grid>
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Disabled">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundElement" Storyboard.TargetProperty="Background">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextBoxDisabledBackgroundThemeBrush}" />
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextBoxDisabledBorderThemeBrush}" />
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="Foreground">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextBoxDisabledForegroundThemeBrush}" />
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextContentPresenter" Storyboard.TargetProperty="Foreground">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextBoxDisabledForegroundThemeBrush}" />
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Normal">
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="BackgroundElement" Storyboard.TargetProperty="Opacity" Duration="0"
                                To="{ThemeResource TextControlBackgroundThemeOpacity}" />
                            <DoubleAnimation Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Opacity" Duration="0"
                                To="{ThemeResource TextControlBorderThemeOpacity}" />
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Focused">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextSelectionHighlightColorThemeBrush}" />
                            </ObjectAnimationUsingKeyFrames>
                            <DoubleAnimation Storyboard.TargetName="PlaceholderTextContentPresenter" Storyboard.TargetProperty="Opacity" Duration="0" To="0" />
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundElement" Storyboard.TargetProperty="Background">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextBoxFocusedBackgroundThemeBrush}" />
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Border x:Name="BackgroundElement" Grid.Row="1" Background="{TemplateBinding Background}" Margin="{TemplateBinding BorderThickness}" />
            <Border x:Name="BorderElement" Grid.Row="1" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" />
            <ContentPresenter x:Name="HeaderContentPresenter" Grid.Row="0" Style="{StaticResource HeaderContentPresenterStyle}" Margin="{ThemeResource TextControlHeaderMarginThemeThickness}"
                Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" />
            <ScrollViewer x:Name="ContentElement" Grid.Row="1" MinHeight="{ThemeResource TextControlThemeMinHeight}"
                HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
                HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
                IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
                IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" Margin="{TemplateBinding BorderThickness}"
                Padding="{TemplateBinding Padding}" IsTabStop="False" ZoomMode="Disabled"
                AutomationProperties.AccessibilityView="Raw"/>
            <ContentControl x:Name="PlaceholderTextContentPresenter" Grid.Row="1" Foreground="{ThemeResource TextBoxPlaceholderTextThemeBrush}"
                FontSize="{ThemeResource ContentControlFontSize}" Margin="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}"
                IsTabStop="False" Content="{TemplateBinding PlaceholderText}" />
        </Grid>
    </ControlTemplate>

Answer 1

The highlight is done through a StoryBoard Animation.

Particularly this one in your Style

<VisualState x:Name="Focused">
    <Storyboard>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextSelectionHighlightColorThemeBrush}" />
        </ObjectAnimationUsingKeyFrames>
        <!--- .... --->
   </Storyboard>
</VisualState>

You can either get rid of it (delete it out), or change the values to say Red

<VisualState x:Name="Focused">
    <Storyboard>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush">
            <DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
        </ObjectAnimationUsingKeyFrames>
        <!--- .... --->
   </Storyboard>
</VisualState>

---

If you get rid of the StoryBoard Animation for Focused then you can set the color by just changing the BorderElement BorderBrush

<Border x:Name="BorderElement" BorderBrush="Red" BorderThickness="{TemplateBinding BorderThickness}" Grid.Row="1"/>