Pintar con imágenes, dibujos y elementos visuales

Artículo
08/10/2011

En este tema se describe cómo utilizar objetos ImageBrush, DrawingBrushy VisualBrush para pintar una área con una imagen o con un objeto Drawing o Visual.

Este tema contiene las secciones siguientes.

Requisitos previos
Pintar un área con una imagen
Ejemplo: Pintar un objeto con una imagen de mapa de bits
Pintar un área con un dibujo
Ejemplo: Pintar un objeto con un dibujo
Pintar una área con un objeto visual
Ejemplo: Pintar un objeto con un objeto visual
Ejemplo: Crear una reflexión
Características de TileBrush
Temas relacionados

Requisitos previos

Para entender este tema, debe estar familiarizado con los diferentes tipos de pinceles que Windows Presentation Foundation (WPF) proporciona y sus características básicas. Para obtener una introducción, consulte Información general sobre pinceles de WPF.

Pintar un área con una imagen

Un ImageBrush pinta una área con un objeto ImageSource. El tipo más común de ImageSource para su uso con ImageBrush es BitmapImage, que describe un gráfico de mapa de bits. Puede utilizar un objeto DrawingImage para pintar mediante un objeto Drawing, pero es más fácil utilizar un objeto DrawingBrush en su lugar. Para obtener más información acerca de los objetos ImageSource, consulte Información general sobre imágenes.

Para pintar con ImageBrush, cree un objeto BitmapImage y utilícelo para cargar el contenido del mapa de bits. A continuación, utilice BitmapImage para establecer la propiedad ImageSource de ImageBrush. Por último, aplique ImageBrush al objeto que desea pintar. En Extensible Application Markup Language (XAML), también puede establecer simplemente la propiedad ImageSource de ImageBrush en la ruta de acceso de la imagen que desea cargar.

Al igual que todos los objetos Brush, ImageBrush se puede utilizar para pintar objetos como formas, paneles, controles y texto. En la ilustración siguiente se muestran algunos efectos que se pueden lograr con ImageBrush.

Objetos pintados con ImageBrush

Ejemplos de resultados de ImageBrush

De manera predeterminada, ImageBrush expande su imagen a fin de rellenar completamente el área pintada, con lo que es posible que se distorsione la imagen si el área pintada tiene una relación de aspecto diferente que la imagen. Puede cambiar este comportamiento modificando el valor predeterminado de la propiedad Stretch, Fill, por uno de estos valores: None, Uniform o UniformToFill. Dado que ImageBrush es un tipo de TileBrush, puede especificar con exactitud de qué modo el pincel de imagen rellenará el área de salida, e incluso crear tramas. Para obtener más información sobre características avanzadas de TileBrush, consulte Información general sobre objetos TileBrush.

Ejemplo: Pintar un objeto con una imagen de mapa de bits

En el ejemplo siguiente se usa un objeto ImageBrush para pintar la propiedad Background de un objeto Canvas.

<Page
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="Microsoft.Samples.BrushExamples.ImageBrushExample"
  WindowTitle="ImageBrush Example"
  Background="White">

  <StackPanel>

    <Canvas
      Height="200" Width="300">
      <Canvas.Background>
        <ImageBrush ImageSource="sampleImages\Waterlilies.jpg" />
      </Canvas.Background>
    </Canvas>


  </StackPanel>
</Page>


Imports Microsoft.VisualBasic
Imports System
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Media
Imports System.Windows.Media.Imaging

Namespace Microsoft.Samples.BrushExamples

    Public Class ImageBrushExample
        Inherits Page

        Public Sub New()

            Dim mainPanel As New StackPanel()
            canvasBackgroundExample(mainPanel)
            Me.Content = mainPanel

        End Sub


        Private Sub canvasBackgroundExample(ByVal mainPanel As Panel)

            Dim theImage As New BitmapImage(New Uri("sampleImages\Waterlilies.jpg", UriKind.Relative))

            Dim myImageBrush As New ImageBrush(theImage)

            Dim myCanvas As New Canvas()
            myCanvas.Width = 300
            myCanvas.Height = 200
            myCanvas.Background = myImageBrush

            mainPanel.Children.Add(myCanvas)


        End Sub

    End Class

End Namespace

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Imaging;

namespace Microsoft.Samples.BrushExamples
{

    public class ImageBrushExample : Page
    {

