گرافیک دو بعدی در WPF – آموزش WPF

سه شنبه ۲ شهریور ۱۴۰۰
بازدید ۸۰۷ نفر
آرتین
(5 امتیاز از 1 رای)
Loading...

تصویر wpf-2d-graphics_10695 گرافیک دو بعدی در WPF - آموزش WPF

گرافیک دو بعدی در WPF

WPF طیف گسترده ای از گرافیک دو بعدی را ارائه می دهد که می توانیم بر اساس نیاز خود از آن ها استفاده کنیم. همچنین WPF از هر دو شیء Shape و Drawing به منظور ایجاد محتوای گرافیکی پشتیبانی می کند.

منظور از شیء Shape، کلاس های گرافیکی هستند که از FrameworkElement ارث بری می کنند. مانند: Ellipse، Line، Path، Polygon، Polyline و مستطیل.

مثال

برای درک بهتر یک پروژه WPF با نام WPF2DGraphics ایجاد کرده و محتوای فایل MainWindow.xaml را به شکل زیر تغییر دهید:

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

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

<Ellipse.Fill>

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

</PathFigure>

</PathGeometry>

</Path.Data>

</Path>

</StackPanel>

</Window>

زمانی که مثال فوق را کامپایل و اجرا کنید، خروجی زیر را تولید خواهد کرد که شامل یک بیضی، خط راست، کمان و چند ضلعی است:

تصویر wpf-2d-graphics_10695_1 گرافیک دو بعدی در WPF - آموزش WPF

منظور از شیء Drawing، کلاس های گرافیکی هستند که از FrameworkElement ارث بری نمی کنند و نسبت به Shape ها سبک‌تر هستند و در نتیجه از لحاظ کارایی نیز بهتر اند.

مثال

برای درک بهتر یک پروژه WPF با نام WPF2DGraphics1 ایجاد کرده و محتوای فایل MainWindow.xaml را به شکل زیر تغییر دهید:

<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 = "ImagesDSC_0104.JPG"/> 
                        <ImageDrawing Rect = "0,100,250,100" ImageSource = "ImagesDSC_0104.JPG"/> 
                        <ImageDrawing Rect = "150,0,25,25" ImageSource = "ImagesDSC_0104.JPG"/> 
                        <ImageDrawing Rect = "0,0,75,75" ImageSource = "ImagesDSC_0104.JPG"/> 
                     </DrawingGroup> 
                  </DrawingImage.Drawing> 
						
               </DrawingImage> 
            </Image.Source> 
         </Image> 
			
      </Border> 
   </Grid> 
	
</Window>