Change the color of the text in textbox according to the result value in XAML

Question

I made a calculator where if the result is a negative value, it will print the result in red, and if the positive value is in blue.

I made this text color change in C#.

Result:

It's XAML code:

    <Label Content="cislo 1" HorizontalAlignment="Left" Margin="29,88,0,0" VerticalAlignment="Top"/>
    <Label Content="cislo 2" HorizontalAlignment="Left" Margin="29,140,0,0" VerticalAlignment="Top"/>
    <Label Content="vysledok" HorizontalAlignment="Left" Margin="20,188,0,0" VerticalAlignment="Top" Width="61" RenderTransformOrigin="-6.769,4.229"/>
    <Label Content="" HorizontalAlignment="Left" Margin="503,114,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.654,-1.05"/>
    <Button x:Name="button" Content="+" HorizontalAlignment="Left" Margin="80,285,0,0" VerticalAlignment="Top" Height="26" Width="74" Click="Button_Click"/>
    <Button Content="-" HorizontalAlignment="Left" Margin="253,285,0,0" VerticalAlignment="Top" Height="26" Width="74" Click="Button_Click_2"/>
    <Button Content="/" HorizontalAlignment="Left" Margin="400,285,0,0" VerticalAlignment="Top" Height="26" Width="74" Click="Button_Click_3"/>
    <Button Content="*" HorizontalAlignment="Left" Margin="561,285,0,0" VerticalAlignment="Top" Height="26" Width="67" Click="Button_Click_4"/>

</Grid>

It's C# code. Function is calculation for minus.

private void Button_Click_2(object sender, RoutedEventArgs e)
{
    decimal txt1 = Convert.ToDecimal(textbox1.Text);
    decimal txt2 = Convert.ToDecimal(textbox2.Text);
    decimal sum = Math.Round(txt1 - txt2, 3);
    if (sum < 0)
    {
        textbox3.Foreground = Brushes.Red;
    }
    else if(sum>0)
    {
        textbox3.Foreground = Brushes.Blue;
    }
    else if (sum == 0)
    {
        textbox3.Foreground = Brushes.Black; 
    }

    textbox3.Text = sum.ToString();
}

Is it possible to rewrite this condition from C # to Xaml?

Answer 1

In XAML there is no built-in way to express conditions like less than or greater than. For such comparisons, you can resort to a custom value converter like this.

public class SignToBrushConverter : IValueConverter
{
   public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
   {
      if (!(value is string text) || !decimal.TryParse(text, out var number) || number == decimal.Zero)
         return Brushes.Black;

      return number < 0 ? Brushes.Red : Brushes.Blue;
   }

   public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
   {
      throw new InvalidOperationException();
   }
}

Add an instance to the window resources or any resources in scope.

<Window.Resources>
   <local:SignToBrushConverter x:Key="SignToBrushConverter"/>
</Window.Resources>

Bind the Foreground to the Text property using the converter.

<TextBox Foreground="{Binding Text, RelativeSource={RelativeSource Self}, Converter={StaticResource SignToBrushConverter}}"/>