        public ImageBrushExample()
        {

            StackPanel mainPanel = new StackPanel();
            canvasBackgroundExample(mainPanel);
            this.Content = mainPanel;

        }


        private void canvasBackgroundExample(Panel mainPanel)
        {

            BitmapImage theImage = new BitmapImage
                (new Uri("sampleImages\\Waterlilies.jpg", UriKind.Relative));

            ImageBrush myImageBrush = new ImageBrush(theImage);

            Canvas myCanvas = new Canvas();
            myCanvas.Width = 300;
            myCanvas.Height = 200;
            myCanvas.Background = myImageBrush;

            mainPanel.Children.Add(myCanvas);


        }

    }

}

Pintar un área con un dibujo

Un objeto DrawingBrush permite pintar una área con formas, texto, imágenes y vídeo. Las formas contenidas en un pincel de dibujo pueden pintarse a su vez con un color sólido, un degradado, una imagen o incluso un objeto DrawingBrush. En la siguiente ilustración se muestran algunos usos de DrawingBrush.

Objetos pintados mediante DrawingBrush

Ejemplos de resultados de DrawingBrush

Un objeto DrawingBrush pinta un área con un objeto Drawing. Un objeto de dibujo, o Drawing, describe el contenido visible, como una forma, un mapa de bits, vídeo o una línea de texto. Los diferentes tipos de dibujos describen tipos diferentes de contenido. A continuación, se muestra una lista de tipos diferentes de objetos de dibujo.

GeometryDrawing: dibuja una forma.
ImageDrawing: dibuja una imagen.
GlyphRunDrawing: dibuja texto.
VideoDrawing: reproduce un archivo de audio o vídeo.
DrawingGroup: dibuja otros dibujos. Utilice un grupo de dibujo para combinar otros dibujos en un único dibujo compuesto.

Para obtener más información acerca de los objetos Drawing, consulte Información general sobre objetos Drawing.

Al igual que un objeto ImageBrush, un objeto DrawingBrush expande su propiedad Drawing para rellenar su área de salida. Puede invalidar este comportamiento cambiando el valor predeterminado (Fill) de la propiedad Stretch. Para obtener más información, vea la propiedad Stretch.

Ejemplo: Pintar un objeto con un dibujo

En el ejemplo siguiente se muestra cómo pintar un objeto con un dibujo de tres elipses. GeometryDrawing se utiliza para describir las elipses.

<Button Content="A Button">
  <Button.Background>
    <DrawingBrush>
      <DrawingBrush.Drawing>
        <GeometryDrawing Brush="LightBlue">
          <GeometryDrawing.Geometry>
            <GeometryGroup>
              <EllipseGeometry RadiusX="12.5" RadiusY="25" Center="25,50" />
              <EllipseGeometry RadiusX="12.5" RadiusY="25" Center="50,50" />
              <EllipseGeometry RadiusX="12.5" RadiusY="25" Center="75,50" />
            </GeometryGroup>
          </GeometryDrawing.Geometry>
          <GeometryDrawing.Pen>
            <Pen Thickness="1" Brush="Gray" />
          </GeometryDrawing.Pen>
        </GeometryDrawing>
      </DrawingBrush.Drawing>
    </DrawingBrush>
  </Button.Background>
</Button>

            ' Create a DrawingBrush.
            Dim myDrawingBrush As New DrawingBrush()

            ' Create a drawing.
            Dim myGeometryDrawing As New GeometryDrawing()
            myGeometryDrawing.Brush = Brushes.LightBlue
            myGeometryDrawing.Pen = New Pen(Brushes.Gray, 1)
            Dim ellipses As New GeometryGroup()
            ellipses.Children.Add(New EllipseGeometry(New Point(25,50), 12.5, 25))
            ellipses.Children.Add(New EllipseGeometry(New Point(50,50), 12.5, 25))
            ellipses.Children.Add(New EllipseGeometry(New Point(75,50), 12.5, 25))

            myGeometryDrawing.Geometry = ellipses
            myDrawingBrush.Drawing = myGeometryDrawing

            Dim myButton As New Button()
            myButton.Content = "A Button"

            ' Use the DrawingBrush to paint the button's background.
            myButton.Background = myDrawingBrush

// Create a DrawingBrush.
DrawingBrush myDrawingBrush = new DrawingBrush();

