WPF - Grafik 2D

WPF menyediakan berbagai grafik 2D yang dapat ditingkatkan sesuai kebutuhan aplikasi Anda. WPF mendukung objek Drawing dan Shape yang digunakan untuk menggambar konten grafis.

Bentuk dan Gambar

• Kelas Shape diturunkan dari kelas FrameworkElement, objek Shape dapat digunakan di dalam panel dan sebagian besar kontrol.

• WPF menyediakan beberapa objek bentuk dasar yang diturunkan dari kelas Shape seperti Ellipse, Line, Path, Polygon, Polyline, dan Rectangle.

• Menggambar objek, di sisi lain, tidak berasal dari kelas FrameworkElement dan menyediakan implementasi yang lebih ringan.

• Objek menggambar lebih sederhana dibandingkan dengan objek Shape. Mereka juga memiliki karakteristik kinerja yang lebih baik.

Contoh

Mari kita ambil contoh sederhana untuk memahami bagaimana menggunakan objek bentuk yang berbeda.

• Buat proyek WPF baru dengan nama WPF2DGraphics.

• Kode berikut membuat berbagai jenis bentuk.

<Window x:Class = "WPF2DGraphics.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   xmlns:local = "clr-namespace:WPF2DGraphics" 
   xmlns:PresentationOptions = "http://schemas.microsoft.com/winfx/2006/xaml/present ation/options"  
   mc:Ignorable = "PresentationOptions" Title = "MainWindow" Height = "400" Width = "604"> 
	
   <StackPanel> 
      <Ellipse Width = "100" Height = "60" Name = "sample" Margin = "10"> 
         <Ellipse.Fill> 
            <RadialGradientBrush> 
               <GradientStop Offset = "0" Color = "AliceBlue"/> 
               <GradientStop Offset = "1" Color = "Gray"/> 
               <GradientStop Offset = "2" Color = "Red"/> 
            </RadialGradientBrush> 
         </Ellipse.Fill> 
      </Ellipse>
		
      <Path Stroke = "Red" StrokeThickness = "5" Data = "M 10,70 L 200,70"
         Height = "42.085" Stretch = "Fill" Margin = "140.598,0,146.581,0" /> 
      <Path Stroke = "BlueViolet" StrokeThickness = "5" Data = "M 20,100 A 100,56 42 1 0 200,10"
         Height = "81.316" Stretch = "Fill" Margin = "236.325,0,211.396,0" /> 
			
      <Path Fill = "LightCoral" Margin = "201.424,0,236.325,0"
         Stretch = "Fill" Height = "124.929"> 
         <Path.Data> 
            <PathGeometry> 
               <PathFigure StartPoint = "50,0" IsClosed = "True"> 
                  <LineSegment Point = "100,50"/> 
                  <LineSegment Point = "50,100"/> 
                  <LineSegment Point = "0,50"/> 
               </PathFigure> 
            </PathGeometry> 
         </Path.Data> 
      </Path> 
		
   </StackPanel> 
	
</Window>

Ketika Anda mengkompilasi dan menjalankan kode di atas, maka akan menghasilkan elips, garis lurus, busur, dan poligon.

Contoh

Mari kita lihat contoh lain yang menunjukkan cara mengecat suatu area dengan gambar.

• Buat proyek WPF baru dengan nama WPF2DGraphics1.

• Kode XAML berikut menunjukkan cara melukis berbeda dengan gambar gambar.

<Window x:Class = "WPF2DGraphics1.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:PresentationOptions = "http://schemas.microsoft.com/winfx/2006/xaml/present ation/options"  
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "PresentationOptions" 
   xmlns:local = "clr-namespace:WPF2DGraphics1" Title = "MainWindow" Height = "350" Width = "604"> 
	
   <Grid> 
      <Border BorderBrush = "Gray" BorderThickness = "1"  
         HorizontalAlignment = "Left" VerticalAlignment = "Top" 
         Margin = "20"> 
			
         <Image Stretch = "None">
            <Image.Source> 
               <DrawingImage PresentationOptions:Freeze = "True"> 
					
                  <DrawingImage.Drawing> 
                     <DrawingGroup> 
                        <ImageDrawing Rect = "300,100,300,180" ImageSource = "Images\DSC_0104.JPG"/> 
                        <ImageDrawing Rect = "0,100,250,100" ImageSource = "Images\DSC_0104.JPG"/> 
                        <ImageDrawing Rect = "150,0,25,25" ImageSource = "Images\DSC_0104.JPG"/> 
                        <ImageDrawing Rect = "0,0,75,75" ImageSource = "Images\DSC_0104.JPG"/> 
                     </DrawingGroup> 
                  </DrawingImage.Drawing> 
						
               </DrawingImage> 
            </Image.Source> 
         </Image> 
			
      </Border> 
   </Grid> 
	
</Window>

Ketika Anda menjalankan aplikasi Anda, itu akan menghasilkan keluaran berikut -

Kami menyarankan Anda untuk menjalankan kode di atas dan mencoba lebih banyak bentuk dan gambar 2D.