Tvary a základní kresby v přehledu WPF
Toto téma poskytuje přehled o tom, jak kreslit s Shape objekty. A Shape je typ UIElement , který umožňuje nakreslit obrazec na obrazovku. Vzhledem k tomu, že se jedná o prvky uživatelského rozhraní, Shape lze objekty použít uvnitř Panel prvků a ve většině ovládacích prvků.
Windows Presentation Foundation (WPF) nabízí několik vrstev přístupu k grafickým a vykreslovacím službám. V horní vrstvě Shape jsou objekty snadno použitelné a poskytují mnoho užitečných funkcí, jako je rozložení a účast v systému událostí Windows Presentation Foundation (WPF).
Objekty obrazce
WPF poskytuje řadu objektů připravených k použití Shape . Všechny objekty obrazce dědí z Shape třídy. Mezi dostupné objekty obrazce patří Ellipse, , LinePath, Polygon, Polyline, a Rectangle. Shape objekty sdílejí následující společné vlastnosti.
Stroke: Popisuje, jak je obrys obrazce malován.
StrokeThickness: Popisuje tloušťku obrysu obrazce.
Fill: Popisuje, jak je interiér obrazce malován.
Datové vlastnosti, které určují souřadnice a vrcholy měřené v pixelech nezávislých na zařízeních.
Vzhledem k tomu, že se odvozují z UIElementobjektu obrazce, lze použít uvnitř panelů a většiny ovládacích prvků. Panel Canvas je zvlášť dobrou volbou pro vytváření složitých výkresů, protože podporuje absolutní umístění podřízených objektů.
Třída Line umožňuje nakreslit čáru mezi dvěma body. Následující příklad ukazuje několik způsobů, jak určit souřadnice čáry a vlastnosti tahu.
<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)
Následující obrázek znázorňuje vykreslené Line.
Line I když třída poskytuje Fill vlastnost, nastavení nemá žádný vliv, protože Line nemá žádnou oblast.
Dalším běžným tvarem Ellipseje . Vytvořte objekt Ellipse definováním vlastností a Height vlastností obrazceWidth. Chcete-li nakreslit kruh, zadejte Ellipse , jehož Width a Height hodnoty jsou stejné.
<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
Následující obrázek ukazuje příklad vykresleného Ellipsesouboru .
Použití cest a geometrií
Třída Path umožňuje kreslit křivky a složité obrazce. Tyto křivky a obrazce jsou popsány pomocí Geometry objektů. Chcete-li použít Path, vytvoříte Geometry a použijete ho k nastavení vlastnosti objektu PathData .
Existuje celá řada Geometry objektů, ze které si můžete vybrat. Třídy LineGeometrya , RectangleGeometryEllipseGeometry popis relativně jednoduché obrazce. Chcete-li vytvořit složitější obrazce nebo vytvořit křivky, použijte .PathGeometry
PathGeometry a PathSegments
PathGeometry objekty se skládají z jednoho nebo více PathFigure objektů; každý PathFigure představuje jiný "obrázek" nebo obrazec. Každý PathFigure se skládá z jednoho nebo více PathSegment objektů, z nichž každý představuje propojenou část obrázku nebo obrazce. Mezi typy segmentů patří: LineSegment, BezierSegmenta ArcSegment.
V následujícím příkladu Path se používá k vykreslení kvadratické Bezierovy křivky.
<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>
Následující obrázek znázorňuje vykreslený obrazec.
Další informace o PathGeometry třídách a dalších Geometry třídách naleznete v přehledu geometrie.
Zkrácená syntaxe XAML
V jazyku XAML (Extensible Application Markup Language) můžete k popisu Pathpoužít také speciální zkrácenou syntaxi . V následujícím příkladu se zkrácená syntaxe používá k vykreslení složitého obrazce.
<Path Stroke="DarkGoldenRod" StrokeThickness="3"
Data="M 100,200 C 100,25 400,350 400,175 H 280" />
Následující obrázek znázorňuje vykreslené Path.
Řetězec Data atributu začíná příkazem "moveto" označeným jazykem M, který vytvoří počáteční bod pro cestu v souřadnicovém systému Canvas. Path u parametrů dat se rozlišují malá a velká písmena. Velké písmeno M označuje absolutní umístění nového aktuálního bodu. Malá písmena m by označovala relativní souřadnice. První segment je krychlová bezierová křivka počínaje (100 200) a končící na (400 175), nakreslený pomocí dvou kontrolních bodů (100 25) a (400 350). Tento segment je označen příkazem jazyka C v řetězci atributu Data . Opět, velká C označuje absolutní cestu; malá písmena c by označovala relativní cestu.
Druhý segment začíná absolutním vodorovným příkazem "lineto" H, který určuje čáru nakreslenou z koncového bodu předchozí dílčí cesty (400 175) do nového koncového bodu (280 175). Vzhledem k tomu, že se jedná o vodorovný příkaz lineto, je zadaná hodnota souřadnice x.
Úplnou syntaxi cesty najdete v Data odkazu a vytvoření obrazce pomocí PathGeometry.
Malování obrazců
Brush objekty se používají k malování obrazce Stroke a Fill. V následujícím příkladu jsou zadány tahy a výplně.Ellipse Všimněte si, že platným vstupem vlastností štětce může být klíčové slovo nebo šestnáctková hodnota barvy. Další informace o dostupných barevných klíčových slovech naleznete ve vlastnostech Colors třídy v System.Windows.Media oboru názvů.
<Canvas Background="LightGray">
<Ellipse
Canvas.Top="50"
Canvas.Left="50"
Fill="#FFFFFF00"
Height="75"
Width="75"
StrokeThickness="5"
Stroke="#FF0000FF"/>
</Canvas>
Následující obrázek znázorňuje vykreslené Ellipse.
Případně můžete použít syntaxi elementu vlastnosti k explicitní vytvoření SolidColorBrush objektu pro vykreslení obrazce plnou barvou.
<!-- 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>
Následující obrázek znázorňuje vykreslený obrazec.
Můžete také nakreslit tah obrazce nebo vyplnit přechody, obrázky, vzory a další. Další informace najdete v tématu Malování s přehledem plných barev a přechodů.
Roztažené obrazce
Všechny Linetřídy , , Path, PolygonPolylinea Rectangle třídy mají Stretch vlastnost. Tato vlastnost určuje, jak Shape je obsah objektu (obrazec, který se má nakreslit), roztažený tak, aby vyplnil Shape prostor rozložení objektu. Prostor Shape rozložení objektu je velikost prostoru, který Shape je přidělen systémem rozložení, a to z důvodu explicitního Width a Height nastavení nebo z důvodu jeho HorizontalAlignment a VerticalAlignment nastavení. Další informace o rozložení ve Windows Presentation Foundation naleznete v tématu Přehled rozložení .
Vlastnost Stretch má jednu z následujících hodnot:
Fill: Obsah Shape objektu je roztažený tak, aby vyplnil prostor rozložení. Poměr stran se nezachová.
Uniform: Obsah Shape objektu je roztažen co nejvíce, aby vyplnil prostor rozložení při zachování původního poměru stran.
UniformToFill: Obsah Shape objektu je roztažený tak, aby zcela vyplnil prostor rozložení při zachování původního poměru stran.
Všimněte si, že při Shape roztažení Shape obsahu objektu je obrys objektu vykreslen po roztažení.
V následujícím příkladu Polygon se používá k vykreslení velmi malého trojúhelníku od (0,0) do (0,1) do (1,1). Objekty PolygonWidth a Height jsou nastaveny na hodnotu 100 a jeho roztažená vlastnost je nastavena na Fill. V důsledku toho Polygon se obsah objektu (trojúhelník) roztáhne, aby vyplnil větší prostor.
<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;
Transformace obrazců
Třída Transform poskytuje prostředky pro transformaci obrazců v dvojrozměrné rovině. Mezi různé typy transformace patří otočení (RotateTransform), měřítko (ScaleTransform), nerovnoměrná distribuce (SkewTransform) a překlad (TranslateTransform).
Běžnou transformací, která se použije u obrazce, je otočení. Pokud chcete obrazec otočit, vytvořte RotateTransform a zadejte jeho Angle. Angle 45 otočí prvek o 45 stupňů po směru hodinových ručiček; úhel 90 stupňů otočí prvek o 90 stupňů ve směru hodinových ručiček a tak dále. CenterX Nastavte a CenterY vlastnosti, pokud chcete řídit bod, o kterém je prvek otočen. Tyto hodnoty vlastností jsou vyjádřeny v souřadnicovém prostoru transformovaného prvku. CenterX a CenterY mají výchozí hodnoty nula. Nakonec použijte prvek RotateTransform . Pokud nechcete, aby transformace ovlivnila rozložení, nastavte vlastnost obrazce RenderTransform .
V následujícím příkladu RotateTransform se používá k otočení obrazce o 45 stupňů o levém horním rohu obrazce (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>
V dalším příkladu je jiný obrazec otočený o 45 stupňů, ale tentokrát se otočí o bod (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>
Následující obrázek znázorňuje výsledky použití těchto dvou transformací.
V předchozích příkladech se na každý objekt obrazce použila jedna transformace. Chcete-li použít více transformací na obrazec (nebo jakýkoli jiný prvek uživatelského rozhraní), použijte TransformGroup.
Viz také
.NET Desktop feedback
Váš názor
Připravujeme: V průběhu roku 2024 budeme postupně vyřazovat problémy z GitHub coby mechanismus zpětné vazby pro obsah a nahrazovat ho novým systémem zpětné vazby. Další informace naleznete v tématu: https://aka.ms/ContentUserFeedback.
Odeslat a zobrazit názory pro