// Create a drawing.
GeometryDrawing myGeometryDrawing = new GeometryDrawing();
myGeometryDrawing.Brush = Brushes.LightBlue;
myGeometryDrawing.Pen = new Pen(Brushes.Gray, 1);
GeometryGroup ellipses = new GeometryGroup();
ellipses.Children.Add(new EllipseGeometry(new Point(25,50), 12.5, 25));
ellipses.Children.Add(new EllipseGeometry(new Point(50,50), 12.5, 25));
ellipses.Children.Add(new EllipseGeometry(new Point(75,50), 12.5, 25));

myGeometryDrawing.Geometry = ellipses;
myDrawingBrush.Drawing = myGeometryDrawing;

Button myButton = new Button();
myButton.Content = "A Button";

// Use the DrawingBrush to paint the button's background.
myButton.Background = myDrawingBrush;

Pintar una área con un objeto visual

El más versátil y eficaz de todos los pinceles, VisualBrush, pinta una área con un objeto Visual. Un objeto Visual es un tipo de gráfico de bajo nivel que actúa como antecesor de muchos componentes gráficos útiles. Por ejemplo, las clases Window, FrameworkElement y Control son tipos de objetos Visual. Con VisualBrush, puede pintar áreas con casi cualquier objeto gráfico de Windows Presentation Foundation (WPF).

Nota
Aunque VisualBrush es un tipo del objeto Freezable, no se puede inmovilizar (establecer como de sólo lectura) cuando su propiedad Visual está establecida en un valor distinto de null.

Hay dos maneras de especificar el contenido de la propiedad Visual de un objeto VisualBrush.

Cree un nuevo objeto Visual y utilícelo para establecer la propiedad Visual de VisualBrush. Para obtener un ejemplo, consulte la sección Ejemplo: Pintar un objeto con un objeto visual que figura más adelante.
Utilice un objeto Visual existente, que crea una imagen duplicada del objeto Visual de destino. A continuación, puede utilizar VisualBrush para crear efectos interesantes, tales como reflexiones y ampliaciones. Para obtener un ejemplo, consulte la sección Ejemplo: Crear una reflexión.

Cuando se define un nuevo objeto Visual para VisualBrush y ese objeto Visual es un elemento UIElement (por ejemplo, un panel o un control), el sistema del diseño se ejecuta en el UIElement y sus elementos secundarios cuando la propiedad AutoLayoutContent está establecida en true. Sin embargo, el UIElement raíz queda aislado esencialmente del resto del sistema: los estilos y el diseño externo no puede penetrar este límite. Por consiguiente, debe especificar explícitamente el tamaño del elemento UIElement raíz, porque su único elemento primario es VisualBrush y, por consiguiente, su tamaño no se puede ajustar automáticamente al área pintada. Para obtener más información acerca del diseño en Windows Presentation Foundation (WPF), consulte Sistema de diseño.

Al igual que ImageBrush y DrawingBrush, un objeto VisualBrush expande su contenido a fin de rellenar su área de salida. Puede invalidar este comportamiento cambiando el valor predeterminado (Fill) de la propiedad Stretch. Para obtener más información, vea la propiedad Stretch.

Ejemplo: Pintar un objeto con un objeto visual

En el ejemplo siguiente, se utilizan varios controles y un panel para pintar un rectángulo.

<Rectangle Width="150" Height="150" Stroke="Black" Margin="5,0,5,0">
  <Rectangle.Fill>
    <VisualBrush>
      <VisualBrush.Visual>
        <StackPanel Background="White">
          <Rectangle Width="25" Height="25" Fill="Red" Margin="2" />
          <TextBlock FontSize="10pt" Margin="2">Hello, World!</TextBlock>
          <Button Margin="2">A Button</Button>
        </StackPanel>
      </VisualBrush.Visual>
    </VisualBrush>
  </Rectangle.Fill>
