آموزش wpf در سی شارپ — گام به گام و تصویری

wpf چیست؟

قبل از پرداختن به موضوع آموزش wpf در سی شارپ بهتر است تعریف مختصری از این موضوع داشته باشیم  wpf مخفف Windows Presentation Foundation است. wpf یک فریمورک قدرتمند است، برای ساخت برنامه‌های کاربردی ویندوز استفاده می‌شود. wpf در ابتدا با نسخه .NET Framework 3.0 ارائه شد و ویژگی‌های دیگر آن در نسخه‌های بعدی اضافه و به بازار وراد شد. wpf بخشی از فریم ورک NET. است. از بخش‌های مهم در WPF می توان به Presentation Framework و Presentation Core و Milcore اشاره کرد. WPF گرافیکی را برای ویندوز ایجاد می‌کند که می‌تواند به راحتی کار کند. با ساخت برنامه wpf می‌توانید تغییری اساسی در ویندوز ایجاد کنید. برای آموزش wpf باید دانشی در مورد xml و HTML داشته باشید.

فریم ورک wpf می‌تواند برنامه کلاینت ویندوز یا سمت مشتری را بسازد این برنامه می‌تواند روی سیستم عامل ویندوز اجرا گردد. از زبان XAML در فرانت اند و از زبان سی شارپ در بک اند استفاده می‌شود. در فریم ورک دات نت، WPF به عنوان یک کتابخانه ویندوز وجود دارد. با استفاده از WPF می‌توان رابط‌های کاربری، فیلم و اسناد و تصاویر در ویندوز ۷ و سیستم‌ عامل‌های ویندوز را ایجاد و نمایش داد. در WPF از XAML استفاده می‌کنند که یک زبان مبتنی بر XML است.

از XML برای دسته‌بندی و انتقال داده‌ها استفاده می‌شود و در ظاهر سایت تاثیری ندارد. برنامه‌ای که با استفاده از WPF طراحی و ایجاد می‌شود، می‌توان به‌عنوان برنامه‌های دسکتاپ اجرا کرد. برای یادگیری برنامه‌نویسی می‌توانید به آموزش‌های فرادرس مراجعه کنید.

• مجموعه آموزش برنامه‌نویسی — کلیک کنید

ویژگی های wpf در سی شارپ

wpf یک سیستم گرافیکی است و ترکیبی از ویژگی‌های رابط کاربر گرافیکی دو بعدی و سه بعدی و اسناد است. wpf به عنوان API نیز شناخته می‌شود و با آن می‌توان برنامه کلاینت ویندوز ساخت.

• Direct3D: در توضیح Direct3D اینگونه بگوییم که یک API سه‌بعدی است که به نرم افزار کمک می‌کند با سخت‌افزار ارتباط برقرار کند. لا‌یه‌ای که برای طراحان بازی و گرافیک کامپیوتری امکان طراحی و ساخت بازی‌ها را مستقل از سخت‌افزار کامپیوترها فراهم می‌کند. گرافیک‌ها را با استفاده از Direct3D ارائه می‌دهند و باعث می‌شود حجم CPU کاهش یابد. اگر از ویژگی Direct3D WPF استفاده کنید می‌توانید صفحه نمایش را به راحتی به روز کنید.
• XAML: این زبان توسط مایکروسافت برای نوشتن و ایجاد رابط‌های کاربری برای نرم افزارهای کاربردی ویندوز و موبایل است که از UWP، WPF و فرم‌های زامارین استفاده می‌کنند. هدف XAML ایجاد یک رابط کاربری با زبان نشانه گذاری که به XML شباهت دارد.
• Control inside a Control: می‌تواندر داخل یک کنترل ، یک کنترل دیگر را تعریف کرد.
• Data binding: اتصال داده در wpf یک روش ساده برای برنامه‌ها است که تعامل با داده را فراهم می‌کند. مکانیزمی است برای نمایش و تعامل با داده در رابط کاربری.
• Media services: برای ایجاد رابط های کاربری با تصاویر، صدا و ویدیو استفاده می‌شود.
• Templates: در wpf با استفاده قالب می‌توان ظاهر element را مستقیم و با یک الگو تعریف کرد.
• Animations: با استفاده از Animations در رابط کاربری تعامل ایجاد می‌کنند.

