قسمت اول: سلام WPF، حالت چطوره؟

سلام. من دامون هستم و دارم یه مجموعه آموزش WPF بنویسم. توی قسمت قبلی درمورد اینکه WPF چیه صحبت کردیم و فهمیدیم که چرا WPF بهتر از ویندوزفرمه! توی این قسمت کمی درمورد زبان XAML توضیح میدم و میریم که اولین پروژه WPF خودمون، یا به اصطلاح «Hello World» رو بنویسیم! پس بزن بریم ... !

زبان XAML چیست؟

زبان XAML یک زبان بسیار ساده، و برپایه XML هست که برای مقدار دهی اشیاء در دات‌نت (.NET) استفاده می‌شه. توی WPF همه کارهایی که مربوط به ظاهر برنامه هست رو با XAML انجام می‌دیم!

همونطور که گفتم این زبان برپایه XML هست و اگه قبلا با XML یا HTML کار کردین راحت‌تر می‌تونید این زبان رو یاد بگیرید. (البته کلا راحت می‌تونید یاد بگیرید (: )

یه سند XAML از چندین عنصر XAML تشکیل شده و هر عنصر XAML هم این شکلیه که باید یه تگ رو باز کنی، اطلاعات توشو بنویسی، بعد ببندیش! اینجوری:

<openTag> ... data ... </closeTag>

این وسط ممکنه توی یه عنصر XAML ما بیایم یک یا چندتا عنصر دیگه اضافه کنیم. مثل این مثال:

<Tag>
          <Element1> ... </Element1>
          <Element2> ... </Element2>
          <Element3> ... </Element3>
</Tag>

بعضی عناصر هم هستن که نیازی به تگ بسته ندارن! یعنی قرار نیست اطلاعاتی توش بنویسیم. اونها رو اینجوری میبندیم: (قبل از علامت < یه اسلش / میزاریم)

<Tag />

درست مثل XML ما میتونیم برای هر عنصر خواصی تعریف کنیم؛ مثل ارتفاع و رنگ و ... که برای اینکار به این صورت عمل می‌کنیم:

<Tag att1=&quotvalue1&quot att2=&quotvalue2&quot ... attN=&quotvalueN&quot> ... data ... </Tag>
* OR
<Tag att1=&quotvalue1&quot att2=&quotvalue2&quot ... attN=&quotvalueN&quot />

بین عناصر XAML ممکنه رابطه پدر فرزندی وجود داشته باشه! که اونم به این صورته:

<parent>
        <child1> ... data ... </child1>
        <child2>
                <grandchild1> ... data ... </grandchild1>
        </child2>
</parent>

و در آخر هم بگم که XAML به حروف کوچک و بزرگ حساسه! یعنی به عنوان مثال کلمه Button با button فرق میکنن.

تا اینجا خواستم سینتکس کلی XAML رو بهتون نشون بدم. اگه جایی براتون گنگ بود یا متوجه نشدید هیچ اشکالی نداره! وقتی عملی باهاش کار کنید متوجه می‌شید که XAML چه نعمت بزرگیه و چقدر کارمون رو راحت می‌کنه :)

حالا که کمی با XAML آشنا شدیم، بریم و اولین برنامه WPF خودمون رو بنویسیم ...

یک نکته قبل از نوشتن برنامه

برای نوشتن برنامه شما می‌تونید از هر برنامه نوشتاری استفاده کنید، حتی نوت‌پد! اما معمولا برنامه‌نویس‌ها ترجیح میدن که از یه IDE خوب استفاده کنن که همه کارها از جمله ساختن فایل‌های موردنیاز، دیباگ و کامپایل رو انجام بده. و چه IDE ای بهتر از ویژوال استودیو؟ اگر ایران هستید میتونید نسخه کرک شده Visual Studio رو نصب کنید و حالشو ببرید :) اما اگه خارج از ایران هستید بهتره این اشتباهو نکنید و مثل بچه آدم برید نسخه Community ویژوال استودیو رو از این لینک به‌صورت رایگان و قانونی دانلود کنید و خیالتون رو راحت کنید! (خب اگه خارج از ایران هستید میتونید برنامه کامل رو با چندرغاز دلار بخرید و مثل ما حالشو ببرید D: )

یادتون نره موقع نصب ویژوال استودیو بسته ‪.NET desktop development‬ رو حتما نصب کنید (۰_۰)

