Cenni preliminari sugli oggetti Shape e sulle funzionalità di disegno di base di WPF
In questo argomento viene fornita una panoramica di come disegnare con Shape gli oggetti . Un Shape è un tipo di che consente di UIElement disegnare una forma sullo schermo. Poiché sono elementi dell'interfaccia utente, Shape gli oggetti possono essere usati all'interno Panel di elementi e la maggior parte dei controlli.
Windows Presentation Foundation (WPF) offre diversi livelli di accesso ai servizi di grafica e rendering. Al livello superiore, Shape gli oggetti sono facili da usare e forniscono molte funzionalità utili, ad esempio layout e partecipazione al sistema di eventi Windows Presentation Foundation (WPF).
Oggetti Shape
WPF offre una serie di oggetti pronti per l'uso Shape . Tutti gli oggetti shape ereditano dalla Shape classe . Gli oggetti shape disponibili includono Ellipse, LinePath, Polygon, , Polylinee Rectangle. Shape gli oggetti condividono le proprietà comuni seguenti.
Stroke: descrive il modo in cui viene disegnato il contorno della forma.
StrokeThickness: descrive lo spessore del contorno della forma.
Fill: descrive come viene dipinto l'interno della forma.
Proprietà dei dati per specificare coordinate e vertici, misurati in pixel indipendenti dal dispositivo.
Poiché derivano da UIElement, gli oggetti shape possono essere usati all'interno di pannelli e la maggior parte dei controlli. Il Canvas pannello è una scelta particolarmente buona per la creazione di disegni complessi perché supporta il posizionamento assoluto dei suoi oggetti figlio.
La Line classe consente di disegnare una linea tra due punti. L'esempio seguente illustra molti modi per specificare le coordinate della riga e le proprietà del tratto.
<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)
L'immagine seguente mostra il rendering di Line.
Anche se la Line classe fornisce una Fill proprietà, l'impostazione non ha alcun effetto perché non ha un'area Line .
Un'altra forma comune è .Ellipse Creare un oggetto Ellipse definendo le proprietà e Height della Width forma. Per disegnare un cerchio, specificare un oggetto i Ellipse cui Width valori e Height sono uguali.
<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
L'immagine seguente mostra un esempio di rendering di Ellipse.
Utilizzo di tracciati e geometrie
La Path classe consente di disegnare curve e forme complesse. Queste curve e forme vengono descritte utilizzando Geometry oggetti . Per usare un Pathoggetto , creare un oggetto Geometry e usarlo per impostare la Path proprietà dell'oggetto Data .
Sono disponibili diversi Geometry oggetti tra cui scegliere. Le LineGeometryclassi , RectangleGeometrye EllipseGeometry descrivono forme relativamente semplici. Per creare forme più complesse o creare curve, utilizzare un oggetto PathGeometry.
PathGeometry e PathSegments
PathGeometry gli oggetti sono costituiti da uno o più PathFigure oggetti, ognuno PathFigure rappresenta una diversa "figura" o forma. Ognuno PathFigure è costituito da uno o più PathSegment oggetti, ognuno dei quali rappresenta una parte connessa della figura o della forma. I tipi di segmento includono i seguenti: LineSegment, BezierSegmente ArcSegment.
Nell'esempio seguente viene usato un Path oggetto per disegnare una curva di Bézier quadratica.
<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>
L'immagine seguente illustra la forma sottoposta a rendering.
Per altre informazioni su PathGeometry e sulle altre Geometry classi, vedere Cenni preliminari sulla geometria.
Sintassi abbreviata XAML
In Extensible Application Markup Language (XAML) puoi anche usare una sintassi abbreviata speciale per descrivere un oggetto Path. Nell'esempio seguente viene usata la sintassi abbreviata per disegnare una forma complessa.
<Path Stroke="DarkGoldenRod" StrokeThickness="3"
Data="M 100,200 C 100,25 400,350 400,175 H 280" />
L'immagine seguente mostra un oggetto di cui è stato Patheseguito il rendering.
La Data stringa dell'attributo inizia con il comando "moveto", indicato da M, che stabilisce un punto iniziale per il percorso nel sistema di coordinate dell'oggetto Canvas. Path i parametri di dati fanno distinzione tra maiuscole e minuscole. La lettera M maiuscola indica un percorso assoluto per il nuovo punto corrente. Una lettera m minuscola indica le coordinate relative. Il primo segmento è una curva di Bézier cubica che inizia in corrispondenza del punto (100,200) e termina in corrispondenza del punto (400,175) e viene disegnata usando i due punti di controllo (100,25) e (400,350). Questo segmento è indicato dal comando C nella stringa dell'attributo Data . Anche in questo caso la lettera C maiuscola indica un percorso assoluto, mentre la lettera c minuscola indica un percorso relativo.
Il secondo segmento inizia con un comando orizzontale assoluto "lineto" H, che specifica una riga disegnata dal punto finale del sottopercorso precedente (400,175) a un nuovo punto finale (280,175). Poiché si tratta di un comando orizzontale "lineto", il valore specificato è una coordinata x.
Per la sintassi del percorso completa, vedere il Data riferimento e Creare una forma usando pathGeometry.
Disegno di oggetti Shape
Brush gli oggetti vengono utilizzati per disegnare le proprietà di Stroke una forma e Fill. Nell'esempio seguente vengono specificati il tratto e il riempimento di un oggetto Ellipse . Si noti che un input valido per le proprietà del pennello può essere rappresentato da una parola chiave o da un valore di colore esadecimale. Per altre informazioni sulle parole chiave color disponibili, vedere proprietà della Colors classe nello spazio dei System.Windows.Media nomi .
<Canvas Background="LightGray">
<Ellipse
Canvas.Top="50"
Canvas.Left="50"
Fill="#FFFFFF00"
Height="75"
Width="75"
StrokeThickness="5"
Stroke="#FF0000FF"/>
</Canvas>
L'immagine seguente mostra il rendering di Ellipse.
In alternativa, è possibile utilizzare la sintassi degli elementi proprietà per creare in modo esplicito un SolidColorBrush oggetto per disegnare la forma con un colore a tinta unita.
<!-- 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>
La figura seguente mostra la forma sottoposta a rendering.
È anche possibile disegnare il tratto o il riempimento di una forma con sfumature, immagini, motivi e così via. Per altre informazioni, vedere Cenni sul disegno con colori a tinta unita e sfumature.
Oggetti Shape allungabili
Le Lineclassi , PolygonPath, Polyline, e Rectangle hanno tutte una Stretch proprietà . Questa proprietà determina il modo in cui il contenuto di un Shape oggetto (la forma da disegnare) viene esteso per riempire lo Shape spazio di layout dell'oggetto. Lo spazio di layout di un Shape oggetto è la quantità di spazio Shape allocata dal sistema di layout, a causa di un'impostazione esplicita Width e Height o a causa delle relative HorizontalAlignment impostazioni e VerticalAlignment . Per altre informazioni sul layout in Windows Presentation Foundation, vedere cenni preliminari sul layout.
La proprietà Stretch accetta uno dei valori seguenti:
Fill: il Shape contenuto dell'oggetto viene esteso per riempirne lo spazio di layout. Le proporzioni non vengono mantenute.
Uniform: il Shape contenuto dell'oggetto viene esteso il più possibile per riempire lo spazio di layout mantenendo le proporzioni originali.
UniformToFill: il Shape contenuto dell'oggetto viene esteso fino a riempire completamente lo spazio di layout mantenendo le proporzioni originali.
Si noti che, quando il contenuto di un Shape oggetto viene esteso, il Shape contorno dell'oggetto viene disegnato dopo l'estensione.
Nell'esempio seguente viene usato un oggetto Polygon per disegnare un triangolo molto piccolo da (0,0) a (0,1) a (1,1). L'oggetto PolygonWidth e Height sono impostati su 100 e la relativa proprietà stretch è impostata su Fill. Di conseguenza, il Polygon contenuto dell'oggetto (il triangolo) viene esteso per riempire lo spazio più grande.
<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;
Trasformazione degli oggetti Shape
La Transform classe fornisce i mezzi per trasformare le forme in un piano bidimensionale. I diversi tipi di trasformazione includono rotazione (RotateTransform), scala (ScaleTransform), asimmetria (SkewTransform) e traslazione (TranslateTransform).
Una trasformazione comune da applicare a una forma è una rotazione. Per ruotare una forma, creare un RotateTransform oggetto e specificarne Angle. Un Angle oggetto di 45 ruota l'elemento 45 gradi in senso orario; un angolo di 90 ruota l'elemento 90 gradi in senso orario e così via. Impostare le CenterX proprietà e CenterY se si desidera controllare il punto su cui viene ruotato l'elemento. Questi valori di proprietà sono espressi nello spazio delle coordinate dell'elemento trasformato. CenterX e CenterY hanno valori predefiniti pari a zero. Infine, applicare l'oggetto RotateTransform all'elemento . Se non si desidera che la trasformazione influisca sul layout, impostare la proprietà della RenderTransform forma.
Nell'esempio seguente viene utilizzato un RotateTransform oggetto per ruotare una forma di 45 gradi circa l'angolo superiore sinistro della 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>
Nell'esempio successivo un'altra forma viene ruotata di 45 gradi, ma in questo caso rispetto al 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>
L'immagine seguente illustra i risultati dell'applicazione delle due trasformazioni.
Negli esempi precedenti è stata applicata una sola trasformazione a ogni oggetto Shape. Per applicare più trasformazioni a una forma (o a qualsiasi altro elemento dell'interfaccia utente), usare un oggetto TransformGroup.
Vedi anche
.NET Desktop feedback
Commenti e suggerimenti
Presto disponibile: Nel corso del 2024 verranno gradualmente disattivati i problemi di GitHub come meccanismo di feedback per il contenuto e ciò verrà sostituito con un nuovo sistema di feedback. Per altre informazioni, vedere https://aka.ms/ContentUserFeedback.
Invia e visualizza il feedback per