WPF - Đồ họa 2D

WPF cung cấp một loạt các đồ họa 2D có thể được nâng cao theo yêu cầu ứng dụng của bạn. WPF hỗ trợ cả các đối tượng Drawing và Shape được sử dụng để vẽ nội dung đồ họa.

Hình dạng và Bản vẽ

• Lớp Shape có nguồn gốc từ lớp FrameworkElement, các đối tượng Shape có thể được sử dụng bên trong các bảng điều khiển và hầu hết các điều khiển.

• WPF cung cấp một số đối tượng hình dạng cơ bản có nguồn gốc từ lớp Shape như Ellipse, Line, Path, Polygon, Polyline và Rectangle.

• Mặt khác, các đối tượng vẽ không bắt nguồn từ lớp FrameworkElement và cung cấp một triển khai nhẹ hơn.

• Đối tượng vẽ đơn giản hơn so với đối tượng Shape. Chúng cũng có đặc điểm hiệu suất tốt hơn.

Thí dụ

Hãy lấy một ví dụ đơn giản để hiểu cách sử dụng các đối tượng hình dạng khác nhau.

• Tạo một dự án WPF mới với tên WPF2DGraphics.

• Đoạn mã sau đây tạo ra các loại hình dạng khác nhau.

<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>

Khi bạn biên dịch và thực thi đoạn mã trên, nó sẽ tạo ra một hình elip, một đường thẳng, một cung và một đa giác.

Thí dụ

Hãy xem một ví dụ khác cho thấy cách vẽ một khu vực bằng hình vẽ.

• Tạo một dự án WPF mới với tên WPF2DGraphics1.

• Đoạn mã XAML sau đây cho thấy cách vẽ khác với vẽ hình ảnh.

<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>

Khi bạn chạy ứng dụng của mình, nó sẽ tạo ra kết quả sau:

Chúng tôi khuyên bạn nên thực thi mã trên và thử thêm các hình dạng và bản vẽ 2D.