Shimmer
Text with a highlight sweeping across it.
ExampleInteractive
<uikit:ShimmerText Text="Thinking about it…" />Usage
uikit:ShimmerText shows its Text with a highlight sweeping across it. The glyphs are painted again twelve times, each clipped to a narrower band around the sweep's center, in a color mixed from the text color toward the theme's background (the foreground on a dark theme). The text's size and color are the app's: set FontSize and Foreground as on a TextBlock. Each instance runs its own clock.
| Property | Meaning |
|---|---|
Text | The text. |
Duration | One sweep; 2 seconds by default. |
Repeats | Whether the sweep repeats (the default) or runs once. |
IsReversed | Sweeps from the end to the start. |
Spread | Half the band's width as a share of the text's width; 0.3 by default. |
HighlightColor | The highlight's color; computed from the text color when unset. |
Examples
The default sweep, a muted text, a reversed sweep, a 14px text, and a faster and wider band.
<StackPanel Spacing="8" HorizontalAlignment="Left">
<uikit:ShimmerText Text="Thinking about it…" />
<uikit:ShimmerText Text="Searching the web…" Foreground="{DynamicResource UIKit.MutedForeground}" />
<uikit:ShimmerText Text="Sweeping from the end…" IsReversed="True" />
<uikit:ShimmerText Text="Generating a response…" FontSize="14" TextBlock.LineHeight="22.5" />
<uikit:ShimmerText Text="A faster, wider sweep…" Duration="0:0:1" Spread="0.5" />
</StackPanel>Not covered
- Synchronizing the sweep of several texts on one clock.
- An absolute band width.