آموزش WPF (مقدماتی تا پیشرفته)

[Mahdi.Kiani]

شکل ساده یک سند XAML :

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

<Window x:Class="WpfApplication1.Window1"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="Window1" Height="300" Width="300">

    <Grid>

      

    </Grid>

</Window>

حال در ادامه اجزای قطعه کد فوق را با هم خواهیم دید:

اگر خوب دقت کنید، کد فوق دارای دو تگ کلی می باشد. یکی تگ Window و دیگری تگ Grid می باشد.
تگ Window بیانگر این است، که این فایل اشاره به یک آبجکت Window دارد. همانطور که قبلا گفتم Window ها در WPF به مانند Form ها در WinApp می باشند.
تگ Grid اشاره به آبجکتی به نام Grid دارد که یکی از پر کاربردترین آبجکت های WPF می باشد که جزء کنترل های Container است. این کنترل به همراه کنترل های دیگر که همه از کلاسی به نام panel ارث بری می کنند، وظیفه طرح بندی (Layout) پنجره های شما را دارند در مورد این کنترل به همراه کنترل های مربوطه، در بخش Layout مفصل صحبت خواهم کرد.

در خط اول قطعه کد فوق، دستور زیر را مشاهده می کنید:

x:Class="WpfApplication1.Window1

این دستور، بیانگر این است که فایل XAML جاری، مربوط به کلاس Window1 که در فضای نام WpfAplication1 قرار گرفته است می باشد. به عنوان مثال چناچه یک Button به فایل XAML فوق اضافه کنید، و برای آن رویدادی (مثلا Click) تعریف کنید، کد های این رویداد درون کلاس Window1 در درون فضای نام WpfApplication1 خواهد بود. این نوع تعریف کلاس و ربط دادن آن به کد های مروبوط به طراحی فرم، برای برنامه نویسان ASP.NET 2.0 آشنا می باشند. ( اصطلاحا به آن Code-Behind Class گفته می شود) در آن جا هم از تکنیکی مشابه این استفاده می گردد.

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

حال به دوخط کد زیر که در قطعه کد فوق قرار گرفته اند توجه کنید :

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

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

در نهایت، سه خاصیت برای Window تعریف شده است. خاصیت اول مربوط Tilte پنجره می باشد. این خاصیت مانند خاصیت Text در فرم های ویندوزی می باشد. در واقع متنی که به عنوان مقدار در این خاصیت قرار بگیرد، به نوار عنوان پنجره و همچنین در زمانی که پنجره در حالت minimize قرار دارد، در Taskbar ویندوز، نشان داده خواهد شد.
دوخاصیت بعدی هم به ترتیب ارتفاع و عرض Window را مشخص می کند.

[Mahdi.Kiani]

فضای نام ها در XAML

در بخش قبل با دو دستور زیر آشنا شدید.

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

دانستید که آن ها فضای نام های اساسی WPF می باشند و بنابراین، هر سند XAML مربوط به WPF بایستی این دو فضای نام را در خود تعریف کند. حال ببینیم تعریف یک فضای نام در XAML به چه نحوی می باشد.

اعلان فضای نام در XAML :

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

xmlns="clr-namespace:[NameSpace Name];assembly=[Assembly Name]"

در تعریف فوق، به جای [NameSpace Name] بایستی نام فضای نام مروبطه را قرار دهید. و به جای [Assembly Name] بایستی نام فایل اسمبلی را که آن فضای نام در آن قرار گرفته است را قرار دهید. برای درک بهتر موضوع به مثال زیر توجه کنید :

فرض کنید که یک کلاس اختصاصی با عنوان AdvanceMathClass ایجاد کرده اید که این کلاس در فضای نام MathClasses و در اسمبلیMyCustomClasses قرار دارند. حال برای دسترسی به کلاس AdvanceMathClass بایستی فضای نام آن را و نیز اسمبلی که آن کلاس در آن قرار گرفته است را مشخص نمایید.
با توجه به توضیحات پیشین، بایستی دستور زیر را در ابتدای فایل XAML خود اضافه نمایید:

xmlns="clr-namespace:MathClasses;assembly=MyCustomClasses"

حال می توانید به راحتی از کلاس AdvanceMathClass در سند XAML خود استفاده کنید.

نکته:
اگر به خاطر داشته باشید، می توانستید برای فضای نام های موجود، یک اسم مستعار معرفی کنید و از از آن اسم در برنامه خود استفاده نمایید. به عنوان مثال می توانید کدی به صورت زیر داشته باشید:

