Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

WPF Rendered Color inconsistency with Opacity on Brush and Control Elements

Considering the following xaml.

<Window x:Class="PlayTabControl.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <ResourceDictionary>
            <Color x:Key="HintColor" A="255" R="0" G="0" B="0"></Color>
            <SolidColorBrush x:Key="HintColorBrush" Color="{DynamicResource HintColor}" Opacity="0.26"/>
        </ResourceDictionary>
    </Window.Resources>
    <StackPanel Background="White">
        <TextBlock FontSize="28" FontWeight="ExtraBlack"
                    Text="Hello World, #42000000" 
                    Foreground="#42000000"
                    HorizontalAlignment="Center"/>
        <TextBlock FontSize="28" FontWeight="ExtraBlack"
                    Foreground="{StaticResource HintColorBrush}"
                    Text="Hello World, HintColorBrush @ 0.26" 
                    HorizontalAlignment="Center"/>
        <TextBlock FontSize="28" FontWeight="ExtraBlack"
                Text="Hello World, #68000000" 
                Foreground="#68000000"
                HorizontalAlignment="Center"/>
        <TextBlock FontSize="28" FontWeight="ExtraBlack"
                    Foreground="Black"
                    Opacity="0.26"
                    Text="Hello World, Black [email protected]" 
                    HorizontalAlignment="Center"/>
        <TextBlock FontSize="28" FontWeight="ExtraBlack"
                    Foreground="#FFbdbdbd"
                    Text="Hello World, #FFbdbdbd" 
                    HorizontalAlignment="Center"/>        
    </StackPanel>
</Window>

It produces the following result:

enter image description here

The observation to take from this is that Line1 and Line2 are of different colour. Line 3 is visually correct but numerically incorrect in terms of its colour input. Here is what is done to each line of Textblock.

  1. Hard code Foreground colour of #42000000. This is approximately 26% opacity. Result: Incorrect
  2. Brush resource of opacity of 0.26 with the color set to Black effectively. Result: Incorrect
  3. The corrected numeric to produce the same perceived output. Which is in theory 40.6% opacity.
  4. Using the Textblock's Opacity 0.26. Result: Correct
  5. Hard coded colour of #FFbdbdbd, no transparency involved. Result: Correct

My question is: What/Why is wpf rendering this differently? This makes it difficult to reliably do colour styling when transparency is concern from a designer's sample/screenshot.

Note that out of curiosity, I have done this on a Windows store app as well. And the result is what I would expect, all the colours are the same except Line3 which will now be darker as it is more opaque.

like image 912
Jordan Avatar asked Dec 14 '25 23:12

Jordan


1 Answers

If anyone has stumbled into this issue as well, it seems that setting TextOptions.TextFormattingMode to Display seems to fix the issue (you can set this at Window level so it affects all content). This does change the text rendering layout a bit though, so take that into consideration. See this for a bit more info on what's the difference.

like image 75
Germán Enríquez Avatar answered Dec 16 '25 15:12

Germán Enríquez



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!