آموزش WPF از مقدماتي تا پيشرفته

[abbas.m.k]

کنترل StackPanel :

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


نحوه تعریف StackPanel به صورت زیر می باشد:

Please Login or Register to see this code
به عنوان مثال کد زیر، سه کنترل TextBox و یک کنترل Button بر روی StackPanel قرار می دهد.
Please Login or Register to see this code
شکل حاصل از دستورات فوق، مشابه زیر خواهد بود:

همانطور که اشاره شد، کنترل StackPanel قابلیت چیدن عناصر را به صورتی افقی نیز دارا می باشد. با به کار گیری خاصیت Orientation از این کنترل می توانید، نحوه قرار گیری عناصر را مشخص سازید.
این حاصیت دارای دو مقدار Horizontal و Vertical می باشد. که به ترتیب برای تراز کردن عناصر به صورت افقی و عمودی بر روی StackPanel به کار می رود.
به عنوان مثال در کدزیر، چهار دکمه به صورت افقی قرار گرفته اند :

Please Login or Register to see this code
در این کد، خاصیت Orientation در تگ آغازین کنرل StackPanel بر روی Horizontal قرار گرفته است

نکته :
مقدار پیش فرض خاصیت Orientation برابر با Vertical می باشد. در واقع اگر خاسیت Orientation را برای StackPanel تنظیم نکنید، عناصر به صورت پشته عمودی قرار خواهد گرفت

هر کنترلی علاوه بر خواص مخصوصی به خودش دارای خواصی می باشد که تقریبا بین همه کنترل ها مشترک هستند. در واقع خواصی در WPF وجود دارد که اکثر کنترل های WPF ، ان خواص را شامل می شوند. این خواص در هر کنترلی عملکردی مشابه خواهد داشت. در بخش بعدی به تعدادی از این خواص اشاره خواهیم کرد.

[abbas.m.k]

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

خاصیت HorizontalAlignment
:
مقادریر خاصیت HorizontalAlignment عبارتند از :

Left : این مقدار، باعث می شود که کنترل مورد نظر از سمت چپ کنترل پدرش تراز شود.
Right : این مقدار، باعث می شود که کنترل مورد نظر از سمت زاست کنترل پدرش تراز شود.
Center : این مقدار، باعث می شود که کنترل مورد نظر در قسمت وسط کنترل پدرش تراز شود.
Stretch : این مقدار باعث می شود که کنترل تمامی عرض کنترل پدرش را پوشش دهد.


عکس زیر، موارد گفته شده را نشان می دهد:


کدی که برای برنامه فوق نوشته شده است::
Please Login or Register to see this code
خاصیت VerticalAlignment :
این خاصیت دارای چهار مقدار زیر می باشد :
Top: که باعث می شود کنترل از سمت بالای کنترل پدر خویش تراز شود.
Bottom : که باعث می شود کنترل از سمت پایین کنترل پدر خویش تراز شود
Center: که باعث می شود کنترل دروسط کنترل پدر خویش تراز شود.
Stretch: که باعث می شود، کنترل از تمامی فضای موجود، استفاده کند.

نکته :
کنترل StackPanel ، به کنترل های فرزند خود به همان مقدار فضا که نیاز دارند، فضا اختصاص می دهد. به همین دلیل اگر دستورات مروبط خاصیت VerticalAlignment را با شکل فوق به کار ببرید، تاثیری در چیدمان کنترل ها نخواهد داشت.

-----------------------------

خاصیت Margin:
این خاصیت، فاصله کنترل را از کنترل های اطراف خودش مشخص می کند . این خاصیت دارای چهار مقدار Left،Top،Bottom و Right می باشد.
نحوه مقدار دهی این خاصیت در اسناد XAML به صورت زیر می باشد :

Please Login or Register to see this code
با کد فوق، عنصری که برای آن خاصیت Margin مشخص شده است، از هر طرف به مقدار 5 واحد با کنترل های اطرافش فاصله خواهد دشت.

نکته :
اگر مقادیر فاصله ای که می خواهید قرار دهید برای هر چهار طرف یکسان باشد، کافی است به جای کد فوق از کد زیر استفاده کنید:

Please Login or Register to see this code
دو قطعه کد فوق یکسان می باشند. در واقع می توانید تنها با قرار دادن یک، هر چهار مقدار این خاصیت را مقدار دهی کنید.

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







کد مربوط به شکل فوق :
Please Login or Register to see this code

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

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

خاصیت MinHeight: این خاصیت مینیمم ارتفاعی را که یک کنترل می تواند اختیار کند را مشخص می کند.

خاصیت MinWidth: این خاصیت مینیمم عرضی را که یک کنترل باید داشته باشد را مشخص می کند.

