کار با Layout Controlها (درس دوم و فصل اول از مجموعه آموزشی طراحی رابط کاربری در uwp)

کاور مجموعه آموزشی طراحی رابط کاربری در uwp

همانطور که در درس قبلی اشاره شد، در این درس راجع به Layout Controlها صحبت خواهیم کرد. Layout Controlها کنترل‌هایی هستند که برای مرتب کردن، گروه‌بندی و چینش کنترل‌های بصری استفاده می‌شوند. این کنترل‌ها شامل Grid، StackPanel، ScrollViewer، RelativePanel، Border و غیره هستند که در این مجموعه آموزشی فقط راجع به Layout Controlهای نامبرده شده، صحبت خواهد شد.

۱. Grid: گریدها پرکاربردترین کنترل از نوع Layout Controlها هستند. مهم‌ترین ویژگی این کنترل، قابلیت تقسیم بندی آن است. ما میتوانیم گرید را به صورت ستونی و عمودی تقسیم بندی کنیم. نحوه تقسیم بندی گرید به سه ستون و دو سطر به صورت زیر است:

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition/>

<ColumnDefinition/>

<ColumnDefinition/>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition/>

<RowDefinition/>

</Grid.RowDefinitions>

</Grid>

</Grid>

نکته: ستون‌ها و سطرها، عملا دیده نمیشوند. (این تقسیم‌بندی گرید را بصورت کاربردی امتحان خواهیم کرد.)

نکته: در مثال فوق، فرقی نمیکند که تگ <Grid.ColumnDefinitions/> را بعد یا قبل از تگ <Grid.RowDefinitions/> به کار ببریم.

نکته: ColumnDefinitions و RowDefinitions بصورت یک پراپرتی برای تگ گرید محسوب میشوند، ولی برای اینکه خود این پراپرتیها هم باید مقادیری بصورت ColumnDefinition یا RowDefinition بگیرند که نشان‌دهنده ستون‌ها یا سطرهای گرید موضوع بحث باشد. لذا بصورت تگ Grid.ColumnDefinitions نوشته میشوند که نشان‌دهنده خاصیت ColumnDefinitions برای Grid است.

نکته: هر کدام از تگ‌های <ColumnDefinition/> و <RowDefinition/> پراپرتی مخصوص به خود و بسیار مهمی نیز دارند که به ترتیب Width و Height هستند. هر یک از پراپرتی‌های Height یا Width به صورت‌های زیر مقدار میگیرند:

<ColumnDefinition Width=”*”/>

<ColumnDefinition Width=”150″/>

<ColumnDefinition Width=”Auto”/>

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

<ColumnDefinition Width=”5*”/>

<ColumnDefinition Width=”*”/>

<ColumnDefinition Width=”2*”/>

در کد بالا ما ستون‌های گرید را به ترتیب با نسبت‌های پنج، یک و دو تقسیم کردیم.

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

برای اینکه کنترل‌های خود را داخل ستون یا سطری از گرید قرار دهیم، باید که از پراپرتی Grid.Row یا Grid.Column در داخل کنترل مد نظر قرار دهیم (حتما باید کنترل مد نظر داخل گرید باشد تا از این پراپرتی‌ها بتوان استفاده کرد.). برای مثال گریدی را در نظر بگیرید که ۵ ستون و ۶ سطر داشته باشد و بخواهیم Button یا دکمه‌ای را در سر سوم و ستون دوم قرار دهیم:

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition/>

<ColumnDefinition/>

<ColumnDefinition/>

<ColumnDefinition/>

<ColumnDefinition/>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition/>

<RowDefinition/>

<RowDefinition/>

</Grid.RowDefinitions>

<Button x:Name=”btn1″ Content=”This is a test.” Grid.Row=”2″ Grid.Column=”1″ Width=”۶۰”/>

</Grid>

نکته: در برنامه نویسی اعداد از صفر شروع میشوند و اعداد حسابی هستند، لذا به جای نوشتن عدد ۳ در Grid.Row، ۲ و به جای ۲ در Grid.Column عدد یک را قرار میدهیم ولی در پراپرتیهای Grid.ColumnSpan یا Grid.RowSpan اعداد به صورت عدد طبیعی نوشته میشوند.

اگر هم بخواهیم که Button یا هر کنترلی در دو سطر یا ستون یک گرید قرار بگیرد، از پراپرتی‌های Grid.RowSpan یا Grid.ColumnSpan در کنترل مورد بحث استفاده میشود.

نکته: در مثال فوق، اگر پراپرتی Width در سومین تگ <ColumnDefinition/> را برابر با Auto قرار دهیم، خواهیم دید که Width ستون سوم از کنترل درونی آن (که در مثال ما همان Button هست) ارث میبرد.

۲. StackPanel: استک پنل نیز یکی دیگر از کنترل‌های پرکاربرد از Layout Controlها میباشد. با استفاده از این کنترل میتوان عناصر را با ترتیب (به صورت عمودی یا افقی) کنار هم چید. مهم‌ترین پراپرتی این کنترل که وجه تمایز بین Layout Controlها است، پراپرتی Orientation میباشد که ترتیب چینش کنترل‌ها را مشخص میکند که دارای دو مقدار Horizontal و Vertical است. به مثال زیر توجه کنید:

