Sección dedicada a WinFX, .NET Framework 3.0, XAML, Expression Interactive Designer (Windows Presentation Foundation) WinFX (.NET Framework 3.0)

Transparencias (opacidad)

Publicado el 23/Nov/2006
Actualizado el 23/Nov/2006
Autor: Guillermo 'guille' Som

Este ejemplo es muy simple, y lo he hecho para probar las transparencias en los elementos contenidos en una aplicación usando Windows Presentation Foundation (WPF).

 

Introducción:

Este ejemplo es muy simple, y lo he hecho para probar las transparencias en los elementos contenidos en una aplicación usando Windows Presentation Foundation (WPF).

El hacer estas pruebas ha sido para ver si a diferencia de los formularios de Windows "normales", bueno, a los que estamos acostumbrados, ya que, con la salida de Windows Vista, esto que te comento ya no es "normal"... porque, al menos si tenemos activado Aero, el propio Windows Vista se encarga de ciertas transparencias, por ejemplo, si te fijas en la figura 1, verás que la barra de título de la aplicación es transparente, lo mismo que los bordes de la ventana, pero eso es algo que el propio sistema operativo hace, y no es lo que te voy a explicar, je, je. Por otro lado, si miras la figura 2, verás que es una ventana "normal" de Windows XP, y ahí no hay más transparencias que las que yo te voy a explicar.

 

Figura 1. El programa funcionando en Windows Vista con Aero

Figura 1. El programa funcionando en Windows Vista con Aero

 

Figura 2. El programa funcionando en Windows XP (con temas)

Figura 2. El programa funcionando en Windows XP (con temas)

 

Lo que yo te voy a explicar es más simple, ya que se trata de hacer transparente ciertas partes (o elementos) de una aplicación creada con Windows Presentation Foundation (WinFX para los carrozas como yo, aunque para otros "dinosaurios" es Avalon, je, je).

Como te decía antes (o al menos intentaba decirte, pero como siempre me lío con otras cosas, pues pasa lo que pasa) y es que en una aplicación creada con Visual Studio y que trabaje en un equipo tipo Windows 2000 o Windows XP, podemos hacer que el formulario sea transparente. El problema es que si lo hacemos transparente, todo lo que contenga también será transparente.

Por ejemplo, en la figura 3, tenemos una ventana transparente (a un 75% de opacidad), que se consigue simplemente indicando el porcentaje de opacidad que queremos, en este ejemplo, es del 75%.
El problema es que todo lo que esté en ese formulario también tendrá ese valor de transparencia u opacidad. Por ejemplo, si te fijas en las letras e incluso en el botón de Aceptar, verás que también son transparentes, y al mismo porcentaje que el formulario.

 

Figura 3. Un formulario transparente

Figura 3. Un formulario transparente al 75%

 

Y es que en los controles de Windows.Forms, solo en los formularios podemos cambiar ese nivel de transparencia/opacidad.

Nota:
En los formularios de Windows.Forms, la transparencia se mide en porcentajes que va desde 100 (totalmente opaco) hasta 0 (totalmente transparente), mientras que en WPF se mide desde 1 a 0 y los valores se indican con decimales, por ejemplo, un 50% de opacidad se indicará con 0.5

Pero con los controles de WPF, puedes asignar un valor a la propiedad Opacity (que es la misma que en los formularios de Windows.Forms) a cualquier control o cualquier elemento "gráfico" que tengas.
En las figuras 1 y 2, puedes ver que de los tres textos que hay, dos de ellos tienen diferentes niveles de opacidad. En este caso es algo bien sencillo y nada espectacular, para que nos vamos a engañar, pero cualquier "imaginativo diseñador gráfico" (algo que el Guille no es, je, je), seguro que puede sacarle mayor rendimiento a esto de las transparencias... y del resto de "monerías" que nos permite hacer Windows Presentation Foundation (WPF).

No me voy a enrollar más, y te voy a mostrar el código, que en este caso, como solo es para ver el efecto de las transparencias solo está el de XAML, ya que este ejemplo no hace nada de nada, por tanto no necesita código en ningún lenguaje.

Y de ese código, decirte que lo que realmente está relacionado con esto que te comento de las transparencias es la parte del código que define los dos TextBlock y el Label. El primer bloque de textos, el que muestra Hola, está con opacidad 1, es decir, no es transparente. EL segundo bloque, el de la palabra Mundo, está al 60% (0.6) de opacidad y la etiqueta al 30% (0.3).
Como puedes ver en la figura 2, el primer texto cubre completamente la figura que hay debajo, mientras que los otros dos textos dejan ver lo que hay detrás.

 

Pues nada, que lo transparentices bien... ;-)))

 

Nos vemos.
Guillermo

 


Código XamlEl código Xaml

<Window x:Class="Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="transparenciaVB" Height="316" Width="409">
    <Grid Background="White">
      <Grid.Resources>
        <Style TargetType="{x:Type TextBlock}">
          <Setter Property="Foreground" Value="FireBrick" />
          <Setter Property="HorizontalAlignment" Value="Center" />
        </Style>
      </Grid.Resources>
      <Canvas Canvas.Left="200">
        <Path Fill="Khaki" Stroke="Green">
          <Path.Data>
            <GeometryGroup>
              <EllipseGeometry Center="40, 40" RadiusX="15" RadiusY="30" />
              <EllipseGeometry Center="40, 40" RadiusX="30" RadiusY="15" />
            </GeometryGroup>
          </Path.Data>
        </Path>

        <Path Fill="Gold" Stroke="Red">
          <Path.Data>
            <GeometryGroup>
              <EllipseGeometry Center="200, 130" RadiusX="90" RadiusY="120" />
              <EllipseGeometry Center="200, 130" RadiusX="180" RadiusY="40" />
            </GeometryGroup>
          </Path.Data>
        </Path>
        <StackPanel Margin="8,0,8,8">
          <TextBlock Opacity="1.0" Text="Hola" FontFamily="Verdana" 
			FontSize="90" FontWeight="Bold" />
            <TextBlock Opacity="0.60" Text="Mundo" FontFamily="Verdana" 
			FontSize="80" FontWeight="Bold" />
          <Label x:Name="Label1" Foreground="Firebrick" Opacity="0.30" 
			FontFamily="Verdana" FontSize="50" FontWeight="Bold" >
            Transparente
          </Label>
        </StackPanel>
      </Canvas>
    </Grid>
</Window>

 



Ir al índice principal de el Guille