خاصیت MaxHeight: این خاصیت ماکزیمم ارتفاعی را که یک کنترل می تواند اختیار کند را مشخص می کند.

خاصیت MaxWidth: این خاصیت ماکزیمم عرضی را که یک کنترل باید داشته باشد را مشخص می کند.

نکته :
همانور که گفته شد، تا جایی که امکان پذیر است، نبایستی از خواص Width و Height برای مقدار دهی عرض و ارتفاع کنترل ها استفاده کرد. یکی از مواردی که این موضوع می تواند کارایی برنامه را پایین آورد، زمانی است که بخواهید برنامه خود را Localizable کنید.

[abbas.m.k]

کنترل Canvas :
این کنترل نیز یکی دیگر از کنترل های کانتینری می باشد که عناصر مختلف می توانند بر روی آن قرار بگیرند. از این کنترل به ندرت در برنامه ها استفاده می شود. به این دلیل که این کنترل، عناصر داخلی خود را بر مبنای مکان آن عنصر که به صورت صریح در خواص آن عنصر ذکر گردیده است، تراز بندی می کند. به همین دلیل در مواقعی که امکان تغییر سایز پنجرها و مقادیر عناصر در زمان اجرای برنامه باشد، استفاده از این کنترل، انتخاب مناسبی نمی تواند باشد.

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


به نمونه کد زیر دقت کنید :
Please Login or Register to see this code
همانطور که می بینید، مکان هر کنترلی درون کنترل Canvas با خواص پیوست شده ی Left، Top، Right و Bottom مشخص شده است.

شکل نهایی حاصل از اجرای این کد به صورت زیر خواهد بود:



نکته:
دقت داشته باشید، که در این حالت، چون سایز کنترل ها پیش فرض بر روی Stretch نیست ( بر خلاف زمانی که منترل ها بر روی StackPanel قرار داشتند)، با تغییر محتوای TextBox ها، سایز آن ها نیز تغییر پیدا می کند.
به عنوام مثال اگر کاربر در دو TextBox بالایی مقادیر 10 و 20000 را وارد کند، TextBox ها تغییر اندازه داده و به شکل زیر در خواهند آمد :



همچنین اگر مقادیر TextBox ها بیش از عرض فعلی آن ها باشد، عرض TextBox ها زیاد شده تا بتواند تمامی مقادیر را در خود جای دهد.
برای پیشگیری از تغییر سایز textbox ها، می توانید از خواص MaxWidth و MinWidth این عناصر استفاده کنید.
برای ثابت نگه داشتن طول textbox می توانید خواص MaxWidth و MinWidth را با مقادیر یکسان، مقدار دهی کنید.

در کد زیر، که با تغیر در کد قبلی به وجود امده است، TextBox بالایی، در اندازه 120 ثابت شده است. این به این معنی است که با تغییر محتویات داخل TextBox طول TextBox ثابت می ماند.
Please Login or Register to see this code

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

همانطور که در شکل فوق مشاهده می کنید، تکست باکس بالایی با تغییر مقدار آن به 10 ، تغییری در شول آن صورت نگرفته است.

خاصیت ZIndex :

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

Please Login or Register to see this code
در این کد که شامل یک کنترل Canvas و چهار کنترل Button بر روی آن می باشد، دکمه ها دارای خاصیت ZIndex می باشند. نتیجه اجرای کد فوق رادر شکل زیر مشاهده می کنید.


همانطور که در شکل فوق نیز مشخص است، دکمه ای که با رنگ زرد مشخص شده است، به دلیل اینکه دارای مقدار ZIndex با لاتری نسبت به دکمه های دیگر دارد، بر روی تمامی دکمه ها قرار گرفته است.
به دلیل مشابهی، دکمه سبز رنگ در زیر تمامی دکمه ها قرار گرفته است.
دکمه آبی رنگ دارای مقدار ZIndex برابر با 2 می باشد. به عمین دلیل، قسمتی از آن بالاتر از دکمه قرمز رنگ قرار گرفته است ( چون دکمه قرمز رنگ مقدار ZIndex کتری نسبت به دکمه آبی رنگ دارد) و قسمتی از آن زیر دکمه زرد رنگ قرار گرفته است.( به این دلیل که دکمه زرد رنگ دارای خاصیت ZIndex بالاتری نسبت به دکمه آبی رنگ دارد).

[abbas.m.k]

