Not
Åtkomst till den här sidan kräver auktorisering. Du kan prova att logga in eller ändra kataloger.
Åtkomst till den här sidan kräver auktorisering. Du kan prova att ändra kataloger.
Det här avsnittet ger en översikt över hur du ritar med Shape objekt. En Shape är en typ av UIElement som gör att du kan rita en form på skärmen. Eftersom de är gränssnittselement kan Shape objekt användas i Panel element och de flesta kontroller.
Windows Presentation Foundation (WPF) erbjuder flera lager av åtkomst till grafik- och renderingstjänster. På det översta lagret är Shape objekt enkla att använda och ger många användbara funktioner, till exempel layout och deltagande i händelsesystemet i Windows Presentation Foundation (WPF).
Formrelaterade typer finns i namnområdet Windows.Shapes. Geometrirelaterade typer finns i System.Windows.Media namnrymd.
Formobjekt
WPF innehåller ett antal färdiga Shape objekt. Alla formobjekt ärver från klassen Shape. Tillgängliga formobjekt är Ellipse, Line, Path, Polygon, Polylineoch Rectangle. Shape objekt delar följande vanliga egenskaper.
Stroke: Beskriver hur formens kontur målas.
StrokeThickness: Beskriver tjockleken på formens kontur.
Fill: Beskriver hur formens inre målas.
Dataegenskaper för att ange koordinater och hörn, mätt i enhetsoberoende bildpunkter.
Eftersom de härleds från UIElementkan formobjekt användas inuti paneler och de flesta kontroller. Panelen Canvas är ett särskilt bra val för att skapa komplexa ritningar eftersom den stöder absolut placering av sina barnobjekt.
Med klassen Line kan du rita en linje mellan två punkter. I följande exempel visas flera sätt att ange linjekoordinater och linjeegenskaper.
<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)
Följande bild visar den renderade Line.
Även om klassen Line tillhandahåller en egenskap för Fill, har inställningen ingen effekt eftersom en Line inte har något område.
En annan vanlig form är Ellipse. Skapa en Ellipse genom att definiera formens egenskaper för Width och Height. Om du vill rita en cirkel anger du en Ellipse vars Width och Height värden är lika.
<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
Följande bild visar ett exempel på en renderad Ellipse.
Använda sökvägar och geometrier
Med klassen Path kan du rita kurvor och komplexa former. Dessa kurvor och former beskrivs med hjälp av Geometry objekt. Om du vill använda en Pathskapar du en Geometry och använder den för att ange Path-objektets egenskap Data.
Det finns en mängd olika Geometry objekt att välja mellan. Klasserna LineGeometry, RectangleGeometryoch EllipseGeometry beskriver relativt enkla former. Om du vill skapa mer komplexa former eller skapa kurvor använder du en PathGeometry.
PathGeometry och PathSegments
PathGeometry objekt består av ett eller flera PathFigure objekt. varje PathFigure representerar en annan "figur" eller form. Varje PathFigure består av ett eller flera PathSegment objekt, som var och en representerar en ansluten del av figuren eller formen. Segmenttyperna omfattar följande: LineSegment, BezierSegmentoch ArcSegment.
I följande exempel används en Path för att rita en kvadratisk Bezier-kurva.
<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>
Följande bild visar den renderade formen.
Mer information om PathGeometry och de andra Geometry klasserna finns i översikten över geometri.
XAML-förkortad syntax
I XAML (Extensible Application Markup Language) kan du också använda en särskild förkortad syntax för att beskriva en Path. I följande exempel används förkortad syntax för att rita en komplex form.
<Path Stroke="DarkGoldenRod" StrokeThickness="3"
Data="M 100,200 C 100,25 400,350 400,175 H 280" />
Följande bild visar en renderad Path.
Den Data attributsträngen börjar med kommandot "moveto", som anges av M, som upprättar en startpunkt för sökvägen i koordinatsystemet för Canvas. Path dataparametrar är skiftlägeskänsliga. Versalt M anger en absolut plats för den nya aktuella punkten. Ett litet m skulle indikera relativa koordinater. Det första segmentet är en kubisk Bezier-kurva som börjar på (100 200) och slutar på (400 175), ritad med hjälp av de två kontrollpunkterna (100,25) och (400 350). Det här segmentet anges av C-kommandot i Data-attributsträngen. Återigen anger versalt C en absolut sökväg; gemen c skulle indikera en relativ sökväg.
Det andra segmentet börjar med det absoluta horisontella kommandot "lineto" H, vilket specificerar en linje som dras från den föregående delvägens slutpunkt (400,175) till en ny slutpunkt (280,175). Eftersom det är ett vågrätt "lineto"-kommando är det angivna värdet en x-koordinat.
För den fullständiga sökvägssyntaxen, se referensen för Data och Skapa en form med hjälp av en PathGeometry.
Måla former
Brush objekt används för att måla en forms Stroke och Fill. I följande exempel anges kontur och fyllning för en Ellipse. Observera att giltiga indata för penselegenskaper kan vara antingen ett nyckelord eller hexadecimalt färgvärde. Mer information om tillgängliga färgnyckelord finns i egenskaperna för klassen Colors i System.Windows.Media namnrymd.
<Canvas Background="LightGray">
<Ellipse
Canvas.Top="50"
Canvas.Left="50"
Fill="#FFFFFF00"
Height="75"
Width="75"
StrokeThickness="5"
Stroke="#FF0000FF"/>
</Canvas>
Följande bild visar den renderade Ellipse.
Du kan också använda egenskapselementsyntax för att uttryckligen skapa ett SolidColorBrush objekt för att måla formen med en solid färg.
<!-- 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>
Följande bild visar den renderade formen.
Du kan också måla en forms kontur eller fyllning med toningar, bilder, mönster och mer. För mer information, se Målning med enhetliga färger och gradienter översikt.
Formbara former
Klasserna Line, Path, Polygon, Polylineoch Rectangle har alla en egenskap Stretch. Den här egenskapen avgör hur ett Shape objekts innehåll (formen som ska ritas) sträcks ut för att fylla Shape-objektets layoututrymme. Ett Shape objekts layoututrymme är mängden utrymme som Shape allokeras av layoutsystemet, antingen på grund av en explicit Width och Height inställning eller på grund av dess HorizontalAlignment och VerticalAlignment inställningar. Mer information om layout i Windows Presentation Foundation finns i Layout översikt.
Egenskapen Stretch tar något av följande värden:
Fill: Innehållet i Shape-objektet sträcks ut för att fylla sitt layoututrymme. Bildförhållande bevaras inte.
Uniform: Innehållet i Shape-objektet sträcks ut så mycket som möjligt för att fylla dess layoututrymme, samtidigt som de ursprungliga proportionerna bevaras.
UniformToFill: Innehållet i det Shape-objektet sträcks ut för att helt fylla layoututrymmet, samtidigt som dess ursprungliga proportion bevaras.
Observera att när ett Shape objekts innehåll sträcks ut målas Shape-objektets kontur efter utsträckningen.
I följande exempel används en Polygon för att rita en mycket liten triangel från (0,0) till (0,1) till (1,1). Polygon-objektets Width och Height är inställda på 100 och dess stretchegenskap är inställd på Fyllning. Därför sträcks Polygon objektets innehåll (triangeln) ut för att fylla det större utrymmet.
<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;
Former i förändring
Klassen Transform ger möjlighet att transformera former i ett tvådimensionellt plan. De olika typerna av transformering omfattar rotation (RotateTransform), skala (ScaleTransform), skevhet (SkewTransform) och översättning (TranslateTransform).
En vanlig transformering som ska tillämpas på en form är en rotation. Om du vill rotera en form skapar du en RotateTransform och anger dess Angle. Ett Angle på 45 roterar elementet 45 grader medsols. en vinkel på 90 roterar elementet 90 grader medsols; och så vidare. Ange egenskaperna CenterX och CenterY om du vill styra den punkt där elementet roteras. Dessa egenskapsvärden uttrycks i koordinatutrymmet för elementet som transformeras. CenterX och CenterY har standardvärdena noll. Tillämpa slutligen RotateTransform på elementet. Om du inte vill att transformeringen ska påverka layouten anger du formens RenderTransform egenskap.
I följande exempel används en RotateTransform för att rotera en form 45 grader om formens övre vänstra hörn (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>
I nästa exempel roteras en annan form 45 grader, men den här gången roteras den om punkten (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>
Följande bild visar resultatet av att tillämpa de två transformeringarna.
I föregående exempel tillämpades en enda transformering på varje formobjekt. Om du vill använda flera transformeringar på en form (eller något annat gränssnittselement) använder du en TransformGroup.
Se även
Samarbeta med oss på GitHub
Källan för det här innehållet finns på GitHub, där du också kan skapa och granska problem och pull-begäranden. Mer information finns i vår deltagarguide.
.NET Desktop feedback