نحوه ساخت اولین برنامه در wpf

در آموزش wpf می‌خواهیم اولین برنامه را ایجاد و اجرا کنیم. مایکروسافت برای توسعه wpf دو ابزار مهم معرفی کرد:

1. Visual Studio
2. Expression Blend

با استفاده از هر دو ابزار می‌توان پروژه wpf را ایجاد کرد، ویژوال استودیو بیشتر مورد توجه برنامه نویسان است اما Expression Blend بیشتر توسط طراحان استفاده می‌شود. می‌توانید از سایت مایکروسافت ویژوال استودیو را به صورت رایگان دانلود کرده و آن را نصب کنید. در این بخش می‌خواهیم یک برنامه ساده از Hello World WPF را پیاده سازی خواهیم کرد. با دنبال کردن مراحل زیر شروع کنید.

روی گزینه منوی File > New > Project کلیک کنید.

کادر زیر را مشاهده خواهید کرد:

در ویژوال استودیو و در پنل میانی، WPF Application را انتخاب کنید. پروژه را نام گذاری کنید. HelloWorld را در قسمت نام تایپ کرده و روی دکمه OK کلیک کنید. به طور پیش فرض، دو فایل ایجاد می‌شود، یکی فایل XAML (mainwindow.xaml) و دیگری فایل CS (mainwindow.cs) در mainwindow.xaml، دو پنجره فرعی مشاهده خواهید کرد، یکی پنجره طراحی و دیگری پنجره منبع (XAML).

در برنامه WPF دو راه برای طراحی UI برای برنامه وجود دارد. یکی این هست که به سادگی عناصر UI را از جعبه ابزار به پنجره طراحی بکشید و رها کنید. راه دوم این است که UI خود را با نوشتن تگ های XAML برای عناصر UI طراحی کنید. ویژوال استودیو وقتی از ویژگی کشیدن و رها کردن برای طراحی رابط کاربری استفاده می شود، تگ های XAML را کنترل می‌کند. در فایل mainwindow.xaml، تگ های XAML زیر به صورت پیش فرض نوشته شده اند.

<Window x:Class = "HelloWorld.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   Title = "MainWindow" Height = "350" Width = "604">
     
   <Grid> 
   </Grid> 
     
</Window>

به طور پیش فرض، یک Grid به عنوان اولین element بعد از صفحه تنظیم می‌شود. به جعبه ابزار رفته و یک TextBlock را به پنجره طراحی بکشیم.

TextBlock را در پنجره طراحی خواهید دید.

زمانی که کد بالا کامپایل و اجرا شد، پنجره زیر را مشاهده خواهید کرد.

اگر این پنجره را مشاهده کردید، پس توانستید اولین برنامه WPF خود را طراحی و ایجاد کنید.

معرفی زبان Xaml در wpf

یکی از اولین چیزهایی که هنگام آموزش WPF خواهید دید و با آن کار خواهید کرد، XAML است. XAML مخفف Extensible Application Markup Language است. در معرفی xamlاینطوری بگوییم که زبانی ساده و بر اساس XML است. در XAML، ایجاد، مقداردهی اولیه و تنظیم خصوصیات اشیاء با روابط سلسله مراتبی به راحتی انجام می‌پذیرد. به صورت کلی برای طراحی رابط کاربری گرافیکی استفاده می شود، اما می تواند برای اهداف دیگر نیز استفاده شود.

وقتی که پروژه WPF را ایجاد کردید، طبق شکل زیر با برخی از کدهای XAML را به طور پیش فرض در MainWindow.xaml خواهید دید.

<Window x:Class = "Resources.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   Title = "MainWindow" Height = "350" Width = "525"> 
     
   <Grid> 
         
   </Grid> 
     
</Window>

فایل XAML حاوی انواع مختلفی از کد است که برای بهتر متوجه شدن شما، در جدول زیر به طور مختصر نقش هر یک از اطلاعات توضیح داده شده است.