کنترل DockPanel:
در دات نت 1.x و 2.0 با خاصیتی به نام Dock آشنا شدید. این خاصیت برای هر کنترلی که تنظیم می شد ( می شود)، با عث می شد (می شود) که کنترل مورد نظر بر اساس مقداری که برای خاصیت Dock آن تنظیم شد است، به یکی از گوشه های کنترل پدر خودش وصل شود. به عنوان مثال اگر کنترلی دارای مقدار Top برای خاصیت Dock باشد، واین کنترل مستقیما بر روی فرم قرار گرفته باشد، این کنترل به گوشه بالایی فرم متصل می شود. در نتیجه با تغییر عرض فرم، این کنترل به صورت اتوماتیک نیز تغییر سایز می دهد و عرض خودش را با عرض فرم مجددا تنظیم می کند.از این خاصیت در برنامه ها، زیاد استفاده می شود، به عنوان مثال کنترل Status Bar که معمولا در پایین فرم، Dock می شود، ویا منوی برنامه که در گوشه بالایی فرم Dock می شود از این نمونه هستند.

کنترل DockPanel نیز عملکری مشابه با عملکر خاصیت Dock دارد. با این تفاوت که قدرت بسیار بالاتر و امکانات بسیار بیشتری را در اختیار شما قرار می دهد.
هر کنترلی که در کنترل DockPanel قرار بگیرد، خاصیتی به نام Dock به آن پیوست خواهد شد. این خاصیت دارای چهار مقدار Left، Top، Bottom و Right می باشد. توسط این مقادیر می توانید کنترل های خود را در کنترل DockPanel تنظیم نمایید.


به نمونه کد زیر دقت کنید :

Please Login or Register to see this code

در بالاترین، سطح از این کنترل ها، کنترل DockPanel قرار گرفته است. پنج کنترل دیگر به عنوان فرزندان مستقیم کنترل DockPanel قرار گرفته اند که بعضی از این کنترل ها، خود نیز شامل چندین کنترل دیگر می باشند. تمامی کنترل های فرزندف دارای خاصیت پیوست شده Dock می باشند. به عنوان مثال قطعه کد زیر:
Please Login or Register to see this code
دکمه ای را به عنوان فرزند کنترل DockPanel تعریف می کند که در سمت راست خودش قرار گرفته است. دستور DockPanel.Dock="Right" باعث می شود که کنترل، به گوشه سمت راست کنترل DockPanel قرار گیرد.

نتیجه حاص از اجرای کد فوق در شکل زیر مشخص شده است:


ترتیب در Dock کردن کنترل ها:

ترتیب تنظیم خاصیت Dock مربوط به کنترل ها در کنترل DockPanel مهم می باشد. به عنوان مثال دو قعطه کد زیر را نظر بگیرید :

Please Login or Register to see this code
شکل حاصل از اجرای قطعه کد فوق مشابه زیر خواهد بود :

در کد فوق، دکمه ای که با رنگ سبز مشخص شده است، به دلیل اینکه قبل از دکمه آبی رنگ تعریف شده است، کل فضای گوشه بالایی را به خود اختصاص داده است. حال اگر جای تعریف این دو دکمه (button1 و button2) را در کد عوض کنیم، یعنی داشته باشیم :
Please Login or Register to see this code

نتیجه حاصل مشابه زیر خواهد بود :

مقدار Fill در خاصیت Dock :

خاصیت Dock از کنترل DockPanel دارای مقدار Fill نمی باشد. در واقع به آن نیاز ندارد. دلیل این امر به نحوه چیدمان کنترل ها در کنترل DockPanel مربوط می شود. کنترل DockPanel همواره سعی بر دادن کل فضای موجود به کنترل های فرزند خودش می باشد. به عنوان مثال اگر کنترل DockPanel فقط دارای یک کنترل Button باشد، این دکمه کل فضای موجود بر روی کنترل DockPanel را به خود اختصاص می دهد حتی اگر خاصیت Dock مربوط به کنترل را مثلا بر روی Left قرار دهید..(اگر مقادیر عرض و ارتفاع برای کنترل Button تعریف نشده باشد)

حال اگر دکمه دیگری با خاصیت Dock برابر با Right به کنترل DockPanel اضافه کنید، فضای موجود بر روی کنترل DockPanel به دوقسمت تقسیم بندی می شوند. در این حالت مقدار فضایی که دکمه اول احتیاج دارد، در اختیارش قرار داده می شود و بقیه فضای موجود به دکمه دوم اختصاص داده می شود.

این تقسیم بندی برای کنترل های فرزند دیگر ( در صورت وجود) نیز انجام می شود تا نهایتا کل فضای موجود بر روی کنترل DockPanel بین کلیه کنترل های فرزندش تقسیم شود.


خاصیت LastChildFill :

