WPF SystemColors: color of TextBox border

Question

I am trying to make a search TextBox with an embedded magnifying glass icon. I have the following markup so far:

<Border DockPanel.Dock="Bottom" Margin="2,4,0,4" 
        BorderThickness="1" SnapsToDevicePixels="True" 
        BorderBrush="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}">
    <DockPanel>
        <StackPanel Orientation="Horizontal" DockPanel.Dock="Right">
            <Image Source="/Resources/search-13x13.png" Width="13"/>
        </StackPanel>
        <TextBox Name="searchTextBox" DockPanel.Dock="Bottom" BorderThickness="0" 
                 Text="{Binding FilterText, UpdateSourceTrigger=PropertyChanged}"/>
    </DockPanel>
</Border>

However, I can't find the entry in SystemColors which will give me the same color as the standard TextBox border. This is a blueish color by default. Am I being really stupid here?!?

EDIT: btw, the image is contained in a stackpanel because I'm planning to put a dropdown arrow in there as well.

Solution 1

You might try using Microsoft.Windows.Themes.ListBoxChrome instead of the Border; that's what the default template for TextBox uses:

<ControlTemplate TargetType="TextBoxBase" 
                 xmlns:mwt="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero">
    <mwt:ListBoxChrome Name="Bd" SnapsToDevicePixels="True">
        <ScrollViewer Name="PART_ContentHost" 
                      SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
    </mwt:ListBoxChrome>
    <ControlTemplate.Triggers>
        <Trigger Property="UIElement.IsEnabled" Value="False">
            <Setter TargetName="Bd" Property="Panel.Background" 
                    Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
            <Setter Property="TextElement.Foreground" 
                    Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

You should be able to use just ListBoxChrome instead of Border rather than re-templating TextBox to match the code you presented.

Solution 2

I was able to get it programatically with:

TextBox.BorderBrush = SystemColors.ControlDarkBrush;

Solution 3

To anyone that is looking for a list of Brushes and what their colors will look like with different themes/OS

I would look here: http://blogs.msdn.com/b/wpf/archive/2010/11/30/systemcolors-reference.aspx

Solution 4

Based on Nicholas Armstrong's answer, that solution is working for me:

<Style TargetType="{x:Type local:CustomTextBox}" BasedOn="{StaticResource {x:Type TextBox}}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:CustomTextBox}">
                <mwt:ListBoxChrome x:Name="Bd" SnapsToDevicePixels="true" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" RenderFocused="{TemplateBinding IsKeyboardFocusWithin}" RenderMouseOver="{TemplateBinding IsMouseOver}">
                        <ScrollViewer x:Name="PART_ContentHost" />
                </mwt:ListBoxChrome>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Solution 5

It seems hackish, but I've had the best luck by creating a textbox (perhaps collapsed) and binding to its border brush.

View more solutions