</Rectangle>

            Dim myVisualBrush As New VisualBrush()

            ' Create the visual brush's contents.
            Dim myStackPanel As New StackPanel()
            myStackPanel.Background = Brushes.White

            Dim redRectangle As New Rectangle()
            With redRectangle
                .Width = 25
                .Height = 25
                .Fill = Brushes.Red
                .Margin = New Thickness(2)
            End With
            myStackPanel.Children.Add(redRectangle)

            Dim someText As New TextBlock()
            Dim myFontSizeConverter As New FontSizeConverter()
            someText.FontSize = CDbl(myFontSizeConverter.ConvertFrom("10pt"))
            someText.Text = "Hello, World!"
            someText.Margin = New Thickness(2)
            myStackPanel.Children.Add(someText)

            Dim aButton As New Button()
            aButton.Content = "A Button"
            aButton.Margin = New Thickness(2)
            myStackPanel.Children.Add(aButton)

            ' Use myStackPanel as myVisualBrush's content.
            myVisualBrush.Visual = myStackPanel

            ' Create a rectangle to paint.
            Dim myRectangle As New Rectangle()
            With myRectangle
                .Width = 150
                .Height = 150
                .Stroke = Brushes.Black
                .Margin = New Thickness(5, 0, 5, 0)
            End With

            ' Use myVisualBrush to paint myRectangle.
            myRectangle.Fill = myVisualBrush

            VisualBrush myVisualBrush = new VisualBrush();

            // Create the visual brush's contents.
            StackPanel myStackPanel = new StackPanel();
            myStackPanel.Background = Brushes.White;

            Rectangle redRectangle = new Rectangle();
            redRectangle.Width = 25;
            redRectangle.Height =25; 
            redRectangle.Fill = Brushes.Red;
            redRectangle.Margin = new Thickness(2);
            myStackPanel.Children.Add(redRectangle);

            TextBlock someText = new TextBlock();
            FontSizeConverter myFontSizeConverter = new FontSizeConverter();
            someText.FontSize = (double)myFontSizeConverter.ConvertFrom("10pt");
            someText.Text = "Hello, World!";
            someText.Margin = new Thickness(2);
            myStackPanel.Children.Add(someText);

            Button aButton = new Button();
            aButton.Content = "A Button";
            aButton.Margin = new Thickness(2);
            myStackPanel.Children.Add(aButton);

            // Use myStackPanel as myVisualBrush's content.
            myVisualBrush.Visual = myStackPanel;

            // Create a rectangle to paint.
            Rectangle myRectangle = new Rectangle();
            myRectangle.Width = 150;
            myRectangle.Height = 150;
            myRectangle.Stroke = Brushes.Black;
            myRectangle.Margin = new Thickness(5,0,5,0);

            // Use myVisualBrush to paint myRectangle.
            myRectangle.Fill = myVisualBrush;

Ejemplo: Crear una reflexión

En el ejemplo anterior se ha mostrado cómo crear un nuevo objeto Visual para su uso como fondo. También puede utilizar un objeto VisualBrush para mostrar un objeto visual existente; esta función permite producir efectos visuales interesantes, tales como reflexiones y ampliaciones. En el ejemplo siguiente se usa VisualBrush para crear una reflexión de un Border que contiene varios elementos. En la ilustración siguiente se muestra el resultado de aplicar este ejemplo.

Objeto visual reflejado

Objeto Visual reflejado