ذکر این نکته ضروری است که تمامی مطالب گفته شده در بخش قبلی (ترتیب در Dock کردن کنترل ها) زمانی درست می باشند که خاصیت LastChildFill از کنترل DockPanel بر روی True تنظیم گردد. اگر این خاصیت True باشد که مقدار پیش فرض آن نیز True می باشد، آخرین کنترلی که بر روی کنترل DockPanel قرار می گیرد، کل فضای باقی مانده از کنترل DockPanel را به خود اختصاص می دهد. در غیر این صورت همه کنترل ها به اندازه مقدار فضایی که نیاز داشته باشند از کنترل DockPanel گرفته و بقیه فضای باقی مانده ( اگر موجد باشد) بدون استفاده باقی خواهد ماند.

به عنوان مثال اگر در کد فوق دستور LastChildFill="False" را اضافه کنیم :

Please Login or Register to see this code

نتیجه اجرا به صورت شکل زیر خواهد بود :

در شکل فوق، آخرین کنترلی که به کنترل DockPanel اضافه شده است، button5 می باشد. کنترل DockPanel به این دکمه به اندازه مورد نیازش ( اندازه ای که بتواند متن داخل دکمه مشخص باشد) فضا می دهد و بقیه فضای موجود ( کادر زرد رنگ) بدون استفاده باقی خواهد ماند.

[abbas.m.k]

کنترل WrapPanel :

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

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

به کد زیر توجه کنید :

Please Login or Register to see this code
این قطعه کد مربوط به پنجره ای است که یک کنترل WrapPanel به عنوان کنترل کانتینر آن قرار داده شده است. درون این کنترل، شش دکمه قرار داده شده است که هر یک دارای خواص مربوط به خودش می باشد. نتیجه حاصل از کد فوق در شکل زیر نشان داده شده است:

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

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

Please Login or Register to see this code

دو شکل زیر نمایی از اجرای کد قبل را با تغییری که در تگ آغازین کنترل WrapPanel داده شده است را نشان می دهد.


یکی از کاربر هایی که از WrapPanel ها می تواند در آن بهره جست، ایجاد کنترل هایی مانند Tool strip می باشد. (البته ابزار های مجزایی برای toolbar ها نیز موجود است).

نکته :
خاصیت دیگری که اکثر کنترل های WPF ، از جمله کنترل WrapPanel دارامی باشند، خاصیت Flow Direction می باشد.
این خاصیت دارای دو مقدار Left To Right و Right To Left می باشد که مقدار پیش فرض آن Left To Right می باشد. این خاصیت جهت تراز بندی کنترل ها را نشان می دهد. بری برخی از زبان ها از جمله زبان فارسی، این خاصیت بسیار پر کاربرد می باشد.

به عنوان مثال می توانیدبا اضافه کردن دستور:

Please Login or Register to see this code
یک تگ آغازین کنترل WrapPanel ، ستون آغازین را برای قرار گیری کنترل ها را از سمت راست به چپ تعیین کنید.

[abbas.m.k]

کنترل UniformGrid:
این کنترل ظاهری شبیه به عنصر Gird (که در بخش بعدی توضیح داده خواهد شد) دارد. این کنترل به تعدادی سطر و ستون با اندازه های یکسان تقسیم بندی می شود. عناصر فرزند این کنترل می توانند در هریک از این سلول ها قرار بگیرند.
سلول های حاصل از ایجاد این کنتنرل، همگی دارای اندازه های یکسان می باشند.


نحوه استفاده از این کنترل به صورت زیر می باشد:

Please Login or Register to see this code
که شامل تعریف خود کنترل، تعداد سطر ها و تعداد ستون های آن می باشد.

این کنترل برای موارد خاصی به کار برده می شود و به ندرت در طراحی واسط های برنامه شما به کار برده می شود. به عنوان مثال شکل زیر یک جدول ضرب 5*5 را نشان می دهد.


Please Login or Register to see this code
نکته :
در این کنترل، صراحتا نمی توانید مشخص کنید که کدام کنترل در چه سلولی قرار بگیرد. در واقع سلول هر کنترل بر اساس ترتیبی که آن کنترل در کنترل های فرزند کنترل UniformGrid دارد، مشخص می شود.

[abbas.m.k]

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

تعریف کنترل گرید در ساده ترین حالت، (تنها دارای یک سطر و یک ستون) به صورت زیر می باشد.

Please Login or Register to see this code
تعریف فوق که در ابتدای ایجاد هر پنجره جدیدی،د رون کد XAML آن پنجره مشاهده می کنید، یک کنترل گرید دارای یک سطر و ستون برای شما ایجاد می کند. همانطور که قبلا نیز اشاره شد، اکثر کنترل ها در حالت پیش فرض، دارای خواص HorizontalAlignment و VerticalAlignment هستند که به صورت پیش فرض دارای مقدار Stretch می باشند. با توجه به این نکته چنانچه شما یک دکمه مانند Button را به توسط دستور زیر :
Please Login or Register to see this code
به کنترل گرید تعریف شده در کد قبل اضافه کنید، کل فضای گرید به کنترل Sample Button تعلق خواهد گرفت.

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