دستور در XAML به XML شباهت دارد. اگر به یک داکیومنت XAML نگاه کنید، متوجه می‌شوید که یک فایل XML معتبر است، اما یک فایل XML حتما یک فایل XAML نمی‌باشد. سینتکس یک عنصر Object با یک براکت (<) و به دنبال نام یک شی شروع می شود و برخی از ویژگی های عنصر شی را تعریف می‌کند.عنصر Object باید با یک اسلش (/) و بلافاصله با یک براکت (>) بسته شود.

مثالی از یک شی ساده بدون عنصر فرزند را در اینجا آوردیم تا بهتر متوجه توضیحات شوید:

<Button/>

مثالی از عنصر شی با ویژگی:

<Button Content = "Click Me" Height = "30" Width = "60" />

مثالی از سینتکس جایگزین که خصوصیات آن را تعریف می‌کند:

<Button> 
   <Button.Content>Click Me</Button.Content> 
   <Button.Height>30</Button.Height> 
   <Button.Width>60</Button.Width> 
</Button>

مثالی از شیء با عنصر Child: StackPanel شامل Textblock که به عنوان عنصر فرزند می‌باشد:

<StackPanel Orientation = "Horizontal"> 
   <TextBlock Text = "Hello"/> 
</StackPanel>

چرا از Xaml در wpf استفاده میشود؟

همانطور که در مطالب بالا توضیح دادیم زبان xaml یکی از ویژگی‌ها در wpf به شمار می‌رود. در مثال زیر با کد نویسی یک دکمه با برخی ویژگی‌ها که در xaml وجو داشته باشد ایجاد خواهیم کرد.

<Window x:Class = "WPFXAMLOverview.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   Title = "MainWindow" Height = "350" Width = "604"> 
     
   <StackPanel> 
      <Button x:Name = "button" Content = "Click Me" HorizontalAlignment = "Left"  
         Margin = "150" VerticalAlignment = "Top" Width = "75" /> 
   </StackPanel> 
     
</Window>

اگر هم نخواستید از xaml در wpf استفاده کنید با استفاده از رابط کاربری گرافیکی نیز می‌توانید آن را ایجاد کنید. ایجاد دکمه در مثال قبلی را این بار در سی شارپ انجام می‌دهیم:

using System.Windows; 
using System.Windows.Controls;  

namespace WPFXAMLOverview { 
     
   public partial class MainWindow : Window { 
     
      public MainWindow() { 
         InitializeComponent(); 
               
         StackPanel stackPanel = new StackPanel(); 
         this.Content = stackPanel; 
               
         Button button = new Button();
         button.Content = "Click Me"; 
         button.HorizontalAlignment = HorizontalAlignment.Left; 
         button.Margin = new Thickness(150); 
         button.VerticalAlignment = VerticalAlignment.Top; 
         button.Width = 75; 
         stackPanel.Children.Add(button);  
      } 
   } 
}

زمانی‌که کد XAML یا کد سی شارپ نوشته شده را کامپایل و اجرا کردید، خروجی زیر را مشاهده خواهید کرد:

چنانچه علاقمند به یادگیری زبان XML هستید می‌توانید از آموزش XML فرادرس که توسط مهندس محسن ابریشمی تدریس شده است استفاده نمایید.

• آموزش زبان XML ایکس ام ال — کلیک کنید

درخت عناصر یا Elements Tree در wpf

در ادامه آموزش wpf بهتر است با درخت عناصر نیز آشنا شوید. تکنولوژی زیادی وجود دارد که در آن عناصر در یک ساختار درختی مرتب می‌شوند تا برنامه نویس بتواند شیء را به راحتی کنترل کند و بتواند برنامه کاربردی را تغییر دهد. wpf ساختار درختی به شکل اشیاء دارد. در wpf دو روش وجود دارد که یک درخت شیء کامل را تعریف کند:

1. ساختار درختی منطقی
2. ساختار درختی بصری

به کمک این ساختارهای درختی می‌توان ارتباط بین عناصر را ایجاد و شناسایی کرد. در برنامه‌های ایجاد شده در wpf ساختار عناصر UI در xmal ساختار درخت منطقی را نشان می‌دهد. درخت منطقی یا logical tree موارد زیر را نشان می‌دهد:

