مشخصات مقاله
-
383
-
0.0
-
1706
-
0
-
0
آموزش xamarin-آموزش Stack Layout در زامارين
آموزش StackLayout
قبل از شروع این بخش شما باید با موفقیت بخشساخت اولین اپلیکیشن در Xamarin.Forms را به پایان رسانده باشید.
در این tutorial شما خواهید آموخت :
- Xamarin.Forms StackLayout با استفاده از XAML ایجاد کنید.
- جهت (Orientation) برای StackLayout مشخص کنید.
- Alignment و expansion برای child view ها در StackLayout را کنترل کنید.
شما میتوانید از Visual Studio 2019 ویا Visual Studio for Mac برای ساخت یک اپلکیشن ساده، که نشان میدهد چگونه control هارا در StackLayout، هم تراز کنید، استفاده کنید. اپلیکیشن نهایی به شکل زیر خواهد بود:
گام اول
درVisual Studio 2019
برای کامل کردن این tutorial شما باید Visual Studio 2019(آخرین ورژن) به همراه Mobile development with.NET را نصب کرده باشید. علاوه بر آن، شما نیاز به یک سیستم Mac متصل شده برای ساخت اپلیکیشن درiOS نیز دارید. برای اطلاعات بیشتر درباره نصب پلتفرم Xamarin، Installing Xamarin را ببینید.
بیشتر درباره اتصال Visual Studio 2019 به Mac build host، Pair to Mac for Xamarin.iOS development را مطالعه کنید.
１. Visual Studio را باز کنید و یک new black Xamarin.Forms app بسازید و آن را StackLayoutTutorial نام گذاری کنید. مطمئن شوید که اپ شما از مکانیزم .NET Standard برای shared code استفاده میکند.
برای استفاده از کد ها C# و XAML موجود در این بخش شما باید solution خود را StackLayoutTutorial بنامید. استفاده از نام متفاوت باعث میشود شما با کپی کردن کد های موجود در این بخش به error برخورد کنید.
２. در Solution Explorer، در پروژه StackLayoutTutorial، بر MainPage.xaml دابل کلیک کنید تا باز شود و سپس کد های موجود در آن را حذف کرده و کد زیر را جایگزین کنید:
1 2 3 4 5 6 7 8 9 | <!--?xml version="1.0" encoding="utf-8"?--> <contentpage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:class="StackLayoutTutorial.MainPage"> <stacklayout margin="20,35,20,25"> <label text="The StackLayout has its Margin property set, to control the rendering position of the StackLayout."></label> <label text="The Padding property can be set to specify the distance between the StackLayout and its children."></label> <label text="The Spacing property can be set to specify the distance between views in the StackLayout."></label> </stacklayout> </contentpage><button></button> |
این کد UI صفحه را تعریف میکند که شامل سه Label در یک StackLayout میباشد. StackLayout موجود، child view های خود را ( Label ها) در یک خط میگذارد که به طور پیش فرض عمودی میباشد. علاوه بر آن، Margin نشان دهنده rendering position برای StackLayout در ContentPage میباشد.
علاوه بر Margin ، Padding و Spacing نیز میتوانند در StackLayout تنظیم شوند. مقدار Padding، فاصله بین view ها در StackLayout را مشخص میکند ومقدار Spacing مقدار فاصله بین child view ها را در StackLayout نشان میدهد. برای اطلاعات بیشتر Margin and Padding را مطالعه کنید.
３. در Visual Studio toolbar، دکمه Start را بزنید(دکمه مثلثی که مانند علامت play است) تا اپلیکیشن در شبیه ساز منتخب iOS یا اندروید شما اجرا شود
در Visual Studio for Mac
برای کامل کردن این tutorial شما باید Visual Studio for Mac(آخرین ورژن) به همراه support platform برای Android و iOS را نصب کرده باشید. علاوه بر آن، شما نیاز باید Xcode(آخرین ورژن) را نیز نصب کنید. برای اطلاعات بیشتر درباره نصب پلتفرم Xamarin، Installing Xamarin را ببینید.
１. Visual Studio for Macرا باز کنید و یک new black Xamarin.Forms app بسازید و آن را StackLayoutTutorial نام گذاری کنید. مطمئن شوید که اپ شما از مکانیزم .NET Standard برای shared code استفاده میکند.
برای استفاده از کد ها C# و XAML موجود در این بخش شما باید solution خود را StackLayoutTutorial بنامید. استفاده از نام متفاوت باعث میشود شما با کپی کردن کد های موجود در این بخش به error برخورد کنید.
２. در Solution Pad، در پروژه StackLayoutTutorial، بر MainPage.xaml دابل کلیک کنید تا باز شود و سپس کد های موجود در آن را حذف کرده و کد زیر را جایگزین کنید:
1 2 3 4 5 6 7 8 9 | <!--?xml version="1.0" encoding="utf-8"?--> <contentpage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:class="StackLayoutTutorial.MainPage"> <stacklayout margin="20,35,20,25"> <label text="The StackLayout has its Margin property set, to control the rendering position of the StackLayout."></label> <label text="The Padding property can be set to specify the distance between the StackLayout and its children."></label> <label text="The Spacing property can be set to specify the distance between views in the StackLayout."></label> </stacklayout> </contentpage><button></button> |
این کد UI صفحه را تعریف میکند که شامل سه Label در یک StackLayout میباشد. StackLayout موجود، child view های خود را ( Label ها) در یک خط میگذارد که به طور پیش فرض عمودی میباشد. علاوه بر آن، Margin نشان دهنده rendering position برای StackLayout در ContentPage میباشد.
علاوه بر Margin ، Padding و Spacing نیز میتوانند در StackLayout تنظیم شوند. مقدار Padding، فاصله بین view ها در StackLayout را مشخص میکند ومقدار Spacing مقدار فاصله بین child view ها را در StackLayout نشان میدهد. برای اطلاعات بیشتر Margin and Padding را مطالعه کنید.
３. در Visual Studio for Mac toolbar، دکمه Start را بزنید(دکمه مثلثی که مانند علامت play است) تا اپلیکیشن در شبیه ساز منتخب iOS یا اندروید شما اجرا شود:
گام دوم
درVisual Studio
１. در MainPage.xaml، تعریف StackLayout را تغییر دهید تا children هایش را افقی (به جای عمودی) قرار دهد:
1 2 3 4 5 6 | <stacklayout margin="20,35,20,25" orientation="Horizontal"><label text="The StackLayout has its Margin property set, to control the rendering position of the StackLayout."></label><label text="The Padding property can be set to specify the distance between the StackLayout and its children."></label><label text="The Spacing property can be set to specify the distance between views in the StackLayout."></label></stacklayout><button></button> |
این کد، Orientation را Horizontal قرار میدهد.
２. در Visual Studio toolbar، دکمه start را بزنید تا اپلیکیشن در شبیه ساز اندروید یا iOS انتخابی شما اجرا شود:
در Visual Studio for Mac
１. در MainPage.xaml، تعریف StackLayout را تغییر دهدید تا children هایش را افقی (به جای عمودی) قرار دهد:
1 2 3 4 5 6 | <stacklayout margin="20,35,20,25" orientation="Horizontal"><label text="The StackLayout has its Margin property set, to control the rendering position of the StackLayout."></label><label text="The Padding property can be set to specify the distance between the StackLayout and its children."></label><label text="The Spacing property can be set to specify the distance between views in the StackLayout."></label></stacklayout><button></button> |
این کد، Orientation را Horizontal قرار میدهد.
２. در Visual Studio for Mac toolbar، دکمه start را بزنید تا اپلیکیشن در شبیه ساز اندروید یا iOS انتخابی شما اجرا شود:
توجه کنید که Label در StackLayout حالا افقی قرار گرفته است.(به جای عمودی)
گام سوم
Control alignment and expansion
اندازه و مکان Child view ها در StackLayout، به مقدار HeightRequest و WidthRequest آنها و همچنین به مقدار HorizontalOptions و VerticalOptions بستگی دارد.
صفات HorizontalOptions و VerticalOptions میتوانند از ساختار LayoutOptions، تنظیم شوند. LayoutOptions شامل دو layout preference میباشد:
- Alignment- alignment مورد استفاده برای child view، که مکان و سایز آن را در parent view مشخص میکند
- Expantion- مشخص میکند که child view به چه مقدار فضا اضافه نیاز دارد(اگر فضایی در stacklayout موجود باشد).
در Visual Studio
１. در MainPage.xaml، تعریفStackLayout را تغییر دهید و alignment و expansion را برای هر Label مشخص کنید:
1 2 3 4 5 6 7 8 9 10 11 | <stacklayout margin="20,35,20,25"> <label text="Start" horizontaloptions="Start" backgroundcolor="Gray"></label> <label text="Center" horizontaloptions="Center" backgroundcolor="Gray"></label> <label text="End" horizontaloptions="End" backgroundcolor="Gray"></label> <label text="Fill" horizontaloptions="Fill" backgroundcolor="Gray"></label> <label text="StartAndExpand" verticaloptions="StartAndExpand" backgroundcolor="Gray"></label> <label text="CenterAndExpand" verticaloptions="CenterAndExpand" backgroundcolor="Gray"></label> <label text="EndAndExpand" verticaloptions="EndAndExpand" backgroundcolor="Gray"></label> <label text="FillAndExpand" verticaloptions="FillAndExpand" backgroundcolor="Gray"></label> </stacklayout><button></button> |
این کد alignment preferences ها را برای چهار label اول و expansion preference ها را برای چهار label آخر تنظیم میکند. بخش های Start، Center، End و Fill، Alignment را برای Label ها در StackLayout parent تعریف میکنند. بخش های StartAndExpand، CenterAndExpand، EndAndExpand و FillAndExpand برای تعریف alignment preference ها و تعیین اینکه آیا view میتواند، در صورت وجود فضای خالی در parent StackLayout ، فضای بیشتری را اشغال کنند، استفاده میشوند.
مقدار پیش فرض برای HorizontalOptions و VerticalOptions یک view، Fill میباشد.
２. در Visual Studio for Mac toolbar، دکمه start را بزنید تا اپلیکیشن در شبیه ساز انتخابی اندروید یا iOS شما اجرا شود:
یک StackLayout تنها alignment preference های child view هایی را درنظر میگیرد که خلاف جهت StackLayout orientation باشند. در نتیجه، Label child view هایی که در StackLayout عمودی هستند، صفتHorizontalOptions خود را یکی ازfiled alignment ها قرار میدهند:
- Start- که label را در سمت چپ StackLayout قرار میدهد.
- Center- که label را در وسط StackLayout قرار میدهد.
- End- که label را در سمت راست StackLayout قرار میدهد.
یک StackLayout تنها میتواند child view های خود را در جهت orientation خود، وسعت دهد. در نتیجه، StackLayout عمودی تنها میتواند label child view هایی که VerticalOption خود را یکی از چهار expansion filed های بالا گذاشتند، وسعت دهد. این بدین معنی است که برای vertical alignment، هر label فضایی مساوی در داخل StackLayout را اشغال میکند. تنها آخرین label که VerticalOption آن FillAndExpand است، سایز متفاوتی دارد.
زمانی که همه فضای داخل StackLayout اشغال شده باشد، expansion preference تاثیری ندارد.
در Visual Studio for Mac
１. در MainPage.xaml، تعریفStackLayout را تغییر دهید و alignment و expansion را برای هر Label مشخص کنید:
1 2 3 4 5 6 7 8 9 10 11 | <stacklayout margin="20,35,20,25"> <label text="Start" horizontaloptions="Start" backgroundcolor="Gray"></label> <label text="Center" horizontaloptions="Center" backgroundcolor="Gray"></label> <label text="End" horizontaloptions="End" backgroundcolor="Gray"></label> <label text="Fill" horizontaloptions="Fill" backgroundcolor="Gray"></label> <label text="StartAndExpand" verticaloptions="StartAndExpand" backgroundcolor="Gray"></label> <label text="CenterAndExpand" verticaloptions="CenterAndExpand" backgroundcolor="Gray"></label> <label text="EndAndExpand" verticaloptions="EndAndExpand" backgroundcolor="Gray"></label> <label text="FillAndExpand" verticaloptions="FillAndExpand" backgroundcolor="Gray"></label> </stacklayout><button></button> |
این کد alignment preferences ها را برای چهار label اول و expansion preference ها را برای چهار label آخر تنظیم میکند. بخش های Start، Center، End و Fill، Alignment را برای Label ها در StackLayout parent تعریف میکنند. بخش های StartAndExpand، CenterAndExpand، EndAndExpand و FillAndExpand برای تعریف alignment preference ها و تعیین اینکه آیا view میتواند، در صورت وجود فضای خالی در parent StackLayout ، فضای بیشتری را اشغال کنند، استفاده میشوند.
مقدار پیش فرض برای HorizontalOptions و VerticalOptions یک view، Fill میباشد.
２. در Visual Studio for Mac toolbar، دکمه start را بزنید تا اپلیکیشن در شبیه ساز انتخابی اندروید یا iOS شما اجرا شود:
یک StackLayout تنها alignment preference های child view هایی را درنظر میگیرد که خلاف جهت StackLayout orientation باشند. در نتیجه، Label child view هایی که در StackLayout عمودی هستند، صفتHorizontalOptions خود را یکی ازfiled alignment ها قرار میدهند:
- Start- که label را در سمت چپ StackLayout قرار میدهد.
- Center- که label را در وسط StackLayout قرار میدهد.
- End- که label را در سمت راست StackLayout قرار میدهد.
- Fill- که باعث میشودlabel ، فضای داخل StackLayout را پر کند.
یک StackLayout تنها میتواند child view های خود را در جهت orientation خود، وسعت دهد. در نتیجه، StackLayout عمودی تنها میتواند label child view هایی که VerticalOption خود را یکی از چهار expansion filed های بالا گذاشتند، وسعت دهد. این بدین معنی است که برای vertical alignment، هر label فضایی مساوی در داخل StackLayout را اشغال میکند. تنها آخرین label که VerticalOption آن FillAndExpand است، سایز متفاوتی دارد.
زمانی که همه فضای داخل StackLayout اشغال شده باشد، expansion preference تاثیری ندارد.
گام چهارم
تبریک!
شما این tutorial را با موفقیت به اتمام رساندید و یاد گرفتید:
- Xamarin.Forms StackLayout با استفاده از XAML ایجاد کنید.
- جهت (Orientation) برای StackLayout مشخص کنید.
- Alignment و expansion برای child view ها در StackLayout را کنترل کنید.