WPF Brushes and Text


This entry is part 5 of 5 in the series WPF Brushes

Microsoft says: “You can also use brushes to apply rendering characteristics to text elements. For example, the Foreground property of TextBlock takes a Brush. You can apply any of the brushes described here to text. But be careful with brushes applied to text, because it’s possible to make the text unreadable if you use brushes that bleed into whatever background the text is rendered on top of, or that distract from the outlines of text characters. Use SolidColorBrush for readability of text elements in most cases, unless you want the text element to be mostly decorative. Even when you use a solid color, make sure that the text color you choose has enough contrast against the background color of the text’s layout container. The level of contrast between text foreground and text container background is an accessibility consideration.”

Below is a bit of XAML code using the Foreground and Background properties of the TextBlock.

<Window x:Class="BrushesAndText.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:BrushesAndText"
        mc:Ignorable="d"
        Title="BrushesAndText" Height="150" Width="300">
    <StackPanel Margin="10">
        <TextBlock>Hello</TextBlock>
        <TextBlock Foreground="Red">this is Red foreground</TextBlock>
        <TextBlock Foreground="Blue">this is Blue</TextBlock>
        <TextBlock Foreground="Blue" Background="Wheat">this is Blue</TextBlock>
    </StackPanel>
</Window>

Below is more interesting example.

<Window x:Class="BrushesAndText.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:BrushesAndText"
        mc:Ignorable="d"
        WindowStartupLocation="CenterScreen"
        Title="BrushesAndText" Height="150" Width="300">
    <StackPanel Margin="10">
        <TextBlock Text="Hello">
            <TextBlock.Background>
                <LinearGradientBrush>
                    <GradientStop Color="Yellow" Offset="0.0"/>
                    <GradientStop Color="Red" Offset="0.25"/>
                    <GradientStop Color="Blue" Offset="0.75"/>
                    <GradientStop Color="LimeGreen" Offset="1.0"/>
                </LinearGradientBrush>
            </TextBlock.Background>
            </TextBlock>
        <TextBlock Foreground="Red">this is Red foreground</TextBlock>
        <TextBlock Text="this text is multi-colored!">
            <TextBlock.Foreground>
                <LinearGradientBrush>
                    <GradientStop Color="Yellow" Offset="0.0"/>
                    <GradientStop Color="Red" Offset="0.25"/>
                    <GradientStop Color="Blue" Offset="0.75"/>
                    <GradientStop Color="LimeGreen" Offset="1.0"/>
                </LinearGradientBrush>
            </TextBlock.Foreground>
        </TextBlock>
        <TextBlock Foreground="Blue" Background="Wheat">this is Blue</TextBlock>
    </StackPanel>
</Window>
Series Navigation<< WPF Image Brushes