Please Login or Register to see this code

همانطور که در شکل فوق مشاهده می شود، کنترل Button کل فضای موجد گرید و در نتیجه کل فضای پنجره را در اختیار گرفته است. ( زیرا کنترل گرید نیز کل فضای پنجره را در اختیار گرفته است)

[abbas.m.k]

ادامه کنترل گرید:

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

قرار گیری کنترل ها در کنترل گرید:

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

2-مشخص کردن سطر و ستون دلخواه برای کنترل های فرزند:
همانطور که قبلا نیز اشاره شد، هر کنترل فرزندی بر اساس نوع کنترل والد خویش، دارای خواص جدیدی می شود که آن ها را خواص پیوست شده نامیدیم. این امر برای کنترل هایی که کنترل گرید به عنوان کنترل والد آن ها می باشد نیز مستثنا نمی باشد. دو خاصیت Row و Column از جمله خواص پیوست شده به کنترل های فرزند، کنترل گرید می باشند که توسط آن ها می توانید محل قرار گیری کنترل فرزند را مشخص نمایید. به عنوا مثال، کنرلی که دارای مقدار Row = 2 و Column = 3 می باشد، درون سطر دوم و ستون سوم از کنترل گرید قرار خواهد گرفت.

سطر ها در کنترل گرید :

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

Please Login or Register to see this code
در شکل فوق، سه سطر برای کنترل گرید تعریف شده است. تعاریف سطر ها بین دو تگ آغازین
<Grid.RowDefinitions> ، و تگ پایانی </Grid.RowDefinitions> قرار می گیرند.
هر سطر توسط دستور <RowDefinition></RowDefinition> مشخص می شود. در واقع هر دستور <RowDefinition></RowDefinition> بیانگر یک سطر به عنوان سطر های گرید می باشد. در نتیجه تعریف فوق، سه سطر برای کنترل گرید ایجاد می کند.

هر سطر در کنترل گرید دارای خواص بسیاری است که رفتار آن سطر را در مقابل کنترل هایی که درون آن سطر قرار خواهند گرفت مشخص می کند.

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

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

Please Login or Register to see this code
در شکل فوق، سه ستون برای کنترل گرید تعریف شده است. تعاریف ستون ها بین دو تگ آغازین
<Grid.ColumnDefinitions> ، و تگ پایانی </Grid.ColumnDefinitions> قرار می گیرند.
هرستون توسط دستور <ColumnDefinition></ColumnDefinition> مشخص می شود. در واقع هر دستور <ColumnDefinition></ColumnDefinition> بیانگر یک ستون به عنوان ستون های گرید می باشد. در نتیجه تعریف فوق، سه ستون برای کنترل گرید ایجاد می کند.
هر ستون در کنترل گرید دارای خواص بسیاری است که رفتار آن ستون را در مقابل کنترل هایی که درون آن ستون قرار خواهند گرفت مشخص می کند.
از میان این خواص، خواص Width، MaxWidth و MinWidth از اهمیت بالاتری بر خوردار هستند. تعاریف مربوط به خواص MaxWidth و MinWidth در بخش های قبلی به تفضیل گفته شد.
خاصیت Width دارای سه مقدار مختلف می تواند باشد که کمی جلوتر در بخش "تعادل در اندازه سطر ها و ستون ها" به همراه تعریف مقادیر Height برای سطر ها توضیح داده خواهند شد.


بخش سوم: چیدمان و طراحی کنترل ها ( قسمت یازدهم)

ادامه کنترل گرید:

خاصیت ShowGridLines :
کنترل گرید دارای خاصیتی به نام ShowGridLines می باشد که مقدار پیش فرض آن False می باشد.
چنانچه این مقدار را به True تغییر دهید، می توانید خطوطی که سطر ها وستون های کنترل گرید را از یکدیگر جدا می کند را مشاهده نمایید. البته معمولا از این خاصیت استفاده چندانی نمی شود مگر در موارد خاصی که شما نیاز داشته باشید، خط واصل بین سطر ها وستون ها را به کاربر نهایی نشان دهید.
حال به قطعه کد زیر که ترکیبی از دو قطعه کد فوق است توجه فرمایید :

Please Login or Register to see this code
قطعه کد فوق، سه سطر و سه ستون برای کنترل گرید تعریف می کند که در مجموع 9 سلول را برای این کنترل به وجود می آورند. نتیجه حاصل از قطعه کد فوق را در شکل زیر مشاهده می کنید:

تعادل در اندازه سطر ها و ستون ها :
همانطور که در شکل فوق مشخص است، فضای موجود بر روی کنترل گرید، به صورت مساوی بین تمامی سطر ها وستون های این کنترل تقسیم می شود. در زمان اجرای برنامه و با تغییر سایز پنجره و به تبع آن تغییر سایز گرید، این فضا همچنان به صورت اتوماتیک، به قسمت های مساوی بین سطر هاو ستون های کنترل گرید، تقسیم می شود.
در واقع در حالت عادی، کنترل گرید دارای رفتاری مشابه با کنترل UniformGrid می باشد که در بخش قبلی در رابطه با آن توضیحات مفصلی داده شد.
همانطور که اشاره شد، سطر ها دارای خاصیتی به نام Height و ستون ها دارای خاصیتی به نام Width در کنترل گرید می باشند. هر یک از این دو خاصیت، می توانند یکی از سه مقدار زیر را در بر گیرند که با توجه به آن مقدار فضای آن و رفتار آن با کنترل درونی خودش مشخص می شود.
1-سایز مطلق :
توسط این خاصیت می توانید، مقدار مشخص و ثابتی را به عنوان عرض ستون و یا ارتفاع سطر مشخص کنید. به عنوان مثال دستور

Please Login or Register to see this code
سطری را با ارتفاع ثابت 200 تعریف می کند و دستور زیر :
Please Login or Register to see this code
ستونی را با عرض ثابت 200 تعریف می کند.
2-سایز اتوماتیک :
این خاصیت، عرض ستون و ارتفاع سطر را به صورت اتوماتیک و بر اساس نیاز کنترل درونی خودش تنظیم میکند. به عنوان مثال اگر کنترلی با دارای عرض 200 و ارتفاع 300 باشد و درون سلولی که سطر و ستون آن با این روش مقدار دهی شده اند، قرارداشته باشد، سلول مورد نظر تغییر اندازه داده تا بتواند کل فضای مورد نیاز آن کنترل را تامین کنید. مقداری که باید به کار برده شود تا سطر و ستونی به عنوان سطر و ستون اتوماتیک معرفی گردد، کلمه Auto می باشد. به کد های زیر توجه کنید:

Please Login or Register to see this code
در شکل فوق سطر و ستونی با ارتفاع اتوماتیک تعریف شده اند.
3-سایز نسبی :
توسط این خاصیت، فضای موجود بین تعدای سطر و ستون تقسیم بندی می شود. در واقع این حالت، حالت پیش فرض برای عرض ستون ها و ارتفاع سطرها می باشد. توسط کاراکتر * می توانید از این خاصیت برای خواص Width و Height استفاده نمایید.
به عنوان مثال، کد های زیر نتیجه ای یکسان با آن چیزی که در شکل قبلی ملاحظه کردید را خواهد داشت.

Please Login or Register to see this code
نکته قابل توجه ای که می توان در حالت سایز نسبلی به آن توجه داشت و به واقع دلیل اصلی نام گذاری آن نیز، همین نکته می باشد این است که شما می توانید سطری یا ستونی را از لحاظ ارتفاع و عرض، چندین برابر سطر و یا ستون دیگری تعریف کنید. به عنوان مثال سطری که خاصیت ارتفاع آن به صورت Height = 2* تعریف شده باشد، ارتفاعش دو برابر سطری است که ارتفاع آن به صورت Height = * تعریف شده باشد. به همین صورت سطری که ارتفاع آن به صورت Height=0.25* تعریف شده است، ارتفاعی به اندازه 1/8 سطری دارا که ارتفاع آن به صورت Height =2* تعریف شده است. این موضوع در مورد ستون ها و عرض آن ها نیز صدق است.

[abbas.m.k]

ادامه کنترل گرید

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

برای تخصیص سلول خاصی از کنترل گرید به یکی از کنترل های فرزند از خواص پیوست شده Row و Column استفاده خواهیم کرد. به نمونه کد زیر دقت کنید:

Please Login or Register to see this code
در قعه کد فوق، دکمه تعریف شده در سطر و ستون سوم ( سلول 9) در گرید مربوطه قرار خواهید گرفت.
نکته :
شماره سطر ها وستون ها در گرید از صفر شروع می شود. بنابرین مقدار 2 برای سطر و ستون معرف سطر و ستون سوم در گرید می باشد.
نکته:
چنانچه بخواهید کنترلی را در سلول اول از گرید قرار دهید، نیاز به تنظیم خواص Row و Column از گرید ندارید.
درواقع مقدار پیش فرض این خواص، صفر می باشد که بیانگر سطر و ستون اول گرید می باشد.
برای درک بهتر به نمونه کر زیر دقت کنید :

