WPF support true transparency. This means that if several other shapes or elements stacked on a property or element, and all these elements have different shapes and transparency, you will see the desired effect. Background image can be created through the above elements can be seen through this feature, this is the simplest case. The most complex case is that, use this feature to create multi-layered animations and other effects for other frameworks, this is difficult to achieve.
First, the use of translucent elements
Here are several ways that the translucent element has:
- Set the Opacity property element . Each element (including shape) Opacity property is inherited from the base class UIElement. Opacity (the Opacity) is a fraction between 0 and 1, 1 represents a fully opaque (the default), 0 is fully transparent. For example, the opacity of 0.9 would create 90% of the visible effect (10 clear) is. When using this method to set the opacity settings can be applied to the entire contents of the visible elements.
- Set the brush Opacity property . Each brush Opacity property also inherits from Brush base class. May use a value between 0 and 1 set this property, use of a brush control content transparency drawn - either fixed color brush, gradient brush, as well as some type of image texture or brush. Because Stroke Fill property visible shape and use different brushes. It may be provided for varying degrees of transparency and a border surface region.
- Alpha worth using a transparent color . All alpha value of less than 255 colors are translucent. For example, a translucent color in SolidColorBrush brush, and the brush used to draw the background and foreground content element surface. In some cases, the use of a semitransparent color set performs better than the Opacity property.
The following figure shows an example having a plurality of translucent layers.
- The window of an opaque white background.
- StackPanel top panel contains all the elements, and the use of applied ImageBrush picture of the object. Reducing the Opacity property values brush, the color fades to white background can be seen through the window background.
- The first button translucent red background (WPF to create SolidColorBrush brush to draw the color in the background). Background image permeable buttons displayed, but the text is opaque.
- Use the label under the first button and proceed as normal. By default, all tags are fully transparent background color.
- Text box opaque text and borders, but the use of semi-transparent background color.
- Another panel StackPanel text box using the brush TileBrush created smiley face. TileBrush brush Opacity property is lowered, so that the background may be displayed through the other panel. For example, the sun can be seen at the bottom right of the window.
- In a third panel StackPanel TextBlock object, the background is completely transparent TextBlock object (the default setting) and having a translucent white text. If you look closely, you will find two background can show through some of the letters.
Following is the content in XAML:
<Window x:Class="Drawing.Transparency" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Background="White" Title="Transparency" Height="385" Width="450"> <StackPanel Margin="5"> <StackPanel.Background> <ImageBrush ImageSource="celestial.jpg" Opacity="0.7"/> </StackPanel.Background> <Button Foreground="White" FontSize="16" Margin="10" BorderBrush="White" Background="#60AA4030" Padding="20">A Semi-Transparent Button</Button> <Label Margin="10" FontSize="18" FontWeight="Bold" Foreground="White">Some Label Text</Label> <TextBox Margin="10" Background="#AAAAAAAA" Foreground="White" BorderBrush="White">A semi-transparent text box</TextBox> <Button Margin="10" Padding="25" BorderBrush="White" > <Button.Background> <ImageBrush ImageSource="happyface.jpg" Opacity="0.6" TileMode="Tile" Viewport="0,0,0.1,0.4"/> </Button.Background> <StackPanel> <TextBlock Foreground="#75FFFFFF" TextAlignment="Center" FontSize="30" FontWeight="Bold" TextWrapping="Wrap" >Semi-Transparent Layers</TextBlock> </StackPanel> </Button> </StackPanel> </Window>
Transparency is one of the more popular features of WPF. In fact, very easy to use and transparent characteristics of the work is very good, some are too many to be all for WPF user interface. So do not over-use doctrine transparent properties.
Second, the transparency mask
Opacity property using elements of all content is partially transparent. OpacityMask property provides greater flexibility. Element may be used a transparent or partially transparent specific area, thereby realizing various common and novel effects. For example, a shape OpacityMask property to fade away completely transparent.
OpacityMask property accepts any brush. Brush alpha generally determines what is transparent. For example, if a non-transparent SolidColorBrush brush set color element will remain fully visible. Other details colors (red, green, and blue components) is not important when setting OpacityMask property ignores them.
It does not make sense to use SolidColorBrush brush settings OpacityMask property, as can more easily achieve the same effect using the Opacity property. However, when a more specific brush type, e.g. RadialGradientBrush The LinearGradient or brush, the OpacityMask property becomes more useful. The use of a solid color gradients converted to the transparent color, the element can be created on the entire surface of the transparent fading effect. For example, the following buttons on the use of this effect:
<Window x:Class="Drawing.OpacityMask" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="OpacityMask" Height="300" Width="300"> <Window.Background> <ImageBrush ImageSource="grandpiano.jpg"></ImageBrush> </Window.Background> <Grid Margin="10,50"> <Button Background="Purple" FontSize="14" FontWeight="Bold"> <Button.OpacityMask> <LinearGradientBrush StartPoint="0,0" EndPoint="1,0"> <GradientStop Offset="0" Color="Black"></GradientStop> <GradientStop Offset="1" Color="Transparent"></GradientStop> </LinearGradientBrush> </Button.OpacityMask> <Button.Content>A Partially Transparent Button</Button.Content> </Button> </Grid> </Window>
The following figure shows the button on a window, the window also shows a rare piano picture.
OpacityMask property and use the brush VisualBrush to create reflection effects can be combined. For example, the following tags to create one of the most common WPF effect - with mirrored text in the text box. When entering text, VisualBrush brush will be reflected in the following text drawing. Use VisualBrush brush to draw a rectangle, the rectangle OpacityMask property reflection fading text, text reflected real distinction elements above apart:
<Window x:Class="Drawing.Reflection" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Reflection" Height="208.8" Width="491.2" Background="LightSteelBlue" > <Grid Margin="10" Grid.IsSharedSizeScope="True" VerticalAlignment="Center"> <Grid.RowDefinitions> <RowDefinition Height="Auto" SharedSizeGroup="Row"></RowDefinition> <RowDefinition SharedSizeGroup="Row"></RowDefinition> </Grid.RowDefinitions> <TextBox Name="txt" FontSize="30">Here is some reflected text</TextBox> <Rectangle Grid.Row="1" RenderTransformOrigin="1,0.5"> <Rectangle.Fill> <VisualBrush Visual="{Binding ElementName=txt}"></VisualBrush> </Rectangle.Fill> <Rectangle.OpacityMask> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Offset="0.3" Color="Transparent"></GradientStop> <GradientStop Offset="1" Color="#44000000"></GradientStop> </LinearGradientBrush> </Rectangle.OpacityMask> <Rectangle.RenderTransform> <ScaleTransform ScaleY="-1"></ScaleTransform> </Rectangle.RenderTransform> </Rectangle> </Grid> </Window>
This example uses LinearGradientBrush brush between completely transparent and translucent colors color gradient, a reflection is much more flat. This embodiment also uses a rectangular RenderTransform inverted, upside down content is reflective. Since this conversion, the gradual transition point (gradient Stops) have oppositely disposed. The following figure shows the final results:
