Two TextBlocks with same Color (Opacity) and diffrent Fontsizes appear diffrently

Question

I have two TextBlocks with the same Foreground but it is displayed diffrently. The diffrence between the TextBlocks is the FontSize. While zooming In/Out the Coloring changes also.

First Image

Second Image

Third Image

Fourth Image

By Setting <Setter Property="TextOptions.TextFormattingMode" Value="Display" /> it works, but then the displayed Text within a ViewBox is blurred. The TextFormattingMode "Display" can't be used within a ViewBox, see here.

Why is it like this? Why are the Colors diffrent by Default? Any solution for this?

<Window x:Class="ColoringWithOpacity.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:ColoringWithOpacity"
    mc:Ignorable="d"
    Title="MainWindow" Height="450" Width="800"
    Background="Black">
<Window.Resources>
<Style TargetType="{x:Type TextBlock}">
  <Setter Property="FontFamily" Value="Segoe UI"/>
  <Setter Property="FontWeight" Value="Semibold"/>
</Style>

<Style TargetType="{x:Type Run}">
  <Setter Property="FontFamily" Value="Segoe UI"/>
  <Setter Property="FontWeight" Value="Semibold"/>
</Style>

<SolidColorBrush x:Key="W25" Opacity="0.25" Color="#FFFFFF"/>
</Window.Resources>
 <UniformGrid Columns="1">

<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="*" />
    <RowDefinition Height="*" />
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*"></ColumnDefinition>
    <ColumnDefinition Width="*"></ColumnDefinition>
  </Grid.ColumnDefinitions>

  <Viewbox Grid.RowSpan="2">

    <TextBlock Foreground="{StaticResource W25}" Text="13.55" >
      <!--<Run Text="13.55"/>-->  <!--Works the same-->
    </TextBlock>
  </Viewbox>
  <Viewbox Grid.Row="2" Grid.Column="2">

    <TextBlock Foreground="{StaticResource W25}" Text="mm" >
      <!--<Run Text="mm"/>--> <!--Works the same-->
    </TextBlock>
  </Viewbox>
</Grid>
<Viewbox>
  <TextBlock Foreground="{StaticResource W25}">
    <Run Text="13.55" FontSize="64"/>
    <Run Text="mm" FontSize="40"/>
  </TextBlock>
</Viewbox>

Answer 1

I have had the same issue when I was working with WPF application. I couldn't figure why Opacity on SolidColorBrush is not working, but solution was to move opacity on UI element as opposed to SolidColorBrush.

<Window x:Class="WpfApp1.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:WpfApp1"
        mc:Ignorable="d"  Background="Black"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <Style TargetType="{x:Type TextBlock}">
            <Setter Property="FontFamily" Value="Segoe UI"/>
            <Setter Property="FontWeight" Value="Semibold"/>
            <Setter Property="Opacity" Value="0.25"/>
        </Style>

        <Style TargetType="{x:Type Run}">
            <Setter Property="FontFamily" Value="Segoe UI"/>
            <Setter Property="FontWeight" Value="Semibold"/>
        </Style>

        <SolidColorBrush x:Key="W25" Color="#FFFFFF" />
    </Window.Resources>
    <UniformGrid Columns="1">

        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>
            </Grid.ColumnDefinitions>

            <Viewbox Grid.RowSpan="2">
                <TextBlock Foreground="{StaticResource W25}" Text="13.55" >
                 <!--<Run Text="13.55"/>-->  <!--Works the same-->
                </TextBlock>
            </Viewbox>
            <Viewbox Grid.Row="2" Grid.Column="2">
                <TextBlock Foreground="{StaticResource W25}" Text="mm" >
                <!--<Run Text="mm"/>--> <!--Works the same-->
                </TextBlock>
            </Viewbox>
        </Grid>
        <Viewbox>
            <TextBlock Foreground="{StaticResource W25}">
                <Run Text="13.55" FontSize="64"/>
                <Run Text="mm" FontSize="40"/>
            </TextBlock>
        </Viewbox>
    </UniformGrid>
</Window>