Please Login or Register to see this code
هماطور که مشاهده می کنید، برای اولین دکمه خواص Row و Column تنظیم نشده اند، در نتیجه دکمه مذکور در اولین سطر و ستون از گرید قرار خواهد گرفت.
نتیجه اجرای کد فوق مشابه زیر خواهد بود :

[abbas.m.k]

محدوده سطر و ستون ها در کنترل گرید :
در این قسمت دو خاصیت دیگر از خواص پیوست شده برای کنترل های درون کنترل گرید را مورد بررسی قرار خواهیم داد. این خواص نشان دهنده محدوده ای از تعداد سطر ها وستون هایی از گرید هستند که یک کنترل می تواند دربر گیرد. توسط این خواص می توانید کنترل بهتری بر روی عناصر و محل قرار گیری آن ها داشته باشید.

خاصیت RowSpan :

توسط این خاصیت می توانید مشخص کنید که کنترلی چند سطر از سطر های گرید را می تواند در بر گیرد. به عنوان مثال قطعه کد زیر :

Please Login or Register to see this code
در قطعه کد فوق، دکمه دوم دارای خاصیت RowSpan برابر با سه می باشد. همچنین دقت کنید که خاصیت Row آن از یک در مثال قبل به صفر در این مثال تغییر کرده است.
نتیجه حاصل از کد فوق را در شکل زیر مشاهده می کنید


خاصیت ColumnSpan :
توسط این خاصیت می توانید مشخص کنید که کنترلی چند ستون از ستون های گرید را می تواند در بر گیرد. به عنوان مثال قطعه کد زیر :

Please Login or Register to see this code
در قطعه کد فوق، دکمه دوم دارای خاصیت ColumnSpan برابر با سه می باشد. همچنین دقت کنید که خاصیت Column آن از یک در مثال قبل به صفر در این مثال تغییر کرده است.
نتیجه حاصل از کد فوق را در شکل زیر مشاهده می کنید:


نمونه کد زیر نحوه استفاده از خواص RowSpan و ColumnSpan و نتیجه آن را در شکل بعد از آن نشاند می دهد.
Please Login or Register to see this code

دقت کنید که در این نمونه، تعداد سطر ها وستون ها به چهار، افزایش پیدا کرده است. خاصیت RowSpan از دکمه دوم برابر با چهار و خاصیت ColumnSpan از آن برابر با دو تنظیم شده است.
کنترل گرید از مهمترین و پر کاربرد ترین کنترل های کانتینر در WPF می باشد. پس تمرکز زیادی بر آن داشته باشید و سعی کنید که کاملا بر آن و نحوه استفاده از ان مسلط شوید

[abbas.m.k]

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

کنترل های کانتینر، تنها امکانات WPF برای نگهداری کنترل های فرزند نیستند. تکنولوژی WPF مدل دیگری از مفهوم محتوا را ارائه می کند که در این بخش به آن ها خواهیم پرداخت.
در این مدل جدید، می توانید درون کنترل های ساده ای مانند Button ، کنترل های دیگری مانند TextBox ، Label، و یا ترکیبی از این کنترل ها را قرار دهید. همچنین قادر خواهید بود، اشکال برداری و کنترل های دیگر را درون این کنترل با مدیریت بسیار بالایی قرار دهید.

مفهوم Content در WPF :
در تکنولوژی WPF مفهوم عناصر کمی متفاوت با مفهوم کنترل می باشد. به هر چیزی که شما در پنجره های برنامه خود در WPF قرار می دهید، یک عنصر تلقی می شود، در حالی که کنترل ها عناصر ویژه ای هستند که می تواننئد نسبت به اعمال کاربر، عکس العمل نشان دهند. مثلا می توانند ورودی های کاربر را دریافت کنند، خروجی ها ی برنامه را به کاربر بفرستند و ...

کنترل های Content، نمونه خاص دیگری از عناصر در تکنولوژی WPF می باشند که قابلیت دربرگیری و نمایش مقادیری را دارند که ما به آن ها محتوا می گوییم و به کنرل هایی که این خاصیت را شامل می شوند، کنترل های محتوا می گوییم. در واقع هر کنترل محتوا می توانند تنها یک عنصر داخلی را درون خود قرار دهند. به همین جهت، تفاوتی بین کنترل های محتوا و کنترل های کانتینر وجود دارد. کنترل های کانتیر می توانند، صفر، یک و یا چندین کنترل را به عنوان کنترل های داخلی و کنترل های فرزند خود در برگیرند.

نکته:
البته این گفته که کنترل های محتوا می توانند، تنها یک عنصر به عنوان عنصر داخلی خود بپذیرند، آن ها را محدود نمی کند. در واقع شما می توانید، با به کارگیریی کنترل های کانتینر، عناصر و کنترل های بسیاری را درون یک کنترل محتوا نشان دهید.


