Question

I’m trying to come up with a creative solution to give this particular effect:

My initial idea: A dynamically sized rectangle with a chroma key shader effect will slide into place over the text. However, I do not want to kill the fidelity of the text edges which tends to happen with shaders.

I also considered using the FormattedText class, though I’m not sure it supports what I’m trying to do.

Any suggestions?

EDIT
To clarify, the text will be essentially a ‘TabItem’. I would like the highlighted block to float across all tab items to the selected item. They are currently laid out in a Canvas with logic handling their positioning. A simple animation would not suffice it would seem.

Answer 1

This should give you the effect you want. This uses a gradient brush for the color, but it uses 3 gradient stops to make sure that the color changes immediately from one to the next with no gradient in between.

<Window
    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:TestingWPF"
    mc:Ignorable="d"
    x:Class="TestingWPF.TestWindow"
    d:DesignWidth="477" d:DesignHeight="214"
    Background="Black">

    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="74" FontWeight="Bold">
        <TextBlock.Foreground>
            <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                <GradientStop Color="White" Offset="0"/>
                <GradientStop x:Name="WhiteOffset" Color="White" Offset="1"/>
                <GradientStop x:Name="GrayOffset" Color="Gray" Offset="1"/>
            </LinearGradientBrush>
        </TextBlock.Foreground>
        <TextBlock.Triggers>
            <EventTrigger RoutedEvent="Loaded">
                <BeginStoryboard>
                    <Storyboard Storyboard.TargetProperty="Offset" Duration="0:0:1" RepeatBehavior="Forever">
                        <DoubleAnimation Storyboard.TargetName="WhiteOffset" From="0" To="1" />
                        <DoubleAnimation Storyboard.TargetName="GrayOffset" From="0" To="1" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </TextBlock.Triggers>
        Some Text
    </TextBlock>
</Window>