ما فرض می‌کنیم که شما در این مرحله ویژوال استودیو رو نصب کردید و از اضافه‌گویی در این مورد پرهیز می‌کنیم. بریم که اولین برنامه‌مون رو بنویسیم :)

ساخت اولین برنامه با WPF : سلام WPF

معمولا اولین و کلاسیک ترین برنامه‌ای که در ابتدای کلاس‌های برنامه نویسی آموزش داده می‌شه «سلام دنیا»ست که اینجا ما با یک شیطنت اون رو به «سلام WPF» تغییر دادیم!

وارد ویژوال استودیو بشید و از منوی File گزینه New project رو انتخاب کنید. توی پنجره‌ی باز شده از بخش تمپلیت (سمت چپ) زبان سی‌شارپ (‪C#‬) رو انتخاب کنید و از اونجایی که داریم برای ویندوز برنامه می‌نویسیم گزینه Windows رو انتخاب کنید. با اینکار لیستی از برنامه‌های ویندوزی در سمت راست نمایش داده میشه. مطابق عکس زیر گزینه WPF Application رو انتخاب کنید:

اسم و آدرس پروژه رو هم هرچی دوست داشتین بنویسین. مثلا من نوشتم HelloWPF.

اگه همه کارها رو درست انجام داده باشید باید پنجره MainWindox.xaml براتون باز بشه. مثل این تصویر:

و توی قسمت پایین (کدهای XAML) باید یه همچین کدی رو ببینید:

<Window x:Class=&quotWpfApplicationName.MainWindow&quot
    xmlns=&quothttp://schemas.microsoft.com/winfx/2006/xaml/presentation&quot
    xmlns:x=&quothttp://schemas.microsoft.com/winfx/2006/xaml&quot
    Title=&quotMainWindow&quot Height=&quot350&quot Width=&quot525&quot>
            <Grid>

           </Grid>
</Window>

این پایه و اساس کدی هست که ویژوال استودیو برای ما نوشته. بعدا بیشتر بررسی‌ش می‌کنیم. شما می‌تونید از منوی Debug یا کلیک روی دکمه سبز بالای صفحه، و یا فشردن کلید F5 از روی کیبورد برنامتون رو اجرا کنید. قاعدتا ما هنوز بخشی به برنامه اضافه نکردیم، پس باید یه پنجره خالی باز بشه. مثل عکس زیر:

حالا ما می‌خوایم که یه متن رو توی برنامه خودمون بنویسیم. اگه هنوز پنجره خالی برنامه‌تون رو نبستین ببندینش :) حالا در محیط ویژوال استودیو در بخش کدهای XAML یک المان تکست بلاک درون Grid Panel اضافه می‌کنیم. مطابق کد زیر:

<Window x:Class=&quotWpfApplication1.MainWindow&quot
 xmlns=&quothttp://schemas.microsoft.com/winfx/2006/xaml/presentation&quot
 xmlns:x=&quothttp://schemas.microsoft.com/winfx/2006/xaml&quot
 Title=&quotMainWindow&quot Height=&quot350&quot Width=&quot525&quot>
               <Grid>
                     <TextBlock HorizontalAlignment=&quotCenter&quot VerticalAlignment=&quotCenter&quot FontSize=&quot72&quot>
                                Hello WPF!
                     </TextBlock>
                </Grid>
</Window>

درواقع ما فقط این کد رو به برنامه اضافه کردیم:

<TextBlock HorizontalAlignment=&quotCenter&quot VerticalAlignment=&quotCenter&quot FontSize=&quot72&quot>                                 
            Hello WPF!
</TextBlock>

بزارید یکم این کد رو با هم مرور کنیم. ما یه تگ Text Block رو تعریف کردیم. بعد سه تا خصوصیت هم بهش دادیم. به ترتیب گفتیم که ۱- به صورت عمودی در وسط قرار بگیر ۲- به صورت افقی وسط قرار بگیر ۳- اندازه فونت رو بکن ۷۲
بعد مطابق سینتکس زبان XAML ما تگ خودمون رو بستیم و در بین این دو تگ داده (Data) رو وارد کردیم که در اینجا متن داخل Text Block بود! به همین راحتی :)

حالا برنامه رو اجرا کنید و از نخستین برنامه WPF خودتون لذت ببرید :)

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

در ضمن، از این بخش هم می‌تونید به قسمت‌های قبل و بعد دسترسی داشته باشید :)

قسمت قبلی:

قسمت بعدی:

(هنوز ننوشتم!)

با نگاهی به وب‌سایت WPF Tutorial