• وابستگی یا Dependency properties
• منابع استاتیک و پویا یا Static and dynamic resources
• اتصال عناصر به نام آن یا Binding the elements on its name

در مثال زیر یک دکمه (button) و یک لیست باکس (list box) ایجاد شده است:

<Window x:Class = "WPFElementsTree.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   Title = "MainWindow" Height = "350" Width = "604"> 
     
   <StackPanel> 
      <Button x:Name = "button" Height = "30" Width = "70" Content = "OK" Margin = "20" /> 
          
      <ListBox x:Name = "listBox" Height = "100" Width = "100" Margin = "20"> 
         <ListBoxItem Content = "Item 1" /> 
         <ListBoxItem Content = "Item 2" /> 
         <ListBoxItem Content = "Item 3" /> 
      </ListBox> 
          
   </StackPanel> 
     
</Window>

اگر کد Xaml را ببینید، ساختار درختی را نیز مشاهده خواهید کرد؛ یعنی گره ریشه پنجره است و در داخل گره ریشه، تنها یک فرزند وجود دارد که StackPanel است، اما StackPanel شامل دو عنصر فرزند، button و list box است.

ویژگی های وابستگی یا Dependency Properties در wpf

در برنامه‌های نوشته شده در WPF، ویژگی وابستگی, نوعی از ویژگی است که ویژگی CLR را گسترش می‌دهد و از قابلیت‌های خاص موجود در WPF بهره می‌برد. کلاسی که یک ویژگی وابستگی را تعریف می‌کند باید از کلاس DependencyObject به ارث برده شود. بسیاری از کلاس های کنترل UI که در XAML استفاده می‌شوند از کلاس DependencyObject مشتق شده‌اند و از ویژگی‌های وابستگی پشتیبانی می‌کنند، به عنوان مثال. کلاس Button از ویژگی وابستگی IsMouseOver پشتیبانی می‌کند.

با نوشت کد XAML زیر یک دکمه با برخی ویژگی ها ایجاد می شود:

<Window x:Class = "WPFDependencyProperty.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:local = "clr-namespace:WPFDependencyProperty"
   Title = "MainWindow" Height = "350" Width = "604"> 
     
   <Grid> 
      <Button  Height = "40" Width = "175" Margin = "10" Content = "Dependency Property"> 
         <Button.Style> 
            <Style TargetType = "{x:Type Button}"> 
               <Style.Triggers> 
                         
                  <Trigger Property = "IsMouseOver" Value = "True"> 
                     <Setter Property = "Foreground" Value = "Red" /> 
                  </Trigger>
                              
               </Style.Triggers>
            </Style> 
         </Button.Style> 
      </Button> 
   </Grid> 
     
</Window>

X در XAML عملکردی شبیه به ()typeof در سی شارپ دارد. <Style TargetType = “{x:Type Button}”> وقتی کد نوشته شده اجرا شود، پنجره زیر را مشاهده خواهید کرد؛ و زمانی که ماوس روی دکمه قرار گرفت، رنگ پس زمینه دکمه را تغییر می‌دهد و زمانی‌ که ماوس از روی دکمه کنار رفت به رنگ قبلی خود بر می‌گردد.

وقتی از ویژگی Dependency در برنامه خود استفاده می‌کنید، از مزایای زیادی بهره مند می‌شوید. برای مثال اگر بخواهید استایل را تنظیم کنید یا یک منبع استاتیک یا پویا بسازیر یا اگر خواستید یک انیمیشن بسازید، Dependency کمک زیادی به شما خواهد کرد.

ویژگی وابستگی سفارشی یا Custom Dependency Properties

در فریم ورک دات نت، ویژگی های وابستگی سفارشی قابل تعریف است. اگر مراحل زیر را برای تعریف ویژگی وابستگی سفارشی در سی شارپ دنبال کنید، خواهید دید. برای مثال می‌توانید اموال خود را با ثبت تماس سیستمی اعلام و ثبت کنید. تنظیم کننده و گیرنده ملک را تهیه کنید. یک کنترل کننده استاتیک را تعریف کنید. یک کنترل کننده نمونه تعریف کنید. در مثال زیر کد سی شارپ یک ویژگی وابستگی را برای تنظیم ویژگی SetText کنترل کاربر تعریف می‌کند.

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Text; 
using System.Threading.Tasks; 