Imports System
Imports System.Windows
Imports System.Windows.Data
Imports System.Windows.Controls
Imports System.Windows.Media
Imports System.Windows.Media.Effects
Imports System.Windows.Media.Imaging
Imports System.IO
Imports System.Collections.ObjectModel
Imports System.Windows.Shapes
Namespace SDKSample
    Partial Public Class ReflectionExample
        Inherits Page
        Public Sub New()
            ' Create a name scope for the page.
            NameScope.SetNameScope(Me, New NameScope())

            Me.Background = Brushes.Black
            Dim myStackPanel As New StackPanel()
            myStackPanel.Margin = New Thickness(50)

            Dim myReflectedBorder As New Border()
            Me.RegisterName("ReflectedVisual", myReflectedBorder)

            ' Create a gradient background for the border.
            Dim firstStop As New GradientStop()
            firstStop.Offset = 0.0
            Dim firstStopColor As New Color()
            firstStopColor.R = 204
            firstStopColor.G = 204
            firstStopColor.B = 255
            firstStopColor.A = 255
            firstStop.Color = firstStopColor
            Dim secondStop As New GradientStop()
            secondStop.Offset = 1.0
            secondStop.Color = Colors.White

            Dim myGradientStopCollection As New GradientStopCollection()
            myGradientStopCollection.Add(firstStop)
            myGradientStopCollection.Add(secondStop)

            Dim myLinearGradientBrush As New LinearGradientBrush()
            myLinearGradientBrush.StartPoint = New Point(0, 0.5)
            myLinearGradientBrush.EndPoint = New Point(1, 0.5)
            myLinearGradientBrush.GradientStops = myGradientStopCollection

            myReflectedBorder.Background = myLinearGradientBrush

            ' Add contents to the border.
            Dim borderStackPanel As New StackPanel()
            borderStackPanel.Orientation = Orientation.Horizontal
            borderStackPanel.Margin = New Thickness(10)

            Dim myTextBlock As New TextBlock()
            myTextBlock.TextWrapping = TextWrapping.Wrap
            myTextBlock.Width = 200
            myTextBlock.Text = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit." & " Suspendisse vel ante. Donec luctus tortor sit amet est." & " Nullam pulvinar odio et wisi." & " Pellentesque quis magna. Sed pellentesque." & " Nulla euismod." & "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."

            borderStackPanel.Children.Add(myTextBlock)

            Dim ellipseStackPanel As New StackPanel()

            Dim ellipse1 As New Ellipse()
            ellipse1.Margin = New Thickness(10)
            ellipse1.Height = 50
            ellipse1.Width = 50
            ellipse1.Fill = Brushes.Black
            ellipseStackPanel.Children.Add(ellipse1)
            Dim ellipse2 As New Ellipse()
            ellipse2.Margin = New Thickness(10)
            ellipse2.Height = 50
            ellipse2.Width = 50
            ellipse2.Fill = Brushes.Black
            ellipseStackPanel.Children.Add(ellipse2)
            Dim ellipse3 As New Ellipse()
            ellipse3.Margin = New Thickness(10)
            ellipse3.Height = 50
            ellipse3.Width = 50
            ellipse3.Fill = Brushes.Black
            ellipseStackPanel.Children.Add(ellipse3)
            borderStackPanel.Children.Add(ellipseStackPanel)

            myReflectedBorder.Child = borderStackPanel

            ' Create divider rectangle
            Dim dividerRectangle As New Rectangle()
            dividerRectangle.Height = 1
            dividerRectangle.Fill = Brushes.Gray
            dividerRectangle.HorizontalAlignment = HorizontalAlignment.Stretch

            ' Create the object to contain the reflection.
            Dim reflectionRectangle As New Rectangle()

            ' Bind the height of the rectangle to the border height.
            Dim heightBinding As New Binding()
            heightBinding.ElementName = "ReflectedVisual"
            heightBinding.Path = New PropertyPath(Rectangle.HeightProperty)
            BindingOperations.SetBinding(reflectionRectangle, Rectangle.HeightProperty, heightBinding)

            ' Bind the width of the rectangle to the border width.
            Dim widthBinding As New Binding()
            widthBinding.ElementName = "ReflectedVisual"
            widthBinding.Path = New PropertyPath(Rectangle.WidthProperty)
            BindingOperations.SetBinding(reflectionRectangle, Rectangle.WidthProperty, widthBinding)

            ' Creates the reflection.
            Dim myVisualBrush As New VisualBrush()
            myVisualBrush.Opacity = 0.75
            myVisualBrush.Stretch = Stretch.None
            Dim reflectionBinding As New Binding()
            reflectionBinding.ElementName = "ReflectedVisual"
            BindingOperations.SetBinding(myVisualBrush, VisualBrush.VisualProperty, reflectionBinding)

            Dim myScaleTransform As New ScaleTransform()
            myScaleTransform.ScaleX = 1
            myScaleTransform.ScaleY = -1
            Dim myTranslateTransform As New TranslateTransform()
            myTranslateTransform.Y = 1

            Dim myTransformGroup As New TransformGroup()
            myTransformGroup.Children.Add(myScaleTransform)
            myTransformGroup.Children.Add(myTranslateTransform)

            myVisualBrush.RelativeTransform = myTransformGroup

            reflectionRectangle.Fill = myVisualBrush

            ' Create a gradient background for the border.
            Dim firstStop2 As New GradientStop()
            firstStop2.Offset = 0.0
            Dim c1 As New Color()
            c1.R = 0
            c1.G = 0
            c1.B = 0
            c1.A = 255
            firstStop2.Color = c1
            Dim secondStop2 As New GradientStop()
            secondStop2.Offset = 0.5
            Dim c2 As New Color()
            c2.R = 0
            c2.G = 0
            c2.B = 0
            c2.A = 51
            firstStop2.Color = c2
            Dim thirdStop As New GradientStop()
            thirdStop.Offset = 0.75
            Dim c3 As New Color()
            c3.R = 0
            c3.G = 0
            c3.B = 0
            c3.A = 0
            thirdStop.Color = c3

            Dim myGradientStopCollection2 As New GradientStopCollection()
            myGradientStopCollection2.Add(firstStop2)
            myGradientStopCollection2.Add(secondStop2)
            myGradientStopCollection2.Add(thirdStop)

            Dim myLinearGradientBrush2 As New LinearGradientBrush()
            myLinearGradientBrush2.StartPoint = New Point(0.5, 0)
            myLinearGradientBrush2.EndPoint = New Point(0.5, 1)
            myLinearGradientBrush2.GradientStops = myGradientStopCollection2

            reflectionRectangle.OpacityMask = myLinearGradientBrush2

            Dim myBlurBitmapEffect As New BlurBitmapEffect()
            myBlurBitmapEffect.Radius = 1.5

            reflectionRectangle.BitmapEffect = myBlurBitmapEffect

            myStackPanel.Children.Add(myReflectedBorder)
            myStackPanel.Children.Add(dividerRectangle)
            myStackPanel.Children.Add(reflectionRectangle)
            Me.Content = myStackPanel

        End Sub
    End Class
