Visão geral de Formas e Desenho básico no WPF
Este tópico fornece uma visão geral de como desenhar com objetos Shape. Um Shape é um tipo de UIElement que permite que você desenhe uma forma na tela. Como eles são elementos de interface do usuário (UI), objetos Shape podem ser usados dentro de elementos Panel e da maioria dos controles.
Windows Presentation Foundation (WPF) oferece vários níveis de acesso aos elementos gráficos e serviços de renderização. Na camada superior, objetos Shape são fáceis de usar e fornecem muitos recursos úteis, como layout e participação no sistema de eventos Windows Presentation Foundation (WPF).
Este tópico contém as seguintes seções.
- Objetos Shape
- Usando Paths e Geometries
- Pintando formas
- Formas Alongáveis
- Transformando formas
- Tópicos relacionados
Objetos Shape
WPF fornece vários objetos Shape prontos para uso. Todos os objetos de forma herdam da classe Shape. Objetos disponíveis forma incluem Ellipse, Line, Path, Polygon, Polyline e Rectangle. Objetos Shape compartilham as propriedades comuns a seguir.
Stroke: Descreve como a estrutura da forma é pintada.
StrokeThickness Descreve a espessura da estrutura de tópicos da forma.
Fill: Descreve como o interior da forma é pintada.
Propriedades de dados para especificar as coordenadas e vértices, medidas em pixels independente de dispositivo .
Já que eles derivam de UIElement, objetos de forma podem ser usados dentro painéis e da maioria dos controles. O painel Canvas é uma opção particularmente boa para criar desenhos complexos porque ele suporta o posicionamento absoluto de seus objetos filhos.
A classe Line permite que você desenhe uma linha entre dois pontos. O exemplo a seguir mostra várias maneiras para especificar as propriedades de coordenadas de linha e traço.
<Canvas Height="300" Width="300">
<!-- Draws a diagonal line from (10,10) to (50,50). -->
<Line
X1="10" Y1="10"
X2="50" Y2="50"
Stroke="Black"
StrokeThickness="4" />
<!-- Draws a diagonal line from (10,10) to (50,50)
and moves it 100 pixels to the right. -->
<Line
X1="10" Y1="10"
X2="50" Y2="50"
StrokeThickness="4"
Canvas.Left="100">
<Line.Stroke>
<RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
<RadialGradientBrush.GradientStops>
<GradientStop Color="Red" Offset="0" />
<GradientStop Color="Blue" Offset="0.25" />
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
</Line.Stroke>
</Line>
<!-- Draws a horizontal line from (10,60) to (150,60). -->
<Line
X1="10" Y1="60"
X2="150" Y2="60"
Stroke="Black"
StrokeThickness="4"/>
</Canvas>
' Add a Line Element
Dim myLine As New Line()
myLine.Stroke = Brushes.LightSteelBlue
myLine.X1 = 1
myLine.X2 = 50
myLine.Y1 = 1
myLine.Y2 = 50
myLine.HorizontalAlignment = HorizontalAlignment.Left
myLine.VerticalAlignment = VerticalAlignment.Center
myLine.StrokeThickness = 2
myGrid.Children.Add(myLine)
// Add a Line Element
myLine = new Line();
myLine.Stroke = System.Windows.Media.Brushes.LightSteelBlue;
myLine.X1 = 1;
myLine.X2 = 50;
myLine.Y1 = 1;
myLine.Y2 = 50;
myLine.HorizontalAlignment = HorizontalAlignment.Left;
myLine.VerticalAlignment = VerticalAlignment.Center;
myLine.StrokeThickness = 2;
myGrid.Children.Add(myLine);
A imagem a seguir mostra a Line renderizada.
.gif "Ilustração de linha")
Embora a classe Line forneça uma propriedade Fill, defini-la não tem efeito porque uma Line não tem área.
Outra forma comum é a Ellipse. Crie uma Ellipse definindo as propriedades Width e Height. Para desenhar um círculo, especifique uma Ellipse cujos valores de Width e Height sejam iguais.
<Ellipse
Fill="Yellow"
Height="100"
Width="200"
StrokeThickness="2"
Stroke="Black"/>
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Shapes;
namespace SDKSample
{
public partial class SetBackgroundColorOfShapeExample : Page
{
public SetBackgroundColorOfShapeExample()
{
// Create a StackPanel to contain the shape.
StackPanel myStackPanel = new StackPanel();
// Create a red Ellipse.
Ellipse myEllipse = new Ellipse();
// Create a SolidColorBrush with a red color to fill the
// Ellipse with.
SolidColorBrush mySolidColorBrush = new SolidColorBrush();
// Describes the brush's color using RGB values.
// Each value has a range of 0-255.
mySolidColorBrush.Color = Color.FromArgb(255, 255, 0, 0);
myEllipse.Fill = mySolidColorBrush;
// Set the width and height of the Ellipse.
myEllipse.Width = 100;
myEllipse.Height = 100;
// Add the Ellipse to the StackPanel.
myStackPanel.Children.Add(myEllipse);
this.Content = myStackPanel;
}
}
}
A imagem abaixo mostra um exemplo de uma Ellipse renderizada.
.png "Ilustração de elipse")
Usando Paths e Geometries
A classe Path permite que você desenhe curvas e formas complexas. Esses curvas e formas são descritas usando objetos Geometry. Para usar um Path, você cria uma Geometry e usa-a para definir a propriedade Data do objeto Path.
Há uma variedade de objetos Geometry a serem escolhidos. As classes LineGeometry, RectangleGeometry, e EllipseGeometry descrevem formas relativamente simples. Para criar formas mais complexas ou criar curvas, use um PathGeometry.
PathGeometry e PathSegments
Objetos PathGeometry são constituídos de um ou mais objetos PathFigure; cada PathFigure representa uma forma ou diferente "Figura". Cada PathFigure é composta de um ou mais objetos PathSegment, cada um representando uma parte conectada da figura ou forma. Segmento de tipos incluem o seguinte: LineSegment, BezierSegment, e ArcSegment.
No exemplo o seguir, um Path é usado para desenhar uma curva Bezier quadrática.
<Path Stroke="Black" StrokeThickness="1">
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigureCollection>
<PathFigure StartPoint="10,100">
<PathFigure.Segments>
<PathSegmentCollection>
<QuadraticBezierSegment Point1="200,200" Point2="300,100" />
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
</PathFigureCollection>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path>
A imagem a seguir mostra a forma renderizada.
.gif "Ilustração de caminho")
Para obter mais informações sobre PathGeometry e outras classes Geometry, consulte Visão Geral de Geometria.
Sintaxe XAML Abreviada
Em Extensible Application Markup Language (XAML), você também pode usar uma sintaxe abreviada especial para descrever um Path. No exemplo a seguir, a sintaxe abreviada serve para desenhar uma forma complexa.
<Path Stroke="DarkGoldenRod" StrokeThickness="3"
Data="M 100,200 C 100,25 400,350 400,175 H 280" />
A imagem a seguir mostra um Path renderizado.
.png "Ilustração de caminho")
The Dataseqüência de caracteres de atributo começa com o comando "moveto", indicado por M, que estabelece um ponto inicial para o caminho no sistema de coordenada da Canvas. Path dados de parâmetros diferenciam diferenciar maiúsculas de minúsculas. O M maiúsculo indica um local absoluto para o novo ponto atual. Um m minúsculo indicaria coordenadas relativas. O primeiro segmento é uma curva Bezier cúbica começando no (100,200) e termiando em (400,175), desenhada usando os dois pontos de controle (100,25) e (400,350). Este segmento é indicado pelo comando C na string do atributo Data. Novamente, a maiúscula C indica um caminho absoluto; o c minúsculo indicaria um caminho relativo.
O segundo segmento começa com um comando "lineto"H horizontal absoluto, que especifica uma linha desenhada a partir do ponto de extremidade do subpath anterior (400,175) para um novo ponto de extremidade (280,175). Como é um comando horizontal "lineto", o valor especificado é uma coordenada x.
Para obter a sintaxe de caminho completo, consulte a Data referência e Como: Criar um Shape usando um PathGeometry.
Pintando formas
Objetos Brush são usados para desenhar Stroke e Fill da forma. No exemplo a seguir, o preenchimento e o traço de uma Ellipse são especificados. Observe que entrada válida para propriedades de pintura pode ser uma palavra-chave ou valor hexadecimal de cor. Para obter mais informações sobre palavras-chave de cores disponíveis, consulte propriedades da classe Colors no namespace System.Windows.Media.
<Canvas Background="LightGray">
<Ellipse
Canvas.Top="50"
Canvas.Left="50"
Fill="#FFFFFF00"
Height="75"
Width="75"
StrokeThickness="5"
Stroke="#FF0000FF"/>
</Canvas>
A imagem a seguir mostra a Ellipse renderizada.
.png "Uma elipse")
Como alternativa, você pode usar a sintaxe de propriedade de elemento para criar explicitamente um objeto SolidColorBrush para desenhar a forma com uma cor sólida.
<!-- This polygon shape uses pre-defined color values for its Stroke and
Fill properties.
The SolidColorBrush's Opacity property affects the fill color in
this case by making it slightly transparent (opacity of 0.4) so
that it blends with any underlying color. -->
<Polygon
Points="300,200 400,125 400,275 300,200"
Stroke="Purple"
StrokeThickness="2">
<Polygon.Fill>
<SolidColorBrush Color="Blue" Opacity="0.4"/>
</Polygon.Fill>
</Polygon>
A ilustração a seguir mostra a página renderizada.
.png "Ilustração de SolidColorBrush")
Você também pode pintar o preenchimento ou o traço de uma forma com gradiente, imagens, padrões e outros. Para obter mais informações, consulte o Painting with Solid Colors and Gradients Overview.
Formas Alongáveis
As classes Line, Path, Polygon, Polyline, e Rectangle têm todas uma propriedade Stretch. Esta propriedade determina como o conteúdo de um objeto Shape (a forma a ser desenhada) é alongado para preencher o espaço do layout do objeto Shape. Espaço de layout de um objeto Shape é a quantidade de espaço alocado para Shape pelo sistema de layout, devido à configuração explícita de Width e Height ou devido à configuração de seus HorizontalAlignment e VerticalAlignment. Para obter informações adicionais sobre layout em Windows Presentation Foundation, consulte a Visão Geral sobre O sistema de layout.
A propriedade Stretch usa um dos seguintes valores:
FillConteúdo: do objeto Shape é alongados para preencher o espaço de layout. A taxa de proporção não é preservada.
Uniform: O conteúdo do objeto Shape é alongado tanto quanto possível para preencher o espaço de layout enquanto preserva sua proporção original.
UniformToFill: O conteúdo do objeto Shape é alongado para preencher completamente o seu espaço de layout enquanto preserva sua proporção original.
Observe que, quando o conteúdo de um objeto Shape é alongado, o contorno do objeto Shape é pintado após o alongamento.
No exemplo a seguir, um Polygon é usado para desenhar um triângulo muito pequeno de (0,0) a (0,1) a (1,1). Os Width e Height do objeto Polygon são definidos como 100, e sua propriedade Stretch é definida para Fill. Como resultado, o conteúdo do objeto Polygon (o triângulo) é alongado para preencher o espaço maior.
...
<Polygon
Points="0,0 0,1 1,1"
Fill="Blue"
Width="100"
Height="100"
Stretch="Fill"
Stroke="Black"
StrokeThickness="2" />
...
...
PointCollection myPointCollection = new PointCollection();
myPointCollection.Add(new Point(0,0));
myPointCollection.Add(new Point(0,1));
myPointCollection.Add(new Point(1,1));
Polygon myPolygon = new Polygon();
myPolygon.Points = myPointCollection;
myPolygon.Fill = Brushes.Blue;
myPolygon.Width = 100;
myPolygon.Height = 100;
myPolygon.Stretch = Stretch.Fill;
myPolygon.Stroke = Brushes.Black;
myPolygon.StrokeThickness = 2;
...
Transformando formas
A classe Transform fornece os meios para transformar formas em um plano bidimensional. Os diferentes tipos de transformação incluem rotação (RotateTransform), escala (ScaleTransform), distorção (SkewTransform), e translação (TranslateTransform).
Uma transformação comum a ser aplicada a uma forma é uma rotação. Para girar uma forma, crie um RotateTransform e especifique seu Angle. Um Angle de 45 gira o elemento 45 graus no sentido horário; um ângulo de 90 gira o elemento 90 graus no sentido horário; e assim por diante. Defina as propriedades CenterX e CenterY se você deseja controlar o centro de rotação do elemento. Esses valores são expressos no espaço de coordenada do elemento que está sendo transformado. CenterX e CenterY ter valores padrão de zero. Finalmente, aplica-se a RotateTransform ao elemento. Se você não deseja que a transformação afete o layout, defina a propriedade RenderTransform da forma.
No exemplo o seguir, um RotateTransform é usado para girar uma forma 45 graus em torno do canto esquerdo superior (0,0) da forma .
<!-- Rotates the Polyline 45 degrees about the point (0,0). -->
<Polyline Points="25,25 0,50 25,75 50,50 25,25 25,0"
Stroke="Blue" StrokeThickness="10"
Canvas.Left="75" Canvas.Top="50">
<Polyline.RenderTransform>
<RotateTransform CenterX="0" CenterY="0" Angle="45" />
</Polyline.RenderTransform>
</Polyline>
No próximo exemplo, uma outra forma é girada em 45 graus, mas dessa vez el é girada em torno do ponto (25,50).
<!-- Rotates the Polyline 45 degrees about its center. -->
<Polyline
Points="25,25 0,50 25,75 50,50 25,25 25,0"
Stroke="Blue" StrokeThickness="10"
Canvas.Left="75" Canvas.Top="50"
RenderTransformOrigin="0.5,0.5">
<Polyline.RenderTransform>
<RotateTransform Angle="45" />
</Polyline.RenderTransform>
</Polyline>
A ilustração a seguir mostra os resultados da aplicação das duas transformações.
.gif "Rotações de 45 graus com diferentes pontos centrais")
Nos exemplos anteriores, um única transformação foi aplicada a cada objeto de forma. Para aplicar várias transformações para uma forma (ou qualquer outro elemento de interface do usuário(UI)), use um TransformGroup.
Consulte também
Conceitos
Otimizando o desempenho: 2D Graphics and Imaging
Painting with Solid Colors and Gradients Overview