قسمت بیست و دوم : کنترل Grid

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

کد:

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

کد:

به کنترل گرید تعریف شده در کد قبل اضافه کنید، کل فضای گرید به کنترل Sample Button تعلق خواهد گرفت.

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

کد:


    

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

/presentation"
    

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

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

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

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

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

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

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

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

کد:

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

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

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

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

کد:

در شکل فوق، سه ستون برای کنترل گرید تعریف شده است. تعاریف ستون ها بین دو تگ آغازین
، و تگ پایانی قرار می گیرند.
هرستون توسط دستور مشخص می شود. در واقع هر دستور بیانگر یک ستون به عنوان ستون های گرید می باشد. در نتیجه تعریف فوق، سه ستون برای کنترل گرید ایجاد می کند.
هر ستون در کنترل گرید دارای خواص بسیاری است که رفتار آن ستون را در مقابل کنترل هایی که درون آن ستون قرار خواهند گرفت مشخص می کند.
از میان این خواص، خواص Width، MaxWidth و MinWidth از اهمیت بالاتری بر خوردار هستند. تعاریف مربوط به خواص MaxWidth و MinWidth در بخش های قبلی به تفضیل گفته شد.
خاصیت Width دارای سه مقدار مختلف می تواند باشد که کمی جلوتر در بخش "تعادل در اندازه سطر ها و ستون ها" به همراه تعریف مقادیر Height برای سطر ها توضیح داده خواهند شد.

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

کد:


    
xmlns="http :// schemas.microsoft.com/winfx/2006/xaml
/presentation"
    
xmlns:x="http://schemas.microsoft.com/winfx/2006/xa
ml"
    Title="Window1" Height="300" Width="300">

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

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

کد:

سطری را با ارتفاع ثابت 200 تعریف می کند و دستور زیر :

کد:

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

کد:

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

کد:


    
    
         

        
Height="*">
        
Height="*">
    
    
    
    
    
        
Width="*">
        
Width="*">
        
Width="*">

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

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

کد:

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

کد:


 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml
/presentation"
 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xa
ml"
    Title="Window1" Height="300" Width="300">
    
        
        
             
            
            
        
        
 
        
        
            
>
            
>
            
>

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

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

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

کد:

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

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

کد:

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

نمونه کد زیر نحوه استفاده از خواص RowSpan و ColumnSpan و نتیجه آن را در شکل بعد از آن نشاند می دهد.

کد:

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

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

پ و2:
از بابت فاصله زیادی که بین پست ها افتاد؛ پوزش می طلبم. گرفتاری پیش آمده بود.. اگر باز هم تاخیر چند روزه داشتم، نگران نباشید و مطمئنا این تاپیک به جاهای خوبی خوهد رسید(انشاء الله)
ایام به کامتان

وب سایت آموزشهای تخصصی :: Biamooz

منوی اصلی

مباحث آموزشی

محصولات آموزشی

جستجوی محصول