How to override TextBox's AccentBorder color?

[valery-kirichenko]

I am quite new to XAML styling and trying to figure out the best way to programmatically change color of TextBox bottom border color when it's focused. Similar to what's described here (although this issue is related to WinUI 3)

[Mithicor]

Are you wanting to use your computer's Accent colors or do you want a specific color?

If you want to use your computer's Accent color, then use ApplicationThemeManager.ApplySystemTheme(); when your program / window is loading up.

[valery-kirichenko]

I want a specific color to indicate that there is an error in the TextBox

[Mithicor]

let me try some things, will get back to you.

[valery-kirichenko]

@Mithicor any news? 😅

[Mithicor]

Hey sorry, I was away on vaca and completely forgot about this... Anyways, here is a simple example with the styling taken from WPF-UI so you can override it:

<ui:FluentWindow x:Class="TempApp.MainWindow"
                    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                    xmlns:ui="http://schemas.lepo.co/wpfui/2022/xaml"
                    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                    xmlns:local="clr-namespace:TempApp"
                    mc:Ignorable="d"
                    Title="MainWindow" Height="450" Width="800">

    <Window.Resources>
        <Style x:Key="DefaultTextBoxStyle" TargetType="{x:Type TextBox}">
            <!--  Universal WPF UI focus  -->
            <Setter Property="FocusVisualStyle" Value="{DynamicResource DefaultControlFocusVisualStyle}" />
            <!--  Universal WPF UI focus  -->
            <!--  Universal WPF UI ContextMenu  -->
            <Setter Property="ContextMenu" Value="{DynamicResource DefaultControlContextMenu}" />
            <!--  Universal WPF UI ContextMenu  -->
            <Setter Property="Foreground" Value="{DynamicResource TextControlForeground}" />
            <Setter Property="CaretBrush" Value="{DynamicResource TextControlForeground}" />
            <Setter Property="Background" Value="{DynamicResource TextControlBackground}" />
            <Setter Property="BorderBrush" Value="{DynamicResource TextControlElevationBorderBrush}" />
            <Setter Property="BorderThickness" Value="{StaticResource TextBoxBorderThemeThickness}" />
            <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
            <Setter Property="ScrollViewer.CanContentScroll" Value="False" />
            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden" />
            <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden" />
            <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" />
            <Setter Property="HorizontalAlignment" Value="Stretch" />
            <Setter Property="VerticalAlignment" Value="Stretch" />
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="VerticalContentAlignment" Value="Top" />
            <Setter Property="MinHeight" Value="{DynamicResource TextControlThemeMinHeight}" />
            <Setter Property="MinWidth" Value="{DynamicResource TextControlThemeMinWidth}" />
            <Setter Property="Padding" Value="{DynamicResource TextControlThemePadding}" />
            <Setter Property="Border.CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
            <Setter Property="SnapsToDevicePixels" Value="True" />
            <Setter Property="OverridesDefaultStyle" Value="True" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TextBox}">
                        <Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
                            <Border x:Name="ContentBorder" MinWidth="{TemplateBinding MinWidth}" MinHeight="{TemplateBinding MinHeight}" Padding="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{TemplateBinding Border.CornerRadius}">
                                <Grid Margin="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                    <ui:PassiveScrollViewer x:Name="PART_ContentHost" CanContentScroll="{TemplateBinding ScrollViewer.CanContentScroll}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" IsTabStop="{TemplateBinding ScrollViewer.IsTabStop}" Style="{DynamicResource DefaultTextBoxScrollViewerStyle}" TextElement.Foreground="{TemplateBinding Foreground}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" />
                                </Grid>
                            </Border>
                            <!--  The Accent Border is a separate element so that changes to the border thickness do not affect the position of the element  -->
                            <Border x:Name="AccentBorder" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" BorderBrush="{DynamicResource ControlStrokeColorDefaultBrush}" BorderThickness="{StaticResource TextBoxAccentBorderThemeThickness}" CornerRadius="{TemplateBinding Border.CornerRadius}" />
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsFocused" Value="True">
                                <Setter TargetName="AccentBorder" Property="BorderThickness" Value="0,0,0,2" />
                                **<Setter TargetName="AccentBorder" Property="BorderBrush" Value="{DynamicResource TextControlFocusedBorderBrush}" />**
                                <Setter TargetName="ContentBorder" Property="Background" Value="{DynamicResource TextControlBackgroundFocused}" />
                            </Trigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsEnabled" Value="True" />
                                    <Condition Property="IsMouseOver" Value="True" />
                                    <Condition Property="IsFocused" Value="False" />
                                </MultiTrigger.Conditions>
                                <Setter TargetName="ContentBorder" Property="Background" Value="{DynamicResource TextControlBackgroundPointerOver}" />
                            </MultiTrigger>
                            <Trigger Property="IsEnabled" Value="True">
                                <Setter Property="Cursor" Value="IBeam" />
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter TargetName="ContentBorder" Property="Background" Value="{DynamicResource TextControlBackgroundDisabled}" />
                                <Setter TargetName="ContentBorder" Property="BorderBrush" Value="{DynamicResource TextControlBorderBrushDisabled}" />
                                <Setter TargetName="AccentBorder" Property="BorderBrush" Value="{DynamicResource TextControlBorderBrushDisabled}" />
                                <Setter Property="Foreground" Value="{DynamicResource TextControlForegroundDisabled}" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>


    <Grid>
        <ui:TitleBar Grid.Row="0" x:Name="TitleBar">
        </ui:TitleBar>

        <ui:TextBox Width="150" Height="35" Text="Testing" IsEnabled="{Binding IsChecked, ElementName=CHKEnabled}" Style="{StaticResource DefaultTextBoxStyle}"/>
        <CheckBox x:Name="CHKEnabled" Content="IS TEXTBOX ENABLED" IsChecked="True" Margin="20,0,0,0"/>
    </Grid>