End Namespace

using System;
using System.Windows;
using System.Windows.Data;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Effects;
using System.Windows.Media.Imaging;
using System.IO;
using System.Collections.ObjectModel;
using System.Windows.Shapes;
namespace SDKSample
{
    public partial class ReflectionExample : Page
    {
        public ReflectionExample()
        {
            // Create a name scope for the page.
            NameScope.SetNameScope(this, new NameScope());

            this.Background = Brushes.Black;
            StackPanel myStackPanel = new StackPanel();
            myStackPanel.Margin = new Thickness(50);

            Border myReflectedBorder = new Border();
            this.RegisterName("ReflectedVisual", myReflectedBorder);

            // Create a gradient background for the border.
            GradientStop firstStop = new GradientStop();
            firstStop.Offset = 0.0;
            Color firstStopColor = new Color();
            firstStopColor.R = 204;
            firstStopColor.G = 204;
            firstStopColor.B = 255;
            firstStopColor.A = 255;
            firstStop.Color = firstStopColor;
            GradientStop secondStop = new GradientStop();
            secondStop.Offset = 1.0;
            secondStop.Color = Colors.White;

            GradientStopCollection myGradientStopCollection = new GradientStopCollection();
            myGradientStopCollection.Add(firstStop);
            myGradientStopCollection.Add(secondStop);

            LinearGradientBrush myLinearGradientBrush = new LinearGradientBrush();
            myLinearGradientBrush.StartPoint = new Point(0, 0.5);
            myLinearGradientBrush.EndPoint = new Point(1, 0.5);
            myLinearGradientBrush.GradientStops = myGradientStopCollection;

            myReflectedBorder.Background = myLinearGradientBrush;

            // Add contents to the border.
            StackPanel borderStackPanel = new StackPanel();
            borderStackPanel.Orientation = Orientation.Horizontal;
            borderStackPanel.Margin = new Thickness(10);

            TextBlock myTextBlock = new TextBlock();
            myTextBlock.TextWrapping = TextWrapping.Wrap;
            myTextBlock.Width = 200;
            myTextBlock.Text = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit." +
                               " Suspendisse vel ante. Donec luctus tortor sit amet est." +
                               " Nullam pulvinar odio et wisi." +
                               " Pellentesque quis magna. Sed pellentesque." +
                               " Nulla euismod." +
                               "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.";

            borderStackPanel.Children.Add(myTextBlock);

            StackPanel ellipseStackPanel = new StackPanel();

            Ellipse ellipse1 = new Ellipse();
            ellipse1.Margin = new Thickness(10);
            ellipse1.Height = 50;
            ellipse1.Width = 50;
            ellipse1.Fill = Brushes.Black;
            ellipseStackPanel.Children.Add(ellipse1);
            Ellipse ellipse2 = new Ellipse();
            ellipse2.Margin = new Thickness(10);
            ellipse2.Height = 50;
            ellipse2.Width = 50;
            ellipse2.Fill = Brushes.Black;
            ellipseStackPanel.Children.Add(ellipse2);
            Ellipse ellipse3 = new Ellipse();
            ellipse3.Margin = new Thickness(10);
            ellipse3.Height = 50;
            ellipse3.Width = 50;
            ellipse3.Fill = Brushes.Black;
            ellipseStackPanel.Children.Add(ellipse3);
            borderStackPanel.Children.Add(ellipseStackPanel);

            myReflectedBorder.Child = borderStackPanel;

            // Create divider rectangle
            Rectangle dividerRectangle = new Rectangle();
            dividerRectangle.Height = 1;
            dividerRectangle.Fill = Brushes.Gray;
            dividerRectangle.HorizontalAlignment = HorizontalAlignment.Stretch;

            // Create the object to contain the reflection.
            Rectangle reflectionRectangle = new Rectangle();

            // Bind the height of the rectangle to the border height.
            Binding heightBinding = new Binding();
            heightBinding.ElementName = "ReflectedVisual";
            heightBinding.Path = new PropertyPath(Rectangle.HeightProperty);
            BindingOperations.SetBinding(reflectionRectangle, Rectangle.HeightProperty, heightBinding);

            // Bind the width of the rectangle to the border width.
            Binding widthBinding = new Binding();
            widthBinding.ElementName = "ReflectedVisual";
            widthBinding.Path = new PropertyPath(Rectangle.WidthProperty);
            BindingOperations.SetBinding(reflectionRectangle, Rectangle.WidthProperty, widthBinding);

            // Creates the reflection.
            VisualBrush myVisualBrush = new VisualBrush();
            myVisualBrush.Opacity = 0.75;
            myVisualBrush.Stretch = Stretch.None;
            Binding reflectionBinding = new Binding();
            reflectionBinding.ElementName = "ReflectedVisual";
            BindingOperations.SetBinding(myVisualBrush, VisualBrush.VisualProperty, reflectionBinding);

            ScaleTransform myScaleTransform = new ScaleTransform();
            myScaleTransform.ScaleX = 1;
            myScaleTransform.ScaleY = -1;
            TranslateTransform myTranslateTransform = new TranslateTransform();
            myTranslateTransform.Y = 1;

            TransformGroup myTransformGroup = new TransformGroup();
            myTransformGroup.Children.Add(myScaleTransform);
            myTransformGroup.Children.Add(myTranslateTransform);

            myVisualBrush.RelativeTransform = myTransformGroup;

            reflectionRectangle.Fill = myVisualBrush;

            // Create a gradient background for the border.
            GradientStop firstStop2 = new GradientStop();
            firstStop2.Offset = 0.0;
            Color c1 = new Color();
            c1.R = 0;
            c1.G = 0;
            c1.B = 0;
            c1.A = 255;
            firstStop2.Color = c1;
            GradientStop secondStop2 = new GradientStop();
            secondStop2.Offset = 0.5;
            Color c2 = new Color();
            c2.R = 0;
            c2.G = 0;
            c2.B = 0;
            c2.A = 51;
            firstStop2.Color = c2;
            GradientStop thirdStop = new GradientStop();
            thirdStop.Offset = 0.75;
            Color c3 = new Color();
            c3.R = 0;
            c3.G = 0;
            c3.B = 0;
            c3.A = 0;
            thirdStop.Color = c3;

            GradientStopCollection myGradientStopCollection2 = new GradientStopCollection();
            myGradientStopCollection2.Add(firstStop2);
            myGradientStopCollection2.Add(secondStop2);
            myGradientStopCollection2.Add(thirdStop);

            LinearGradientBrush myLinearGradientBrush2 = new LinearGradientBrush();
            myLinearGradientBrush2.StartPoint = new Point(0.5, 0);
            myLinearGradientBrush2.EndPoint = new Point(0.5, 1);
            myLinearGradientBrush2.GradientStops = myGradientStopCollection2;

            reflectionRectangle.OpacityMask = myLinearGradientBrush2;

            BlurBitmapEffect myBlurBitmapEffect = new BlurBitmapEffect();
            myBlurBitmapEffect.Radius = 1.5;

            reflectionRectangle.BitmapEffect = myBlurBitmapEffect;

            myStackPanel.Children.Add(myReflectedBorder);
            myStackPanel.Children.Add(dividerRectangle);
            myStackPanel.Children.Add(reflectionRectangle);
            this.Content = myStackPanel;

        }
        /*
    <Rectangle 
      Height="{Binding Path=ActualHeight, ElementName=ReflectedVisual}" 
      Width="{Binding Path=ActualWidth, ElementName=ReflectedVisual}">

      <Rectangle.OpacityMask>
        <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
          <GradientStop Color="#FF000000" Offset="0.0" />
          <GradientStop Color="#33000000" Offset="0.5" />
          <GradientStop Color="#00000000" Offset="0.75" />
        </LinearGradientBrush>
      </Rectangle.OpacityMask>

      <Rectangle.BitmapEffect>
        <BlurBitmapEffect Radius="1.5" />
      </Rectangle.BitmapEffect>

    </Rectangle>
  </StackPanel>
</Page>

*/

    }
}

