WPF: Is there a reliable way to port argb values of Brushes to rgba color values of web browsers?

Viewed 54

Lately I found out that it seems to matter a lot where "Opacity" is set in WPF:

Option 1: By setting Brush Color with #ARGB

Option 2: By setting Opacity as Property of Brush

Option 3: By setting Opacity directly on the Control

Screenshot of results:

Different ways to produce opacity

While options 1 & 2 appear to produce the same results, option 3 seems to be similar to what web browsers produce.

Now my question is, can opacity values set on brushes (WPF) somehow be converted to opacity values of "color" in web browsers? Because setting a control´s opacity seems not the best way to go for "coloring" layout elements.

Here´s the XAML layout which produces the output as described & shown above:

<Window x:Class="Color_Test.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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:Color_Test"
    mc:Ignorable="d"
    Title="MainWindow" Height="450" Width="800">
<Window.Resources>
    <ResourceDictionary>
        <SolidColorBrush x:Key="Brush_Test_Bg" Color="#25252B" />
        <SolidColorBrush x:Key="Brush_Test_Fg_OpacityByArgb" Color="#5cffffff" />
        <SolidColorBrush x:Key="Brush_Test_Fg_OpacityByPropertyOnBrush" Color="#ffffff" Opacity=".36"/>
        <SolidColorBrush x:Key="Brush_Test_Fg_OpacityByPropertyOnControl" Color="#ffffff"/>
    </ResourceDictionary>
</Window.Resources>
<Grid Background="{StaticResource Brush_Test_Bg}">
    <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
        <TextBlock Text="1: Opacity by Brush Color='#5cffffff'" FontSize="24" FontWeight="Bold" Foreground="{StaticResource Brush_Test_Fg_OpacityByArgb}" />
        <TextBlock Text="2: Opacity by Brush Color='#ffffff' and Brush Opacity='.36'" FontSize="24" FontWeight="Bold" Foreground="{StaticResource Brush_Test_Fg_OpacityByPropertyOnBrush}" />
        <TextBlock Text="3: Opacity by Brush Color='#ffffff' and TextBlock Opacity='.36'" FontSize="24" FontWeight="Bold" Foreground="{StaticResource Brush_Test_Fg_OpacityByPropertyOnControl}" Opacity=".36" />
    </StackPanel>
</Grid>

Also, here´s a Codepen-Link to the web-output for comparison.

For completion: I tried TextOptions.TextFormattingMode="Display" inside the wpf layout which produces only different (uncontrollable) results.

0 Answers
Related