#938 – Changing the Selected Text Color in a TextBox

You can change the color of the brush that is used to show selected text in a TextBox by setting the SelectionBrush property.  You’ll typically set this property in XAML to the name of the color that you want the text selection rendered in.  This property defaults to a SolidColorBrush whose color is hex 3399FF (R=51, G=153, B=255), or light blue.

        <TextBox Name="txtTest" Margin="5" Height="100"
            Text="{Binding SomeText}"
            TextWrapping="Wrap"
            SelectionBrush="Purple"
            VerticalScrollBarVisibility="Auto"/>

938-001
The opacity used by the selection brush defaults to 0.4, but you can set it to be more (>0.4) or less (<0.4) opaque by changing the SelectionOpacity property.

        <TextBox Name="txtTest" Margin="5" Height="100"
            Text="{Binding SomeText}"
            TextWrapping="Wrap"
            SelectionBrush="Purple"
            SelectionOpacity="0.2"
            VerticalScrollBarVisibility="Auto"/>

938-002

Advertisements

#555 – Creating a Radial Opacity Mask

You can define an opacity mask on a user interface element to cause the opacity to change across the element, depending on the mask.  The opacity mask is a brush, where the alpha channel at each point in the brush is used to define the opacity at each point on the element.

You will typically use either a linear or a radial gradient for an opacity mask, since a gradient brush allows you to create a range of alpha values across the brush.

You can use a radial gradient brush as the opacity mask to fade out the edges of a user interface element.  To start with, select a gradient brush for the OpacityMask property.

Change the gradient to be a radial gradient.

Select the outer gradient stop and set its alpha value to be transparent.

Finally, adjust the gradient stops to get the effect that you want.

#553 – Setting an Alpha Value in Blend

Colors in WPF consist of 8 bytes–2 bytes each for the alpha, red, green and blue channels.  The alpha channel dictates the transparency/opacity of a color (255 or #FF = fully opaque, 0 = fully transparent).

You can set the alpha value for a color in the color editor in Blend by setting the value of the field labeled A (0-100%) or by explicitly setting the first two bytes of the hex value for the color (#00-#FF).

In the example below, the Alpha value is at 100%, or #FF, indicating that the color is fully opaque.

If you set the Alpha value to 50%, you’ll see that the first two bytes in the color value are now #7F (127).

In the example below, we’ve set the the Foreground color of the label to Black, with an alpha value of 50% so that we can see through the label to the GUI behind it.

#284 – Making an Image Translucent Using the Opacity Property

Since the Image control inherits (indirectly) from UIElement, it has an Opacity property.  The Opacity property allows content behind the image to show through the image.  Its value ranges from 0.0 to 1.0, with 0.0 indicating that the image is fully transparent (doesn’t appear at all) and 1.0 indicating that the image is fully opaque (nothing shows through).

In the example below, we bind a Slider‘s Value property to the Opacity of an Image, so that we can easily change the opacity.  We also set the window background to a gradient fill.

When the Opacity is 1.0, the image is fully opaque and the gradient doesn’t show through the image at all.

When Opacity is 0.0, the image is transparent and we just see the gradient.

When the Opacity is between 0.0 and 1.0 (e.g. 0.2), the image is translucent and the background gradient shows through.