در قسمت های قبل شما با دستورات شرطی ایف و ایف الس و ایف الس ایف و همچنین سویچ آشنا شدید.

در این قسمت بیشتر شما را با XAML آشنا خواهیم کرد.

خب حال ما شما را با نوع لایه های مختلف در Xaml آشنا میکنیم.

 

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

البته این قابلیت در برنامه نویسی ویندوز فرم و wpf وجود دارد (البته با کد نویسی سی شارپ) که با این حال در uwp انجام اینکار بسیار راحت تر شده طوری که دیگر نیاز به کد نویسی زیاد تر نیست!

 

خب حال به این نکته توجه داشته باشید که اکثر کنترل هایی که ما در XAML استفاده میکنیم دارای خاصیتی به اسم Content هستند به عنوان مثل دکمه ی کنترلی یعنی همان باتن Button که دارای همین خاصیت هست تنها میتواند با یک نمونه از یک شی دیگری تنظیم شود یعنی اینکه ما میتوانیم خاصیت یک کنترل باتن را با یک نمونه دیگر از همین باتن موجود در فرم تنظیم کنیم.

 

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

 

برای راحتی کار از کنترل هایی برای لایه بندی استفاده میکنیم. که این کنترل ها برای پذیرایی از کنترل های درون برنامه پشتیبانی میکنند یعنی اینکه تمامی کنترل ها را درون خود جای میدهد. این کنترل ها خاصیت نام برده یعنی Content را ندارند.

 

همین کار را میتوان در سی شارپ انجام داد ولی نیاز به کد های زیاد و پیچیدگی های پی در پی هست که برنامه سنگین میشود و به هیچ وجه توصیه نمی شود. (البته برای تجربه و یادگیری بهتر سی شارپ مانعی وجود ندارد)

اسم یکی از این کنترل های لایه بندی Grid است. (به عنوان پیش فرض بعد از ساخت برنامه uwp در محیط کد نویسی xaml وجود دارد)

همانند شکل زیر:

 

 

 

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

 

نکته: به صورت پیش فرض بعد از ساخت برنامه در Grid یک ستون و یک ردیف وجود دارد.

 

در تصویر زیر ما دو ردیف ایجاد کرده ایم و ارتفاع هر یک را تنظیم کرده ایم:

 

 

 

همان طور که در تصویر میبینید ما در داخل Grid برای تعریف کردن RowDefinition از خاصیت Property Element Syntax استفاده کردیم و داخل آن دو ردیف که یکی با ارتفاع اتوماتیک (auto) و دیگری را با ستاره * نوشته ایم.

سپس ما در اینجا دو شی Rectangle ایجاد کرده ایم.

 

در کل سه نوع سینتکس وجود دارد که میتوان برای اندازه از آنها استفاده کرد.

اولی سایز ثابت و مشخض است که بر اساس واحد پیکسل مورد استفاده قرار میگیرد.

دومی سایز auto که همان طور از اسمش مشخص است اتوماتیک هست و نسبت که کنترلی که درون خود دارد تغییر اندازه میدهد.

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

 

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

 

 

 

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

با مایکروسافت لایف در قسمت های بیشتر این آموزش همراه باشید…

لینک کوتاه شده: https://goo.gl/KccYQ9
بارگذاری بیشتر مطالب مرتبط
بارگذاری توسط علیش اسماعیلی
بارگذاری در آموزش

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

بررسی

آموزش برنامه نویسی یونیورسال UWP (قسمت هشتم)

ما در قسمت قبلی شما را با صفحه و لایه بندی Grid به صورت مبتدی در XAML آشنا کردیم. در این ق…