</ui:FluentWindow>

In the Style that is in the 'Window.Resources', you will want to modify this section:

<ControlTemplate.Triggers>
  <Trigger Property="IsFocused" Value="True">
      <Setter TargetName="AccentBorder" Property="BorderThickness" Value="0,0,0,2" />
      <Setter TargetName="AccentBorder" Property="BorderBrush" Value="GoldenRod" />
      <Setter TargetName="ContentBorder" Property="Background" Value="{DynamicResource TextControlBackgroundFocused}" />
  </Trigger>
  <MultiTrigger>
      <MultiTrigger.Conditions>
          <Condition Property="IsEnabled" Value="True" />
          <Condition Property="IsMouseOver" Value="True" />
          <Condition Property="IsFocused" Value="False" />
      </MultiTrigger.Conditions>
      <Setter TargetName="ContentBorder" Property="Background" Value="{DynamicResource TextControlBackgroundPointerOver}" />
  </MultiTrigger>
  <Trigger Property="IsEnabled" Value="True">
      <Setter Property="Cursor" Value="IBeam" />
  </Trigger>
  <Trigger Property="IsEnabled" Value="False">
      <Setter TargetName="ContentBorder" Property="Background" Value="{DynamicResource TextControlBackgroundDisabled}" />
      <Setter TargetName="ContentBorder" Property="BorderBrush" Value="{DynamicResource TextControlBorderBrushDisabled}" />
      <Setter TargetName="AccentBorder" Property="BorderBrush" Value="{DynamicResource TextControlBorderBrushDisabled}" />
      <Setter Property="Foreground" Value="{DynamicResource TextControlForegroundDisabled}" />
  </Trigger>
</ControlTemplate.Triggers>

In the first trigger you will see that when it is focused they are changing the 'BorderBrush' that belongs to the 'AccentBorder' element. This is what you are wanting to change if I am understanding you correctly.

The first snippet of code has a straight copy of the style, but in the second snippet of code I changed the 'BorderBrush' to GoldenRod, so that you will know what needs to be changed.

You will just need to determine what the trigger is that you want it to change on and to whatever color you desire.

P.S. The checkbox is just so you can easily see the styling changes in both the enabled and disabled states of the textbox.