Bentuk dan Gambar Dasar di Gambaran Umum WPF
Topik ini memberikan gambaran umum tentang cara menggambar dengan Shape objek. Shape adalah jenis UIElement yang memungkinkan Anda menggambar bentuk ke layar. Karena merupakan elemen UI, Shape objek dapat digunakan di dalam Panel elemen dan sebagian besar kontrol.
Windows Presentation Foundation (WPF) menawarkan beberapa lapisan akses ke layanan grafis dan penyajian. Di lapisan atas, Shape objek mudah digunakan dan menyediakan banyak fitur yang berguna, seperti tata letak dan partisipasi dalam sistem acara Windows Presentation Foundation (WPF).
Objek Bentuk
WPF menyediakan sejumlah objek siap pakai Shape . Semua objek bentuk mewarisi dari Shape kelas . Objek bentuk yang tersedia meliputi Ellipse, Line, Path, Polygon, Polyline, dan Rectangle. Shape objek berbagi properti umum berikut.
Stroke: Menjelaskan bagaimana kerangka bentuk dicat.
StrokeThickness: Menjelaskan ketebalan kerangka bentuk.
Fill: Menjelaskan bagaimana interior bentuk dicat.
Properti data untuk menentukan koordinat dan simpul, diukur dalam piksel independen perangkat.
Karena berasal dari UIElement, objek bentuk dapat digunakan di dalam panel dan sebagian besar kontrol. Panel Canvas adalah pilihan yang sangat baik untuk membuat gambar yang kompleks karena mendukung posisi absolut objek anaknya.
Kelas ini Line memungkinkan Anda menggambar garis di antara dua titik. Contoh berikut menunjukkan beberapa cara untuk menentukan koordinat garis dan properti goresan.
<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)
Gambar berikut menunjukkan yang dirender Line.
Line Meskipun kelas menyediakan Fill properti, pengaturan tidak berpengaruh karena Line tidak memiliki area.
Bentuk umum lainnya adalah Ellipse. Ellipse Buat dengan menentukan properti dan Height bentukWidth. Untuk menggambar lingkaran, tentukan nilai Ellipse dan Height yang Width sama.
<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
Gambar berikut menunjukkan contoh yang dirender Ellipse.
Menggunakan Jalur dan Geometri
Kelas ini Path memungkinkan Anda menggambar kurva dan bentuk kompleks. Kurva dan bentuk ini dijelaskan menggunakan Geometry objek. Untuk menggunakan Path, Anda membuat Geometry dan menggunakannya untuk mengatur Path properti objek Data .
Ada berbagai Geometry objek untuk dipilih. Kelas LineGeometry, RectangleGeometry, dan EllipseGeometry menggambarkan bentuk yang relatif sederhana. Untuk membuat bentuk yang lebih kompleks atau membuat kurva, gunakan PathGeometry.
PathGeometry dan PathSegments
PathGeometry objek terdiri dari satu atau beberapa PathFigure objek; masing-masing PathFigure mewakili "gambar" atau bentuk yang berbeda. Masing-masing PathFigure terdiri dari satu atau beberapa PathSegment objek, masing-masing mewakili bagian yang terhubung dari gambar atau bentuk. Jenis segmen mencakup yang berikut ini: LineSegment, BezierSegment, dan ArcSegment.
Dalam contoh berikut, Path digunakan untuk menggambar kurva Bezier kuadrat.
<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>
Gambar berikut menunjukkan bentuk yang dirender.
Untuk informasi selengkapnya tentang PathGeometry dan kelas lainnya Geometry , lihat Gambaran Umum Geometri.
Sintaksis singkatan XAML
Dalam Extensible Application Markup Language (XAML), Anda juga dapat menggunakan sintaksis singkatan khusus untuk menggambarkan Path. Dalam contoh berikut, sintaks yang disingkat digunakan untuk menggambar bentuk kompleks.
<Path Stroke="DarkGoldenRod" StrokeThickness="3"
Data="M 100,200 C 100,25 400,350 400,175 H 280" />
Gambar berikut menunjukkan yang dirender Path.
String Data atribut dimulai dengan perintah "moveto", yang ditunjukkan oleh M, yang menetapkan titik awal untuk jalur dalam sistem Canvaskoordinat . Path parameter data peka huruf besar/kecil. Ibu kota M menunjukkan lokasi absolut untuk titik baru saat ini. Huruf kecil m akan menunjukkan koordinat relatif. Segmen pertama adalah kurva Bezier kubik yang dimulai pada (100.200) dan berakhir pada (400.175), digambar menggunakan dua titik kontrol (100.25) dan (400.350). Segmen ini ditunjukkan oleh perintah C dalam Data string atribut. Sekali lagi, modal C menunjukkan jalur absolut; huruf kecil c akan menunjukkan jalur relatif.
Segmen kedua dimulai dengan perintah "lineto" horizontal absolut H, yang menentukan garis yang digambar dari titik akhir subpath sebelumnya (400.175) ke titik akhir baru (280.175). Karena merupakan perintah "lineto" horizontal, nilai yang ditentukan adalah koordinat x.
Untuk sintaks jalur lengkap, lihat Data referensi dan Buat Bentuk dengan Menggunakan PathGeometry.
Bentuk Lukisan
Brush objek digunakan untuk melukis bentuk Stroke dan Fill. Dalam contoh berikut, goresan Ellipse dan isi ditentukan. Perhatikan bahwa input yang valid untuk properti kuas dapat berupa kata kunci atau nilai warna heksadesimal. Untuk informasi selengkapnya tentang kata kunci warna yang tersedia, lihat properti Colors kelas di System.Windows.Media namespace.
<Canvas Background="LightGray">
<Ellipse
Canvas.Top="50"
Canvas.Left="50"
Fill="#FFFFFF00"
Height="75"
Width="75"
StrokeThickness="5"
Stroke="#FF0000FF"/>
</Canvas>
Gambar berikut menunjukkan yang dirender Ellipse.
Atau, Anda dapat menggunakan sintaks elemen properti untuk secara eksplisit membuat SolidColorBrush objek untuk melukis bentuk dengan warna solid.
<!-- 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>
Ilustrasi berikut menunjukkan bentuk yang dirender.
Anda juga dapat melukis goresan bentuk atau mengisi dengan gradien, gambar, pola, dan banyak lagi. Untuk informasi selengkapnya, lihat Gambaran Umum Melukis dengan Warna Solid dan Gradien.
Bentuk yang Dapat Direntangkan
Kelas Line, , PolygonPath, Polyline, dan Rectangle semuanya memiliki Stretch properti . Properti ini menentukan bagaimana Shape konten objek (bentuk yang akan digambar) direntangkan untuk mengisi Shape ruang tata letak objek. Ruang Shape tata letak objek adalah jumlah ruang yang Shape dialokasikan oleh sistem tata letak, karena eksplisit Width dan Height pengaturan atau karena pengaturan dannya HorizontalAlignmentVerticalAlignment . Untuk informasi tambahan tentang tata letak di Windows Presentation Foundation, lihat Gambaran umum tata letak .
Properti Stretch mengambil salah satu nilai berikut:
Fill: Konten Shape objek direntangkan untuk mengisi ruang tata letaknya. Rasio aspek tidak dipertahankan.
Uniform: Konten Shape objek direntangkan sebanyak mungkin untuk mengisi ruang tata letaknya sambil mempertahankan rasio aspek aslinya.
UniformToFill: Konten Shape objek direntangkan untuk sepenuhnya mengisi ruang tata letaknya sambil mempertahankan rasio aspek aslinya.
Perhatikan bahwa, ketika Shape konten objek direntangkan, Shape kerangka objek dicat setelah peregangan.
Dalam contoh berikut, Polygon digunakan untuk menggambar segitiga yang sangat kecil dari (0,0) hingga (0,1) hingga (1,1). Objek PolygonWidth dan Height diatur ke 100, dan properti stretch-nya diatur ke Isi. Akibatnya, Polygon konten objek (segitiga) direntangkan untuk mengisi ruang yang lebih besar.
<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;
Mengubah Bentuk
Kelas ini Transform menyediakan sarana untuk mengubah bentuk dalam bidang dua dimensi. Berbagai jenis transformasi termasuk rotasi (RotateTransform), skala (ScaleTransform), condong (SkewTransform), dan terjemahan (TranslateTransform).
Transformasi umum untuk diterapkan ke bentuk adalah rotasi. Untuk memutar bentuk, buat RotateTransform dan tentukan Angle. Dari Angle 45 memutar elemen 45 derajat searah jarum jam; sudut 90 memutar elemen 90 derajat searah jarum jam; dan sebagainya. Atur CenterX properti dan CenterY jika Anda ingin mengontrol titik di mana elemen diputar. Nilai properti ini dinyatakan dalam ruang koordinat elemen yang diubah. CenterX dan CenterY memiliki nilai default nol. Terakhir, terapkan ke RotateTransform elemen . Jika Anda tidak ingin transformasi memengaruhi tata letak, atur properti bentuk RenderTransform .
Dalam contoh berikut, RotateTransform digunakan untuk memutar bentuk 45 derajat tentang sudut kiri atas bentuk (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>
Dalam contoh berikutnya, bentuk lain diputar 45 derajat, tetapi kali ini diputar sekitar titik (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>
Ilustrasi berikut menunjukkan hasil penerapan dua transformasi.
Dalam contoh sebelumnya, satu transformasi diterapkan ke setiap objek bentuk. Untuk menerapkan beberapa transformasi ke bentuk (atau elemen UI lainnya), gunakan TransformGroup.
Baca juga
.NET Desktop feedback
Saran dan Komentar
Segera hadir: Sepanjang tahun 2024 kami akan menghentikan penggunaan GitHub Issues sebagai mekanisme umpan balik untuk konten dan menggantinya dengan sistem umpan balik baru. Untuk mengetahui informasi selengkapnya, lihat: https://aka.ms/ContentUserFeedback.
Kirim dan lihat umpan balik untuk