به عنوان مثال، عکس زیر نمونه ای از یک عنصر ToolTip را نشاند می دهد. همانطور که می دانید ایجاد چنین عنصری در دات نت 2.0 نیاز به کد نویسی زیادی دارد. ضمن اینکه عکس زیر حالت ساده ای از نحوه استفاده از Content مب باشد


همانطور که اشاره شد، کنترل های کانتینر از کلاس انتزاعی پایه ای به نام Panel ارث بری می کنند، کنترل های محتوا نیز از کلاس انتزاعی به نام ContentControl ارث بری می کنند. این موضوع در شکل زیر نشان داده شده است



همانطور که در شکل فوق نشان داده شده است، بسیاری از کنترل های اولیه WPF مانند Label، Button، ToolTip و ...کنترل های محتوا می باشند. علاوه بر این کنترل ها، کنترل های محتوای دیگری وجود دارند که علاوه بر محتوایی بودن آن ها، خواص دیگری را نیز دارا می باشند.

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

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

ب) دسته دوم، کنترل هایی هستند که علاوه بر داشتن خاصیت کنترل های دسته اول، دارای بخش دیگری به نام Header می باشند که عملی مانند بخش Content را انجام می دهند. از این کنترل ها می توان به کنترل TabItem ، کنترل GroupBox، Expander و ... اشاره کرد که در بخش های آتی با آن ها آشنا خواهید شد.

[abbas.m.k]

خاصیت Content :
هر کنترل محتوا، دارای خاصتی به نام Content می باشد. این خاصیت در برگیرنده عناصری خواهد بود که به عنوان محتوای کنترل مورد نظر شناخته می شوند.
به طور کلی خاصیت Content در کنترل های محتوا، می تواند شامل دو دسته کلی زیر از عناصر WPF باشد:
الف) دسته اول عناصری هستند که از کلاس UIElement ، ارث بری نمی کنند. در این موارد، متد ToString() فراخوانی شده تا متن آن عنصر را به عنوان محتوای عنصر مورد نظر قرار دهد.

ب) دسته دم عناصری که از کلاس UIElement ارث بریم می کنند. این عناصر در واقع تمامی عناصر و.یژوال در WPF را شامل می شوند. کمپایلر از متد OnRender این عناصر استفاده می کند تا قابل نمایش در کنترل محتوا با شند.


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

Please Login or Register to see this code
کد فوق تنها یک رشته متنی را به عنوان محتوای عنصر Button در نظر گرفته است. این نوع از محتوا، از نوع دسته (الف) می باشد.
نتیجه اجرای این کد شبیه به شکل زیر خواهد بود:



در واقع می توان در این حالت، خاصیت Content را به خاصیت Text عناصر در دات نت فریم ورک 2.0 تشبیه کرد. البته دقت داشته باشید که این مورد صرفا یک تشبیه می باشد.

حال به کد زیر دقت کنید :

Please Login or Register to see this code

کد فوق یک عکس را به عنوان محتوای Button معرفی می کند. این نمونه از محتوا، ار نوع دسته (ب) می باشد که با فراخوانی متد OnRender، عکس مورد نظر قابل نمایش در کنترل Button به عنوان محتوا گردیده است.
نتیجه حاصل از اجرای کد فوق به صورت زیر می باشد:



دو قطعه کد فوق از ساده ترین، حالت های خاصیت Content بودند. درواقع قدرت این خاصیت بسیار فراتر از قرار گیری یک عکس و یا یک رشته متنی درون آن می باشد. با استفاده از کنترل های کانتینر می توانید کنترل های بسیاری را در یک Button و یا هر کنترل محتوای دیگر قرار دهید.
به قطعه کد زیر دفت کنید :


Please Login or Register to see this code
در قطعه کد فوق، یک Button در کنترل کانتینر اصلی فرم یعنی گرید قرار گرفته است. در خاصیت Content کنترل Button یک کنترل StackPanel قرار گرفته ایت که خود شامل پنج کنترل فرزند به شزح زیر می باشد:
ابتدا یک عنصر Image ، در بالاترین قسمت کنترل StackPanel قرار گرفته است. سپس یک کنترل TextBlock با متن Fill Boxes And then Click Ok قرار گرفته است. پس از آن دو کنترل StackPanel داخلی به مجموعه کنترل های فرزند اضافه شده اند.
هر یک از این دو کنترل StackPanel داخلی خود شامل دو کنترل فرزند می باشند، که به صورت افقی در کنترل کانتینر خود قرار گرفته اند.
پس از دو کنترل StackPanel داخلی، یک کنترل Button و در نهایت یک عنصر Image دیگر قرار داده شده است.

نتیجه حاصل از اجرای کد فوق را در شکل زیر مشاهده می کنید:



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