گاهی اوقات ممکن است نیاز داشته باشید تا برنامه‌ای بسازید که امکان تغییر سایز داشته باشد. یعنی کاربر بتواند ابعاد پنجره برنامه را به دلخواه تغییر دهد و یا پنجره برنامه را به حالت Maximize ببرد. یکی از کامپوننت‌های ساده برای ساخت Windows Form منعطف در سی شارپ TableLayoutPanel است. در این آموزش می‌خواهیم نحوه‌ی استفاده از این کامپوننت را فرا بگیریم. برای شروع یک پروژه WinForm مانند تصویر زیر در ویژوال استودیو ایجاد کنید.
پنجره‌ی اصلی اسن برنامه که در تصویر فق نمایش داده شده است، ابعادی معادل ۴۰۰ پیکسل عرض و ۳۰۰ پیکسل ارتفاع دارد. همچنین تمام فرم راست چین یا همان RTL شده است. پس از ایجاد فرم اصلی از منوی ToolBox ابزار TableLayoutPanel را انتخاب کنید. این کامپوننت برای ایجاد محدوده‌های منعطف با ساختار جدولی یعنی شامل سطرها و ستون‌ها، مورد استفاده قرار می‌گیرد.
هنگامی که کامپوننت TableLayoutPanel را انتخاب کنید و بر روی فرم کلیک کنید، یک محدوده جدول مانند همانند تصویر زیر نمایان خواهد شد. بطور پیشفرض این جدول دو ستون(Column) و دو سطر(Row) دارد.
جهت ویرایش تعداد سطرها یا ستون‌های این جدول، و یا تعیین سهم هر سطر یا ستون از کل فضای عمودی یا افقی، می‌توانیم بر روی ایکون بالا سمت راست کامپوننت کلیک کنیم و گزینه Edit Rows and Columns را انتخاب کنیم.
با کلیک بر روی گزینه‌ی مذکور، پنجره ویرایش سطرها و ستون‌های جدول نمایان خواهد شد. در این صفحه می‌توانید تعداد سطرها و ستون‌ها را کم یا زیاد کنید. درصد سهم هر سطر یا ستون را بر اساس درصد(Percent)، مقدار مشخص بر حسب پیکسل(Absolute) و یا بصورت سایز خودکار(AutoSize) قرار دهید.
برای مثالی که در این آموزش می‌خواهیم انجام بدهیم، فرض ما این است که برنامه از یک منوی کناری در سمت راست با درصد مالکیت افقی ۳۰ درصد و یک بخش محتوا با درصد مالکیت افقی ۷۰ درصد تشکیل شده است. در نتیجه تنها دو ستون و یک سطر نیاز خواهیم داشت و تمام مقدار دهی‌ها را بر حسب درصد انجام می‌دهیم. نتیجه توضیحات ما مانند تصویر زیر خواهد شد.
خب تا به اینجای کار ما دو ستون اصلی جهت قرار گرفتن کنترل‌ها را ایجاد کردیم. اما ایرادی که هنوز برطرف نشده این است که TableLayoutPanel ما تمام وسعت پنجره را پوشش نمی‌دهد. برای رفع این ایراد باید به خصوصیات(Properties) کامپوننت برویم و مقدار Dock آن را به حالت Fill تغییر دهیم.
در تصویر فوق نشان داده شده است که چگونه وضعیت Dock را به مقدار Fill تغییر دهیم. با اینکار، کامپوننت ما خود را به اندازه کامپوننت پدر خود که پنجره‌ای اصلی برنامه است، وسعت می‌دهد. کامپوننت پدر همان کامپوننتی است که کامپوننت ما در آن قرار گرفته است. همانطور که اشاره شد در مثال ما پنجره‌ی برنامه کامپوننت پدر برای TableLayoutPanel است. در نتیجه، تغییر Dock به مقدار Fill باعث می‌شود که TableLayoutPanel به اندازه ابعاد پنجره وسعت یابد. به تصویر زیر دقت کنید.
خب، بیاید مثال این آموزش را کمی پیچیده‌تر کنیم. فرض کنید در ستون سمت چپ که ۷۰ درصد عرض پنجره را اشغال خواهد کرد، سه ردیف برای قرار دادن محتوا داشته باشیم. این سه ردیف هر سه ارتفاع برابری داشته باشند. یعنی از نظر عمودی هر کدام تقریبا ۳۳ درصد از ارتفاع را به خود اختصاص دهند.
حال که به ساختار جدولی TableLayoutPanel فکر می‌کنیم، انجام اینکار غیرممکن به نظر می‌رسد. زیرا تعریفی که از جدول در ذهن داریم، این است که سطرها و ستون‌ها در نظمی مشخص کنار هم قرار گیرند. اما برای حل این چالش می‌توانیم در ستون سمت چپ یک نمونه دیگر از کامپوننت TableLayoutPanel قرار دهیم. به تصویر زیر نگاه کنید.
برای این کامپوننت جدید نیز به قسمت ویرایش سطرها و ستون‌ها می‌رویم. این‌بار به یک ستون با درصد مالکیت افقی کامل و سه ردیف با درصد مالکیت عمودی برابر نیاز داریم.
پس از اعمال تغییرات مورد نیاز برای تعداد سطرها و ستون‌ها، از منوی Properties کامپوننت جدید، مقدار Dock را به Fill تغییر می‌دهیم تا این جدول جدید تمام وسعت کامپوننت پدر را که همان ستون سمت چپ کامپوننت اول است، پر کند.
بسیار عالی، همه چیز بی‌عیب به نظر می‌رسد. بخش‌بندی‌های مورد نیاز خود را انجام دادیم. اکنون زمان چیدن کنترل‌هاست. از آنجا که می‌خواهم این آموزش ساده باشد و تمرکز آن روی موضوع اصلی باشد، یک کامپوننت ساده را جهت جایگذاری در مکان‌های مورد نظر انتخاب می‌کنم. این کامپوننت GroupBox است. برای انتخاب این کامپوننت به منوی ToolBox بروید و از بخش Containers کامپوننت مورد نظر را انتخاب کنید.
پس از انتخاب کامپوننت GroupBox، بر روی ستون سمت راست که ۳۰ درصد از عرض برنامه را اشغال می‌کند، کلیک کنید. کامپوننت در ستون مربوطه قرار می‌گیرد.
اما همانطور که در تصویر بالا نیز مشخص است، کامپوننت GroupBox تمام فضای ستون را پر نکرده است. برای رفع این ایراد باید از منوی Properties مربوط به GroupBox خصوصیت Dock را به مقدار Fill تغییر دهیم.
همانطور که مشاهده می‌کنید GroupBox تمام ستون را پر کرد.
همین کار را برای سه بخش دیگر نجام دهید تا در نهایت به حالت نمایش داده شده در تصویر زیر برسید.
توجه کنید که حتما برای پنجره اصلی برنامه حداقل سایز تعیین کنید. با اینکار می‌توانید مطمئن شوید که کاربر نمی‌تواند برنامه را از ابعاد تعیین شده کوچک‌تر کند. برای تعیین حداقل سایز پنجره، بر روی فرم اصلی برنامه کلیک کرده و سپس از منوی Properties خصوصیت Minimum Size را مقداردهی کنید.
بسیار عالی، تمام موارد مورد نیاز انجام شد. حال برنامه را اجرا کنید(Run) و سعی کنید ابعاد پنجره را تغییر دهید. خواهید دید که نسبت‌هایی که تعیین کردید در هر حالتی پایدار خواهند بود.
امیدوارم که نحوه‌ی ساخت Windows Form منعطف در سی شارپ را بخوبی یاد گرفته باشید. همچنین برای مطالعه سایر آموزش های سی شارپ می‌توانید به دسته مربوطه مراجعه کنید.
موفق و پیروز باشید…