Nota
O acesso a esta página requer autorização. Podes tentar iniciar sessão ou mudar de diretório.
O acesso a esta página requer autorização. Podes tentar mudar de diretório.
Este tópico fornece uma visão geral de como desenhar com Shape objetos. Um Shape é um tipo de UIElement que permite desenhar uma forma na tela. Como são elementos da interface do utilizador, os objetos Shape podem ser usados dentro de elementos Panel e na maioria dos controlos.
O Windows Presentation Foundation (WPF) oferece várias camadas de acesso a gráficos e serviços de renderização. Na camada superior, Shape objetos são fáceis de usar e fornecem muitos recursos úteis, como layout e participação no sistema de eventos Windows Presentation Foundation (WPF).
Os tipos relacionados à forma estão no namespace Windows.Shapes. Os tipos relacionados à geometria estão no namespace System.Windows.Media.
Objetos de forma
O WPF fornece vários objetos Shape prontos para uso. Todos os objetos de forma herdam da classe Shape. Os objetos de forma disponíveis incluem Ellipse, Line, Path, Polygon, Polylinee Rectangle. Shape objetos compartilham as seguintes propriedades comuns.
Stroke: Descreve como o contorno da forma é pintado.
StrokeThickness: Descreve a espessura do contorno da forma.
Fill: Descreve como o interior da forma é pintado.
Propriedades de dados para especificar coordenadas e vértices, medidos em pixels independentes do dispositivo.
Como derivam de UIElement, os objetos de forma podem ser usados dentro de painéis e da maioria dos controles. O painel Canvas é uma escolha particularmente boa para a criação de desenhos complexos, pois suporta o posicionamento absoluto de seus objetos filho.
A classe Line permite traçar uma linha entre dois pontos. O exemplo a seguir mostra várias maneiras de especificar coordenadas de linha e propriedades de traçado.
<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
myLine = gcnew 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);
' 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)
A imagem a seguir mostra o Linerenderizado.
Embora a classe Line forneça uma propriedade Fill, defini-la não tem efeito porque um Line não tem área.
Outra forma comum é o Ellipse. Crie um Ellipse definindo as propriedades Width e Height da forma. Para desenhar um círculo, especifique um 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, 255, 0);
myEllipse.Fill = mySolidColorBrush;
myEllipse.StrokeThickness = 2;
myEllipse.Stroke = Brushes.Black;
// Set the width and height of the Ellipse.
myEllipse.Width = 200;
myEllipse.Height = 100;
// Add the Ellipse to the StackPanel.
myStackPanel.Children.Add(myEllipse);
this.Content = myStackPanel;
}
}
}
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Media
Imports System.Windows.Shapes
Namespace SDKSample
Partial Public Class SetBackgroundColorOfShapeExample
Inherits Page
Public Sub New()
' Create a StackPanel to contain the shape.
Dim myStackPanel As New StackPanel()
' Create a red Ellipse.
Dim myEllipse As New Ellipse()
' Create a SolidColorBrush with a red color to fill the
' Ellipse with.
Dim mySolidColorBrush As New SolidColorBrush()
' Describes the brush's color using RGB values.
' Each value has a range of 0-255.
mySolidColorBrush.Color = Color.FromArgb(255, 255, 255, 0)
myEllipse.Fill = mySolidColorBrush
myEllipse.StrokeThickness = 2
myEllipse.Stroke = Brushes.Black
' Set the width and height of the Ellipse.
myEllipse.Width = 200
myEllipse.Height = 100
' Add the Ellipse to the StackPanel.
myStackPanel.Children.Add(myEllipse)
Me.Content = myStackPanel
End Sub
End Class
End Namespace
A imagem a seguir mostra um exemplo de Ellipserenderizado.
Usando caminhos e geometrias
A classe Path permite desenhar curvas e formas complexas. Essas curvas e formas são descritas usando objetos Geometry. Para usar um Path, crie um Geometry e use-o para definir a propriedade Path do objeto Data.
Há uma variedade de Geometry objetos para escolher. As classes LineGeometry, RectangleGeometrye EllipseGeometry descrevem formas relativamente simples. Para criar formas mais complexas ou curvas, use um PathGeometry.
GeometriaDeCaminho e SegmentosDeCaminho
PathGeometry objetos são compostos por um ou mais objetos PathFigure; Cada PathFigure representa uma "figura" ou forma diferente. Cada PathFigure é composto por um ou mais objetos PathSegment, cada um representando uma parte conectada da figura ou forma. Os tipos de segmento incluem o seguinte: LineSegment, BezierSegmente ArcSegment.
No exemplo a seguir, um Path é usado para desenhar uma curva quadrática de Bezier.
<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.
Para obter mais informações sobre PathGeometry e as outras classes Geometry, consulte a Visão Geral da Geometria .
Sintaxe abreviada XAML
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 é usada 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 Pathrenderizado.
A string do atributo Data começa com o comando "moveto", indicado por M, que estabelece um ponto de partida para o caminho no sistema de coordenadas do Canvas. Os parâmetros de dados Path são sensíveis a maiúsculas e minúsculas. O M maiúsculo indica uma localização absoluta para o novo ponto atual. Um m minúsculo indicaria coordenadas relativas. O primeiro segmento é uma curva cúbica de Bezier que começa em (100.200) e termina em (400.175), desenhada usando os dois pontos de controle (100.25) e (400.350). Este segmento é indicado pelo comando C na cadeia de caracteres de atributo Data. Mais uma vez, o C maiúsculo indica um caminho absoluto; o c minúsculo indicaria um caminho relativo.
O segundo segmento começa com um comando absoluto "lineto" horizontal H, que especifica uma linha desenhada desde o ponto final do subcaminho anterior (400,175) até um novo ponto final (280,175). Por ser um comando horizontal "lineto", o valor especificado é uma coordenada x-y-.
Para obter a sintaxe completa do caminho, consulte a referência Data e Criar uma forma usando umPathGeometry .
Pintando Formas
Os objetos Brush são usados para pintar a Stroke e o Fillde uma forma. No exemplo a seguir, o traçado e o preenchimento de um Ellipse são especificados. Observe que a entrada válida para propriedades de pincel pode ser uma palavra-chave ou um valor de cor hexadecimal. 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 o Ellipserenderizado.
Como alternativa, você pode usar a sintaxe do elemento de propriedade para criar explicitamente um objeto SolidColorBrush para pintar 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 forma renderizada.
Você também pode pintar o traçado ou preencher uma forma com gradientes, imagens, padrões e muito mais. Para obter mais informações, consulte a Visão geral da pintura com cores sólidas e gradientes.
Formas extensíveis
As classes Line, Path, Polygon, Polylinee Rectangle têm uma propriedade Stretch. Esta propriedade determina como o conteúdo de um objeto Shape (a forma a ser desenhada) é esticado para preencher o espaço de layout do objeto Shape. O espaço de layout de um objeto Shape é a quantidade de espaço que o sistema de layout aloca para o Shape, devido a uma definição explícita de Width e Height ou devido às suas definições de HorizontalAlignment e VerticalAlignment. Para obter informações adicionais sobre layout no Windows Presentation Foundation, consulte visão geral de layout.
A propriedade Stretch usa um dos seguintes valores:
Fill: O conteúdo do objeto Shape é esticado para preencher seu espaço de layout. A proporção não é preservada.
Uniform: O conteúdo do objeto Shape é esticado tanto quanto possível para preencher seu espaço de layout, preservando sua proporção original.
UniformToFill: O conteúdo do objeto Shape é esticado para preencher completamente seu espaço de layout, preservando sua proporção original.
Observe que, quando o conteúdo de um objeto Shape é esticado, 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 Polygon e Width do objeto Height são definidos como 100 e sua propriedade stretch é definida como Fill. Como resultado, o conteúdo do objeto Polygon (o triângulo) é esticado 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), inclinaçã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 a sua 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 quiser controlar o ponto sobre o qual o elemento é girado. Esses valores de propriedade são expressos no espaço de coordenadas do elemento que está sendo transformado. CenterX e CenterY têm valores padrão de zero. Finalmente, aplique o RotateTransform ao elemento . Se você não quiser que a transformação afete o layout, defina a propriedade RenderTransform da forma.
No exemplo a seguir, uma RotateTransform é usada para girar uma forma 45 graus no canto superior esquerdo da forma (0,0).
<!-- 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 exemplo seguinte, outra forma é girada 45 graus, mas desta vez é 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.
Nos exemplos anteriores, uma única transformação foi aplicada a cada objeto de forma. Para aplicar várias transformações a uma forma (ou a qualquer outro elemento da interface do usuário), use um TransformGroup.
Ver também
- Gráficos e Imagens 2D
- Visão geral da pintura com cores sólidas e gradientes
- Visão geral da geometria
- Passo a passo: Meu primeiro aplicativo de desktop WPF
- Visão geral da animação
Colabore connosco no GitHub
A fonte deste conteúdo pode ser encontrada no GitHub, onde também pode criar e rever issues e pull requests. Para mais informações, consulte o nosso guia para colaboradores.
.NET Desktop feedback