<StackPanel Padding=”10″>

<TextBlock>Welcome to Winten.ir</TextBlock>

<Button Margin=”0,5″ Content=”Login”/>

<TextBlock>Winten.ir</TextBlock>

</StackPanel>

خروجی کد بالا بصورت زیر است:

تصویر خروجی در Stack Panel

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

یرتصویر خروجی در StackPanel در حالت افقی

نکته: پراپرتی Padding که برای استک پنل در نظر گرفته شده است، در واقع فاصله زیر مجموعه‌های استک پنل از خود استک پنل است. این پراپرتی برای اکثر کنترل‌ها موجود میباشد. 

نکته: پراپرتی Margin هم برعکس پراپرتی Padding است. با استفاده از این پراپرتی فاصله کنترل ما از کنترل‌های دیگر را میتوانیم کنترل کنیم، برای مثلا در تصویر اول، شما میبینید که بعد و قبل از Button به اندازه ۵ پیکسل فاصله ایجاد شده ولی در تصویر دوم فاصله ای از سمت راست و چپ وجود ندارد. Margin و Padding را بصورت‌های زیر میتوان تعریف کرد:

۱. حالت اول اختصاص یک حرف است که فاصله را از ۴ جهت (بالا، پایین، راست و چپ) را مشخص میکند.

۲. حالت دوم استفاده از دو حرف است:

حالت دوم مارجین

قسمت اول که با کادر آبی مشخص شده است، فاصله از  بالا و پایین و قسمتی که با کادر بنفش مشخص شده، فاصله از راست و چپ را نشان میدهد.

۳. در حالت سوم هر جهت به طور جداگانه تعریف میشود:

حالت سوم مارجین

کادر بنفش فاصله از راست، کادر آبی فاصله از بالا، کادر سبز فاصله از چپ و کادر زرد فاصله از پایین را مشخص میکند.

۳. RelativePanel: این کنترل از جدیدترین کنترل‌ها میباشد که برای Responsive یا واکنش‌گرا کردن برنامه ها استفاده میشود. با استفاده از این کنترل کاربردی، میتوان پوزیشن و قرارگیری عناصر کودک را بصورت مرتبط با یکدیگر یا با پنل برقرار کرد. برای تفهیم این کنترل به نمونه کد زیر توجه کنید:

<RelativePanel>

<Rectangle Name=”rec1″ Fill=”Red” Width=”50″ Height=”50″/>

<Rectangle Name=”rec2″ Fill=”Orange” Width=”50″ Height=”50″ RelativePanel.AlignHorizontalCenterWithPanel=”True”/>

<Rectangle Name=”rec3″ Fill=”Yellow” Width=”50″ Height=”50″ RelativePanel.Below=”rec2″/>

<Rectangle Name=”rec4″ Fill=”YellowGreen” Width=”50″ Height=”50″ RelativePanel.LeftOf=”rec2″/>

<Rectangle Name=”rec5″ Fill=”BlueViolet” Width=”50″ Height=”50″ RelativePanel.RightOf=”rec3″/>

<Rectangle Name=”rec6″ Fill=”Purple” Width=”50″ Height=”50″ RelativePanel.AlignVerticalCenterWithPanel=”True” RelativePanel.AlignRightWithPanel=”True”/>

</RelativePanel>

عناصر زیرمجموعه RelativePanel میتوانند پراپرتی‌های زیر را داشته باشند:

RelativePanel.Above

RelativePanel.AlignBottomWith

RelativePanel.AlignBottomWithPanel

RelativePanel.AlignHorizontalCenterWith

RelativePanel.AlignHorizontalCenterWithPanel

RelativePanel.AlignLeftWith

RelativePanel.AlignLeftWithPanel

RelativePanel.AlignRifhtWith

RelativePanel.AlignRifhtWithPanel

RelativePanel.AlignTopWith

RelativePanel.AlignTopWithPanel

RelativePanel.VerticalCenterWith

RelativePanel.VerticalCenterWithPanel

RelativePanel.Below

RelativePanel.LeftOf

RelativePanel.RightOf

برخی از این پراپرتی‌ها مقدار True/False میگیند و برای برخی باید نام المنت مد نظر را قرار بدهیم.

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

از پراپرتی‌های مهم این کنترل، میتوان به BorderBrush، BorderThinkness، CornerRadius، Background اشاره کرد که برای اکثر Layout Controlها موجود میباشد.

امیدوارم که از این بخش از مجموعه آموزشی طراحی رابط کاربری در UWP راضی باشید، اگر سوال، پیشنهاد یا انتقادی داشتید، با کامنت کردن زیر این مطلب و یا با ارسال ایمیل به آدرس: ormfm@outlook.com یا با آی دی تلگرام: @ormanfm با من در ارتباط باشید.

1+
اشتراک
Share On Facebook
Share On Twitter
Share On Google Plus
Share On Linkedin
Share On Pinterest

نویسنده مطلب: اورمان فقیهی محدث

اورمان فقیهی محدث
مایکروسافت و دیگر هیچ!

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *