Pintura com Imagens, Desenhos e Visuais
Este tópico descreve como usar objetos ImageBrush, DrawingBrush e VisualBrush para pintar uma área com uma imagem, um Drawing, ou um Visual.
Este tópico contém as seguintes seções.
- Pré-requisitos
- Pintar uma área com uma imagem
- Exemplo: Pintar um objeto com uma imagem de bitmap
- Pintar uma Área com um desenho
- Exemplo: Pintar um Objeto com um Desenho
- Pintar uma rede com um visual
- Exemplo: Pintar um objeto com um Visual
- Exemplo: Criar um reflexo
- Recursos TileBrush
- Tópicos relacionados
Pré-requisitos
Para entender esse tópico, você deve estar familiarizado com os diferentes tipos de pinceis Windows Presentation Foundation (WPF) fornece e seus recursos básicos. Para obter uma introdução, consulte WPF Brushes Overview.
Pintar uma área com uma imagem
Um ImageBrush pinta uma área com uma ImageSource. O tipo mais comum de ImageSource para usar com um ImageBrush é um BitmapImage, que descreve um gráfico de bitmap. Você pode usar um DrawingImage para pintar usando um objeto Drawing, mas é mais simples usar um DrawingBrush em vez disso. Para obter mais informações sobre objetos ImageSource, consulte Visão geral sobre imagens.
Para pintar com um ImageBrush, criar um BitmapImage e use o para carregar o conteúdo de bitmap. Em seguida, use o BitmapImage para definir a propriedade ImageSource de ImageBrush. Finalmente, aplique o ImageBrush ao objeto que deseja pintar. Em Extensible Application Markup Language (XAML), você pode apenas definir a propriedade ImageSource de ImageBrush com o caminho da imagem a carregar.
Como todos os objetos Brush , um ImageBrush pode ser usado para pintar objetos, como formas, painéis, controles e texto. A ilustração a seguir mostra alguns efeitos que podem ser obtidos com um ImageBrush.
Objetos pintados por um ImageBrush
.gif "Exemplos de saída de ImageBrush")
Por padrão, um ImageBrush alonga sua imagem para preencher completamente a área que está sendo pintada, possivelmente distorcendo a imagem se a área pintada tiver uma relação de aspecto diferente do que a da imagem. Você pode alterar esse comportamento alterando a propriedade Stretch do seu valor padrão de Fill para None, Uniform, ou UniformToFill. Como ImageBrush é um tipo de TileBrush, você pode especificar exatamente como um pincel de imagem preenche a área de saída e até mesmo cria padrões. Para obter mais informações sobre recursos avançados de TileBrush, consulte o TileBrush Overview.
Exemplo: Pintar um objeto com uma imagem de bitmap
The following example uses an ImageBrush to paint the Background of a 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>
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 uma Área com um desenho
Um DrawingBrush permite que você pinte uma área com formas, texto, imagens e vídeo. Formas dentro de um pincel de desenho podem ser elas próprias pintadas com uma cor sólida, gradiente, imagem ou até mesmo de outro DrawingBrush. A ilustração a seguir demonstra alguns usos de um DrawingBrush.
Objetos pintados por um DrawingBrush
.png "Exemplos de saída de DrawingBrush")
A DrawingBrush paints an area with a Drawing object. Um objeto Drawing descreve conteúdo visível, tal como forma, bitmap, vídeo ou uma linha de texto. Diferentes tipos de desenho descrevem diferentes tipos de conteúdo. Segue uma lista dos diferentes tipos de objetos de desenho.
GeometryDrawing -- Desenha uma forma.
ImageDrawing -- Desenha uma imagem.
GlyphRunDrawing -- Desenha texto.
VideoDrawing -- Reproduz um arquivo de áudio ou vídeo.
DrawingGroup -- Desenha outros desenhos. Utilize um grupo de desenho para combinar outros desenhos em um único desenho composto.
Para obter mais informações sobre objetos Drawing, consulte Visão Geral de Objetos de Desenho.
Como um ImageBrush, um DrawingBrush alonga seu Drawing para preencher sua área de saída. Você pode substituir esse comportamento alterando a propriedade Stretch da sua configuração padrão de Fill. Para obter mais informações, consulte a propriedade Stretch.
Exemplo: Pintar um Objeto com um Desenho
O exemplo a seguir mostra como pintar um objeto com um desenho de três elipses. Um GeometryDrawing é usado para descrever as 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.
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 uma rede com um visual
O mais versátil e eficiente de todos os pincéis, o VisualBrush pinta uma área com um Visual. Um Visual é um tipo gráfico de baixo nível que serve como o predecessor de vários componentes gráficos úteis. Por exemplo, as classes Window, FrameworkElement, e Control são todas tipos de objetos Visual. Usando um VisualBrush, você pode pintar áreas com praticamente qualquer objeto gráfico de Windows Presentation Foundation (WPF).
.gif "Observação") Observação: |
|---|
Embora VisualBrush é um tipo de Freezable o objeto, não pode estar congelada (feitos somente leitura) ao seu Visual propriedade estiver definida como um valor diferente de null. |
Há duas maneiras para especificar o conteúdo de Visual de um VisualBrush.
Crie um novo Visual e o use para definir a propriedade Visual de VisualBrush. Para obter um exemplo, consulte o Exemplo: Pinte um objeto com um Visual seção a seguir.
Use um Visual existente, que cria uma imagem de destino Visual duplicada. Em seguida, você pode usar o VisualBrush para criar efeitos interessantes, como reflexão e ampliação. Para obter um exemplo, consulte o Exemplo: Crie uma seção de reflexão.
Quando você define um novo Visual para um VisualBrush e que Visual é um UIElement (como um painel ou controle), o sistema de layout é executado no UIElement e seus elementos filhos quando a propriedade AutoLayoutContent é definida como true. No entanto, a raiz UIElement é essencialmente isolado do resto do sistema: estilos e layout externo não é possível permear esse limite. Portanto, você deve especificar explicitamente o tamanho da raiz UIElement,porque seu único pai é o VisualBrush e, portanto, ele não pode automaticamente redimensionar a si próprio para a área que está sendo pintada. Para obter mais informações sobre layout em Windows Presentation Foundation (WPF), consulte O sistema de layout.
Como ImageBrush, e DrawingBrush, um VisualBrush alonga seu conteúdo para preencher sua área de saída. Você pode substituir esse comportamento alterando a propriedade Stretch da sua configuração padrão de Fill. Para obter mais informações, consulte a propriedade Stretch.
Exemplo: Pintar um objeto com um Visual
No exemplo a seguir, vários controles e um painel são usados para desenhar um retâ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>
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;
Exemplo: Criar um reflexo
O exemplo anterior mostrou como criar um novo Visual para usar como plano de fundo. Você pode também usar um VisualBrush para exibir um visual existente, esse recurso permite a você produzir efeitos visuais interessantes, como reflexos e ampliações. O exemplo a seguir usa um VisualBrush para criar um reflexo de uma Border que contém diversos elementos. A ilustração a seguir mostra a saída que esse exemplo produz.
Um objeto Visual refletido
.jpg "Um objeto Visual refletido")
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 outros exemplos que mostram como ampliar partes da tela e como criar reflexos, consulte o Exemplo de VisualBrush.
Recursos TileBrush
ImageBrush, DrawingBrush, e VisualBrush tipos de TileBrush objetos. TileBrush objetos fornecem uma grande controle sobre como uma área é pintada com uma imagem, desenho ou visuais. Por exemplo, em vez apenas pintar uma área com uma única imagem alongada, você pode pintar uma área com uma série de imagens lado a lado que criam um padrão.
A TileBrush tem três componentes principais: conteúdo, lado a lado e a área de saída.
Componentes de uma TileBrush com uma única peça
.png "Componentes de TileBrush")
Componentes de uma TileBrush com várias peças lado a lado
.png "Componentes de um TileBrush lado a lado")
Para obter mais informações sobre os recursos de disposição lado a lado de objetos TileBrush, consulte o TileBrush Overview.
Consulte também
Tarefas
Conceitos
Visão Geral de Objetos de Desenho
Visão Geral sobre Máscaras de Opacidade
Visão Geral sobre Renderização de Gráficos do Windows Presentation Foundation