Nota
El acceso a esta página requiere autorización. Puede intentar iniciar sesión o cambiar directorios.
El acceso a esta página requiere autorización. Puede intentar cambiar los directorios.
En este tema se proporciona información general sobre cómo dibujar con Shape objetos. Un Shape es un tipo de UIElement que permite dibujar una forma en la pantalla. Dado que son elementos de la IU, los objetos Shape se pueden utilizar dentro de elementos Panel y en la mayoría de los controles.
Windows Presentation Foundation (WPF) ofrece varias capas de acceso a gráficos y servicios de representación. En la capa superior, Shape los objetos son fáciles de usar y proporcionan muchas características útiles, como el diseño y la participación en el sistema de eventos de Windows Presentation Foundation (WPF).
Los tipos relacionados con las formas se encuentran en el espacio de nombres Windows.Shapes. Los tipos relacionados con geometría se encuentran en el System.Windows.Media espacio de nombres.
Objetos de formas
WPF proporciona una serie de objetos listos para usar Shape . Todos los objetos de forma heredan de la clase Shape. Los objetos de forma disponibles incluyen Ellipse, Line, Path, Polygon, Polyliney Rectangle. Shape los objetos comparten las siguientes propiedades comunes.
Stroke: describe cómo se pinta el contorno de la forma.
StrokeThickness: describe el grosor del contorno de la forma.
Fill: describe cómo se pinta el interior de la forma.
Propiedades de datos para especificar coordenadas y vértices, medida en píxeles independientes del dispositivo.
Dado que derivan de UIElement, los objetos de forma se pueden usar dentro de paneles y en la mayoría de controles. El Canvas panel es una opción especialmente buena para crear dibujos complejos, ya que admite el posicionamiento absoluto de los objetos secundarios.
La Line clase permite dibujar una línea entre dos puntos. En el ejemplo siguiente se muestran varias maneras de especificar coordenadas de línea y propiedades de trazo.
<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)
La imagen siguiente muestra el elemento renderizado.
Aunque la Line clase proporciona una Fill propiedad, establecerla no tiene ningún efecto porque un Line no tiene área.
Otra forma común es .Ellipse Cree un Ellipse definiendo las propiedades Width y Height de la forma. Para dibujar un círculo, especifique un Ellipse cuyos Width valores y Height sean iguales.
<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
En la imagen siguiente se indica un ejemplo de un elemento representado Ellipse.
Uso de trayectorias y geometrías
La Path clase permite dibujar curvas y formas complejas. Estas curvas y formas se describen mediante Geometry objetos . Para usar un Path, cree un Geometry y úselo para establecer la propiedad Path del objeto Data.
Hay una variedad de Geometry objetos entre los que elegir. Las LineGeometryclases , RectangleGeometryy EllipseGeometry describen formas relativamente simples. Para crear formas más complejas o curvas, use PathGeometry.
Geometría de Ruta y Segmentos de Ruta
PathGeometry Los objetos se componen de uno o varios PathFigure objetos; cada PathFigure uno representa una "figura" o forma diferente. Cada PathFigure está formado por uno o varios objetos PathSegment, cada uno representa una parte conectada de la figura o forma. Los tipos de segmento incluyen lo siguiente: LineSegment, BezierSegmenty ArcSegment.
En el ejemplo siguiente, se utiliza un Path para dibujar una curva Bezier cuadrá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>
En la imagen siguiente se muestra la forma representada.
Para obtener más información sobre PathGeometry y las otras Geometry clases, consulte La información general sobre geometría.
Sintaxis abreviada de XAML
En Lenguaje de marcado extensible de aplicaciones (XAML), también puedes usar una sintaxis abreviada especial para describir un Path. En el ejemplo siguiente, se usa la sintaxis abreviada para dibujar una forma compleja.
<Path Stroke="DarkGoldenRod" StrokeThickness="3"
Data="M 100,200 C 100,25 400,350 400,175 H 280" />
En la imagen siguiente se muestra un Path renderizado.
La cadena de atributos Data comienza con el comando "moveto", indicado por M, que establece un punto de inicio para el trazado en el sistema de coordenadas del Canvas. Path Los parámetros de datos distinguen mayúsculas de minúsculas. La M mayúscula indica una ubicación absoluta para el nuevo punto de referencia. Un m minúscula indicaría coordenadas relativas. El primer segmento es una curva Bezier cúbica a partir de (100,200) y que termina en (400,175), dibujada utilizando los dos puntos de control (100,25) y (400,350). Este segmento se indica mediante el comando C en la cadena de atributo Data. De nuevo, el capital C indica una ruta de acceso absoluta; la c minúscula indicaría una ruta de acceso relativa.
El segundo segmento comienza con un comando "lineto" horizontal absoluto H, que especifica una línea dibujada desde el punto de conexión del subcamino anterior (400, 175) a un nuevo punto de conexión (280, 175). Dado que es un comando horizontal "lineto", el valor especificado es una coordenada x.
Para obtener la sintaxis completa de la ruta, consulte la referencia Data y Crear una Forma mediante PathGeometry.
Pintar formas
Brush los objetos se usan para pintar las formas Stroke y Fill. En el ejemplo siguiente, se especifican el trazo y el relleno de un Ellipse. Tenga en cuenta que la entrada válida para las propiedades del pincel puede ser una palabra clave o un valor de color hexadecimal. Para obtener más información sobre las palabras clave de color disponibles, vea las propiedades de la Colors clase en el System.Windows.Media espacio de nombres.
<Canvas Background="LightGray">
<Ellipse
Canvas.Top="50"
Canvas.Left="50"
Fill="#FFFFFF00"
Height="75"
Width="75"
StrokeThickness="5"
Stroke="#FF0000FF"/>
</Canvas>
La imagen siguiente muestra el elemento renderizado.
Como alternativa, puede usar la sintaxis del elemento de propiedad para crear explícitamente un SolidColorBrush objeto para pintar la forma con un color sólido.
<!-- 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>
En la ilustración siguiente se muestra la forma representada.
También puede pintar el trazo de una forma o rellenarlo con degradados, imágenes, patrones, etc. Para obtener más información, vea Pintura con colores sólidos y visión general sobre degradados.
Formas estirables
Las Lineclases , Path, Polygon, Polyliney Rectangle tienen una Stretch propiedad . Esta propiedad determina cómo se extiende el contenido de un Shape objeto (la forma que se va a dibujar) para rellenar el Shape espacio de diseño del objeto. El espacio de diseño de un Shape objeto es la cantidad de espacio que el sistema de diseño asigna Shape, ya sea debido a un ajuste explícito de Width y Height, o debido a sus configuraciones de HorizontalAlignment y VerticalAlignment. Para obtener información adicional sobre el diseño en Windows Presentation Foundation, vea Información general sobre el diseño .
La propiedad Stretch toma uno de los siguientes valores:
Fill: El contenido del objeto Shape se estira para llenar su espacio de diseño. No se conserva la relación de aspecto.
Uniform: Los contenidos del objeto Shape se extienden tanto como sea posible para rellenar su espacio de diseño, conservando su relación de aspecto original.
UniformToFill: el Shape contenido del objeto se extiende para rellenar completamente su espacio de diseño, a la vez que conserva su relación de aspecto original.
Tenga en cuenta que, cuando el contenido de un objeto Shape se estira, el contorno del objeto Shape se pinta después de estirarse.
En el ejemplo siguiente, Polygon se usa para dibujar un triángulo muy pequeño de (0,0) a (0,1) a (1,1). El Polygon objeto Width y Height se establecen en 100 y su propiedad stretch se establece en Fill. Como resultado, el Polygon contenido del objeto (el triángulo) se extiende para rellenar el espacio mayor.
<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;
Transformar formas
La Transform clase proporciona los medios para transformar formas en un plano bidimensional. Los diferentes tipos de transformación incluyen rotación (RotateTransform), escala (ScaleTransform), asimetría (SkewTransform) y traducción (TranslateTransform).
Una transformación común que se va a aplicar a una forma es una rotación. Para girar una forma, cree un RotateTransform y especifique su Angle. Un Angle de 45 grados gira el elemento 45 grados en el sentido de las agujas del reloj; un ángulo de 90 grados gira el elemento 90 grados en el sentido de las agujas del reloj; y así sucesivamente. Establezca las CenterX propiedades y CenterY si desea controlar el punto sobre el que se gira el elemento. Estos valores de propiedad se expresan en el espacio de coordenadas del elemento que se va a transformar. CenterX y CenterY tienen valores predeterminados de cero. Por último, aplique el elemento RotateTransform. Si no desea que la transformación afecte al diseño, establezca la propiedad RenderTransform de la forma.
En el ejemplo siguiente, RotateTransform se usa para girar una forma de 45 grados sobre la esquina superior izquierda de la 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>
En el ejemplo siguiente, otra forma se gira 45 grados, pero esta vez se gira sobre el punto (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>
En la ilustración siguiente se muestran los resultados de aplicar las dos transformaciones.
En los ejemplos anteriores, se aplicó una sola transformación a cada objeto de forma. Para aplicar varias transformaciones a una forma (o a cualquier otro elemento de interfaz de usuario), use un TransformGroup.
Consulte también
Colaborar con nosotros en GitHub
El origen de este contenido se puede encontrar en GitHub, donde también puede crear y revisar problemas y solicitudes de incorporación de cambios. Para más información, consulte nuestra guía para colaboradores.
.NET Desktop feedback