using sys=System;

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

xmlns:cc="clr-namespace:MathClasses"

همانطور که مشاهده می کنید، از کلمه cc به عنوان نام مستعار برای فضای نام مذکور، استفاده شده است. حال می توانید توسط این کلمه به کلاس های درون فضای نام خود دسترسی داشته باشید.

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

 

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

که در زیر به توضیح هر یک خواهم پرداخت :
فضای نام xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation :
این فضای نام، در برگیرنده تمامی کلاس های WPF و کنترل های و ... که جهت ایجاد واسط های کاربری، به کار گرفته می شوند، می باشد.

فضای نام xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml:

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

<x:[ElementName]>

عناصری که از این فضای نام قابل دسترسی خواهند بود، بسته به عنصری که از این فضای نام استفاده می کند، متفاوت می باشد. به عنوان مثال یکی از کاربرد های آن قرار دادن شناسه هایی برای کنترل ها می باشد که در localizable کردن، برنامه ها، نقش اساسی را بازی خواهند کرد

[Mahdi.Kiani]

خواص و رویداد ها در XAML :

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

به طور کلی در اسناد XAML ، به دو صورت می توانید خواص یک عنصرا را مشخص کنید:

روش اول : اضافه کردن خواص عناصر در تگ آغازین کنترل مربوطه می باشد. معمولا زمانی از این روش استفاده می کنیم که بتوان مقادیر خو.اص را به راحتی تنظیم کرد. به عنوان مثال به کد زیر توجه کنید:

<TextBox Name="txtNum1" HorizontalAlignment="Center"  VerticalAlignment= "Center" Background="Green" Foreground="White">this is sample TextBox</TextBox>

کد فوق، یک نمونه از آبجکت TextBox تعریف می کند و تعدای خواص آن را از جمله رنگی به عنوان پس زمینه و رنگ پیش زمینه و .. را مشخص می کند.( نگران کد های نوشته شده نباشید، به زودی معنای تمامی آن ها را متوجه خواهید شد.)
پنجره ای که فقط شامل کنترل فوق باشد، ظاهری شبیه با ظاهر شکل زیر خواهد داشت

روش دوم: اضافه کردن خواص کنترل به صورت تگ های داخلی، و بین تگ آغازین و پایانی کنترل مورد نظر می باشد. به عنوام مثال می توان قطعه کد فوق را به صورت زیر نوشت:

<TextBox>

    <TextBox.Name>txtNum1</TextBox.Name>

    <TextBox.HorizontalAlignment>Center</TextBox.HorizontalAlignmen

    <TextBox.VerticalAlignment>Center</TextBox.VerticalAlignment>

    <TextBox.Background>Green</TextBox.Background>

    <TextBox.Foreground>White</TextBox.Foreground>

    <TextBox.Text>this is sample TextBox

    </TextBox.Text>

</TextBox>

اجرای کد فوق، با کد قبل از آن یکسان می باشد. حال ممکن است که این سوال برایتان پیش آید که حالت دوم نیاز به کدنویسی بیشتری دارد. پس چه نیاز است که کد اول را به این شکل بنویسیم؟
در جواب این سوال باید بگویم که، بسیاری از مواقع، تنظیم مقادیر پیچیده و پیشترفته برای یک خاصیت، در تگ آغازین سخت و گاها غیر ممکن است. به عنوان مثال فرض کنید که بخواهید ظاهر TextBox فوق را با تغییر خاصیت BackGround و ForeGround آن کمی تغییر بدهید. به قطعه کد زیر دقت کنید :

<TextBox ... >

...

    <TextBox.Background>

        <RadialGradientBrush >

            <RadialGradientBrush.GradientStops>

                <GradientStop Color="#b1a4fb" Offset="0"/>

                <GradientStop Color="Lime" Offset=".5"/>

                <GradientStop Color="#a30c85" Offset="1"/>

            </RadialGradientBrush.GradientStops>

        </RadialGradientBrush>

    </TextBox.Background> 

...  

</TextBox>

در این کد، خاصیت BackGround تغییر پیدا کرده، و نیز افکتی به آن اضافه شده است. همانطور که مشاده می کنید، خاصیت BackGround در این کد، مانند کد قبل تنها شامل یک رنگ نمی باشد، بلکه یک شی گرادیان می باشد که خود نیز شامل خواص بسیار زیادی می باشد. پس در این حالت نمی توان این خاصیت را در تگ آغازین قرار داد.
(در بخش های آتی با کد های فوق و نحوه عملکرد آن ها بیشتر آشنا خواهیدشد)
شکل حاصل از اجرای این کد، مشابه زیر خواهد بود.