using System.Windows; 
using System.Windows.Controls; 
using System.Windows.Data; 
using System.Windows.Documents; 
using System.Windows.Input; 
using System.Windows.Media; 
using System.Windows.Media.Imaging; 
using System.Windows.Navigation; 
using System.Windows.Shapes;  

namespace WpfApplication3 { 
     
   public partial class UserControl1 : UserControl { 
     
      public UserControl1() { 
         InitializeComponent(); 
      }
          
      public static readonly DependencyProperty SetTextProperty = 
         DependencyProperty.Register("SetText", typeof(string), typeof(UserControl1), new 
            PropertyMetadata("", new PropertyChangedCallback(OnSetTextChanged))); 
                    
      public string SetText { 
         get { return (string)GetValue(SetTextProperty); } 
         set { SetValue(SetTextProperty, value); } 
      } 
          
      private static void OnSetTextChanged(DependencyObject d,
         DependencyPropertyChangedEventArgs e) { 
         UserControl1 UserControl1Control = d as UserControl1; 
         UserControl1Control.OnSetTextChanged(e); 
      } 
          
      private void OnSetTextChanged(DependencyPropertyChangedEventArgs e) { 
         tbTest.Text = e.NewValue.ToString(); 
      }  
   } 
}
Here is the XAML file in which the TextBlock is defined as a user control and the Text property will be assigned to it by the SetText dependency property.

The following XAML code creates a user control and initializes its SetText dependency property.

<Window x:Class = "WpfApplication3.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:views = "clr-namespace:WpfApplication3"
   Title = "MainWindow" Height = "350" Width = "604"> 
     
   <Grid> 
      <views:UserControl1 SetText = "Hellow World"/> 
   </Grid> 
     
</Window>

در این برنامه فایل XAML که در آن TextBlock به عنوان یک کنترل کاربر تعریف شده است و ویژگی Text توسط ویژگی وابستگی SetText به آن اختصاص داده می شود. کد XAML زیر یک کنترل کاربر ایجاد کرده و ویژگی وابستگی SetText آن را مقداردهی اولیه می‌کند.

<Window x:Class = "WpfApplication3.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:views = "clr-namespace:WpfApplication3"
   Title = "MainWindow" Height = "350" Width = "604"> 
     
   <Grid> 
      <views:UserControl1 SetText = "Hellow World"/> 
   </Grid> 
     
</Window>

بعد از اینکه برنامه را ایجاد کردید مشاهده می‌کنید که که در پنجره اصلی ویژگی وابستگی برای کنترل کاربر با موفقیت به عنوان یک متن استفاده شده است.

برای یادگیری جامع wpf در سی شارپ می‌توانید از فیلم‌های آموزشی فرادرس در لینک زیر استفاده کنید:

• آموزش WPF در سی شارپ C#‎ برای ساخت اینترفیس – مقدماتی — کلیک کنید

سخن آخر در مورد آموزش wpf

به پایان آموزش wpf رسیدیم. در این مقاله سعی کردیم با مثال عملی و درج تصاویر wpf را آموزش بدهیم. ویژگی‌های wpf را توضیح دادیم. اولین برنامه Hello World را به کمک زبان سی شارپ اجرا کردیم و اهمیت زبان XAML را در WPF شرح دادیم. پیشنهاد می‌کنیم مقاله زیر را نیز مطالعه بفرمایید. امیدواریم با مطالعه این پست WPF را تا حدودی بشناسید و بتوانید پروژه‌ای را ایجاد و با موفقیت اجرا کنید. از اینکه این پست را مطالعه کردید از شما سپاسگزاریم. منتظر نظر و انتقاد کاربران گرامی هستیم. موفق و پیروز باشید.

• آموزش برنامه نویسی سی شارپ از مبتدی تا پیشرفته – راهنمای جامع اصول برنامه نویسی با #C — کلیک کنید