<Page  
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" 
  Background="Black">


  <StackPanel Margin="50">

    <!-- The object to reflect. -->
    <Border Name="ReflectedVisual" Width="400">
      <Border.Background>
        <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
          <GradientStop Offset="0.0" Color="#CCCCFF" />
          <GradientStop Offset="1.0" Color="White" />
        </LinearGradientBrush>
      </Border.Background>
      <StackPanel Orientation="Horizontal" Margin="10">        
        <TextBlock TextWrapping="Wrap" Width="200" Margin="10">
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
          Suspendisse vel ante. Donec luctus tortor sit amet est.
          Nullam pulvinar odio et wisi.
          Pellentesque quis magna. Sed pellentesque.
          Nulla euismod.
          Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
        </TextBlock>
        <StackPanel>
          <Ellipse Margin="10" Height="50" Width="50" Fill="Black" />
          <Ellipse Margin="10" Height="50" Width="50" Fill="Black" />
          <Ellipse Margin="10" Height="50" Width="50" Fill="Black" />
        </StackPanel>
      </StackPanel>
    </Border>

    <Rectangle Height="1" Fill="Gray" HorizontalAlignment="Stretch" />

    <!-- The object to contain the reflection.-->
    <Rectangle 
      Height="{Binding Path=ActualHeight, ElementName=ReflectedVisual}" 
      Width="{Binding Path=ActualWidth, ElementName=ReflectedVisual}">
      <Rectangle.Fill>

        <!-- Creates the reflection. -->
        <VisualBrush 
          Opacity="0.75" Stretch="None"
          Visual="{Binding ElementName=ReflectedVisual}">
          <VisualBrush.RelativeTransform>

            <!-- Flip the reflection. -->
            <TransformGroup>
              <ScaleTransform ScaleX="1" ScaleY="-1" />
              <TranslateTransform  Y="1" />
            </TransformGroup>
          </VisualBrush.RelativeTransform>
        </VisualBrush>
      </Rectangle.Fill>

      <Rectangle.OpacityMask>
        <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
          <GradientStop Color="#FF000000" Offset="0.0" />
          <GradientStop Color="#33000000" Offset="0.5" />
          <GradientStop Color="#00000000" Offset="0.75" />
        </LinearGradientBrush>
      </Rectangle.OpacityMask>

      <Rectangle.BitmapEffect>
        <BlurBitmapEffect Radius="1.5" />
      </Rectangle.BitmapEffect>

    </Rectangle>
  </StackPanel>
</Page>

Para obtener ejemplos adicionales que muestran cómo ampliar partes de la pantalla y cómo crear reflexiones, vea VisualBrush Sample.

Características de TileBrush

ImageBrush, DrawingBrush y VisualBrush son tipos de objetos TileBrush. Los objetos TileBrush proporcionan un gran control sobre cómo se pinta un área con una imagen, un dibujo o un objeto visual. Por ejemplo, en lugar de limitarse a pintar una área con una sola imagen ajustada, puede hacerlo con una serie de mosaicos de la imagen que crean una trama.

TileBrush tiene tres componentes primarios: el contenido, los mosaicos y el área de salida.

Componentes de TileBrush con un solo mosaico

Componentes de TileBrush

Componentes de TileBrush con varios mosaicos

Componentes de TileBrush en mosaico

Para obtener más información sobre las características de mosaico de los objetos TileBrush, consulte Información general sobre objetos TileBrush.

Vea también

Compartir a través de