خواص پیوست شده (Attached Properties

هر کنترلی علاوه بر خواصی که خودش دارا می باشد، بر اساس نحوه قرار گیری آن بر روی کنترل نگهدارنده خودش (کنترلی که این کنترل را در بر گرفته است که اصلاحا به آن کنترل Container گفته می شود.) خواص جدیدی به آن اضافه می گردد که به این خواص، خواص پیوست شده می گویند. به این دلیل این نام برای آن انتخاب شده است که این خواص در حالت عادی برای کنترل مجود نیستند و بسته به کنترل نگهدارنده آن، این خواص اضافه می شوند. به عنوان مثال، اگر TextBox فوق که کد ان را با هم دیدیم، بر روی کنترل Grid که یکی از کنترل های Container (و در واقع مهمترین و پر کاربرد ترین) می باشد، خواصی جهت تنظیم TextBox بر روی Grid به کنترل TextBox اضافه می گردد. نحوه استفاده از این خواص به صورت زیر می باشد :

DefiningName.PropertyName ="Value";

به عنوان مثال با اضافه کردن کد زیر به کد های TextBox قبل، TextBox در سطر و ستون دوم کنترل گرید، قرار خواهد گرفت.

<TextBox ... Grid.Row="1" Grid.Column="1">



...

...

</TextBox>

[Mahdi.Kiani]

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

EeventName="MethodName"

به عنوان مثال در قطعه کد زیر رویداد کلیک برای یک دکمه تعریف شده است:

<Button Name="testButton" Content="Click To Perform" Click="testButton_Click"></Button>

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

علاوه بر لیست رویداد های از قبل تعریف شده، گزینه دیگری نیز با عنوان <New Event Handler> موجود است، که با انتخاب آن می توانید، یک رویداد جدید برای کنترل مورد نظر ایجاد کنید.
برای درک بهتر این موضوع به شکل زیر دقت کنید :

همانطور که مشاهده می کنید، لیست کشویی در هنگام تعریف رویداد، برای دکمه قبل باز شده است. اما به دلیل اینکه قبلا هیچ رویدادی تعریف نشده است، که قابل بایند شدن به کنترل Button باشد، تنها گزینه موجود، تعریف یک رویداد جدید می باشد که با انتخاب گزینه <New Event handler> امکان پذیر می باشد. به محض فشردن کلید Enter بر روی این گزینه، یک رویداد در کلاس مربوطه ساخته می شود.

حال اگر بخواهید، برای یک Button ، یک رویداد کلیک تعریف کنید، با لیستی که در شکل زیر نشان داده شده است، مواجه خواهید شد.

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

انتخاب اول : گزینه اول، یعنی <New Event handler> را انتخاب کنید، که در این صورت، رویداد جدیدی، صرف نظر از کلیه رویداد های قبلی برای دکمه دوم ایجاد می شود.

انتخاب دوم : با انتخاب گزینه دوم، یعنی textButton_Click ، دکمه دوم را نیز به رویداد کلیک دکمه اول بایند کنید. که در این صورت رویداد جدیدی برای دکمه دوم ایجاد نخواهد شد.

نکته :
برای رفتن به رویداد تعریف شده موجود، دو راه وجود دارد. یا اینکه به کلاس مربوطه که رویداد، در آن تعریف شده است بروید، و رویداد مورد نظر را جهت کد نویسی پیدا کنید. راه دوم، راست کلیک کردن بر روی نام متد مشخص شده برای رویداد، و انتخاب گزینه Navigate To Event handler می باشد. این موضوع در شکل زیر نمایش داده شده است

*******************
با اتمام شدن این پست، مقدمات لازم برای شروع کار و برنامه نویسی با WPF را فرا، گرفتید. از پست بعدی انشاءالله، با شروع از مبحث طرح بندی (Layout) که از اولین و اصولی ترین و همچنین مهمترین مفاهیم WPF می باشد، برنامه نویسی با WPF را آغاز خواهیم کرد.
***********
چنانچه می خواهید نمونه کد هایی را که از قسمت های بعدی ارائه میشوند را بر روی کامپیوتر خود اجرا کنید و نتیجه را مشاهده کنید، ویژوال استودیو 2008 را چنانچه هنوز بر روی PC خودتان نصب نکرده اید، نصب کنید.
تا فرصت بعدی حق نگهدار همگی
مهدی کیانی