'#333333' is not a valid value for the 'System.Windows.Controls.Border.BorderBrush' property on a Setter with XAML

Question

I am trying to create a small application using WPF. I want to add a border with a round corner to a text box. At the same time, I added global vales to the App.xaml file so I can reuse the colors.

This is what I added t my App.xaml file

<Application.Resources>
    <System:String x:Key="TextRegular">#333333</System:String>
    <System:String x:Key="TextDanger">#dc3545</System:String>
    <System:String x:Key="TextInput">#495057</System:String>
    <System:String x:Key="InputBorder">#80bdff</System:String>


    <Style x:Key="FormControl" TargetType="TextBox">
        <Setter Property="Padding" Value="5" />
        <Setter Property="FontSize" Value="14" />
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="BorderThickness" Value="1" />
    </Style>

    <Style x:Key="FormInputBorder" TargetType="Border">
        <Setter Property="BorderBrush" Value="{StaticResource TextRegular}" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="CornerRadius" Value="3" />
    </Style>

    <Style x:Key="FormLabel" TargetType="Label">
        <Setter Property="Padding" Value="5" />
        <Setter Property="FontSize" Value="14" />
        <Setter Property="VerticalAlignment" Value="Center" />
        <!-- <Setter Property="Foreground" Value="{StaticResource TextRegular}" /> -->
    </Style>

    <Style x:Key="HasError" TargetType="TextBlock">
        <Setter Property="Padding" Value="5" />
        <Setter Property="VerticalAlignment" Value="Center" />
        <!-- <Setter Property="Foreground" Value="{StaticResource TextDanger}" /> -->
    </Style>


    <Style x:Key="Col" TargetType="StackPanel">
        <Setter Property="Margin" Value="3" />
    </Style>

</Application.Resources>

Then in my MainWindow.xaml I am using these styles like so

 <StackPanel Style="{StaticResource Col}">
    <Grid>
        <Grid.ColumnDefinitions >
            <ColumnDefinition Width="*" ></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <StackPanel Grid.Column="0" Style="{StaticResource Col}">

            <Label Content="Name" Style="{StaticResource FormLabel}"></Label>
            <Border Style="{StaticResource FormInputBorder}">
                <TextBox x:Name="Name" Style="{StaticResource FormControl}"></TextBox>
            </Border>
            <TextBlock Text="NameError" Style="{StaticResource HasError}"></TextBlock>

        </StackPanel>

        <StackPanel Grid.Column="1" Style="{StaticResource Col}">
            <Label Content="Phone Number" Style="{StaticResource FormLabel}"></Label>
            <TextBox x:Name="Phone" Style="{StaticResource FormControl}"></TextBox>
            <TextBlock Text="PhoneError" Style="{StaticResource HasError}"></TextBlock>
        </StackPanel>

    </Grid>
</StackPanel>

However I am the following errors

'#333333' is not a valid value for the 'System.Windows.Controls.Border.BorderBrush' property on a Setter. 
'#333333' is not a valid value for the 'System.Windows.Documents.TextElement.Foreground' property on a Setter. 
'#dc3545' is not a valid value for the 'System.Windows.Documents.TextElement.Foreground' property on a Setter.

How can I use my global color to change the font color of a TextBlock and TextBox? Also, how can I change the border color around my TextBox using the defined fonts?

Answer 1

You can't use String as the data type, because the target is a Brush :

<SolidColorBrush x:Key="TextRegular" Color="#333333" />
<SolidColorBrush x:Key="TextDanger" Color="#dc3545" />
<SolidColorBrush x:Key="TextInput" Color="#495057" />
<SolidColorBrush x:Key="InputBorder" Color="#80bdff" />

This is because XAML has built-in converter from XML attribute to SolidColorBrush during the parsing phase of XAML file (and if you check out the auto-generated xaml.g.cs files in the obj folder of your project you can confirm that is the case), but only directly when set to a property of type Brush .

In this case you are creating resources, which have to match the type required. Hence you were actually setting a string to a Brush and that is not possible, because the resource is evaluated and assigned at runtime and there is no conversion going on during the parsing of XAML (the compiler "can't know" what is the type of the resource until runtime, because you can modify resources anytime, so this is the best it can do).