آموزش xamarin-آموزش Grid در زامارين

آموزش گريد Grid در Xamarin

قبل از شروع، باید با موفقیت بخش های زیر را به پایان رسانده باشید

• نوشتن اولین برنامه در زامارین

در این بخش شما می آموزید چگونه:

• یک Xmarin.Forms Grid در XAML بسازید.
• ستون ها ردیف ها را برای Grid مشخص کنید.
• در چند ردیف یا ستون در Grid، محتوا قرار دهید.

شما میتوانید از Visual Studio 2019 ویا Visual Studio for Mac برای تولید یک اپلیکیشن ساده که محتوا یک Grid را نمایش دهد ، استفاده کنید. اپلیکیشن نهایی به شکل زیر خواهد بود:

گام اول

در Visual Studio

برای کامل کردن این بخش شما باید Visual Studio 2019 (آخرین ورژن ) و Mobile development with .NET را بر سیستم خود نصب کرده باشید. علاوه بر آن آما نیاز به یک سیستم مک متصل شدن به سیستم خود دارید تا بتوانید اپلیکیشن را برای iOS بسازید. برای اطلاعات بیشتر Installing Xamarin را ببینید و برای اطلاعات بیشتر درباره اتصال Visual Studio به Mac، Pair to Mac for Xamarin.iOS development را ببینید.

１. Visual Studio را باز کنید و یک new black Xamarin.Forms app بسازید و آن را GridTutorial نام گذاری کنید. مطمئن شوید که اپ شما از مکانیزم .NET Standard برای shared code استفاده میکند.

２. در Solution Explorer، در پروژه GridTutorial ، بر MainPage.xaml دابل کلیک کنید تا باز شود و سپس کد های موجود در آن را حذف کرده و کد زیر را جایگزین کنید:

این کد UI صفحه را مشخص میکند که شامل یک Label در یک Grid میباشد. به صورت پیش فرض، Child view های Grid در یک لوکیشن قرار میگیرند. بنابراین ، یک Grid که شامل چند children میباشد، باید ستون ها و ردیف هایش را مشخص کند، که در بخش بعد بررسی میشود. علاوه براین، صفت Margin ، rendering position را برای Grid در ContentPage نشان میدهد.

３. در Visual studio toolbar، دکمه start را بزنید( دکمه مثلثی که شبیه علامت play است.) تا اپلیکیشن در شبیه ساز انتخآبی شما آغاز شود:

در 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 بسازید و آن را GridTutorial نام گذاری کنید. مطمئن شوید که اپ شما از مکانیزم .NET Standard برای shared code استفاده میکند.

２. در Solution Pad، در پروژه GridTutorial ، بر MainPage.xaml دابل کلیک کنید تا باز شود و سپس کد های موجود در آن را حذف کرده و کد زیر را جایگزین کنید:

این کد UI صفحه را مشخص میکند که شامل یک Label در یک Grid میباشد. به صورت پیش فرض، Child view های Grid در یک لوکیشن قرار میگیرند. بنابراین ، یک Grid که شامل چند children میباشد، باید ستون ها و ردیف هایش را مشخص کند، که در بخش بعد بررسی میشود. علاوه براین، صفت Margin ، rendering position را برای Grid در ContentPage نشان میدهد.

３. در Visual studio toolbar، دکمه start را بزنید( دکمه مثلثی که شبیه علامت play است.) تا اپلیکیشن در شبیه ساز انتخآبی شما آغاز شود:

گام دوم

در Visual Studio

１. در MainPage.xaml، تعریف Grid را تغییر دهید تا ستون ها ردیف ها را مشخص کند و محتوا را در آنها قرار دهد:

این کد ستون ها ردیف های Grid را تعریف میکند و مکان Label ها را در ستون و ردیف های مشخص قرار میدهد. داده های ردیف ها و ستون ها درصفات ColumnDefinitions و RowDefinitions قرار میگیرد که مجموعه ای از اشیا ColumnDefinition و RowDefinition ها هستند. عرض هر ColumnDefinition با صفت ColumnDefinition.Width و طول هر RowDefinition با صفت RowDefinition.Height مشخص میشود. مقادیر قابل قبول برای طول و عرض ها، مقادیر زیر هستند:

• Auto، که سایز ستون ها و ردیف ها را با توجه به محتوا آنها مشخص میکند.
• Proportional Values، که سایز ردف ها و ستون ها را، نسبتی از فضای باقیمانده قرار میدهد. مقادیر proportional با علامت* در انتها آنها مشخص میشوند.
• Absolute Values ، که سایز ستونها و ردیف ها را با مقادیر مشخص و ثابت، تعین میکند.

بنابر این، در کد بالا، هر ستون، عرضی به اندازه نصف Grid و هر ردیف، طولی به اندازه 50 device-independent units، دارد.

مکان هر Label در یک ،Grid با صفات پیوست داده شده Grid.Column و Grid.Row ، با index های 0و 1، مشخص میشود. بنابراین، ستون اول، ستون 0 و ردیف اول، ردیف 0 است. اولین Label این صفات پیوست داده شده را ندارد زیرا که هر Child view که فاقد این صفات باشد، به طور اتوماتیک در ردیف و ستون 0 قرار داده میشود.

２. در Visual Studio toolbar، دکمه start را( که یل علامت مثلثی مانند علامت Play میباشد ) بزنید تا اپلیکیشن در شبیه ساز انتخابی شما، اجرا شود:

در Visual Studio for Mac

１. در MainPage.xaml، تعریف Grid را تغییر دهید تا شکل ظاهری آن را تغییر دهید:

این کد ستون ها ردیف های Grid را تعریف میکند و مکان Label ها را در ستون و ردیف های مشخص قرار میدهد. داده های ردیف ها و ستون ها درصفات ColumnDefinitions و RowDefinitions قرار میگیرد که مجموعه ای از اشیا ColumnDefinition و RowDefinition ها هستند. عرض هر ColumnDefinition با صفت ColumnDefinition.Width و طول هر RowDefinition با صفت RowDefinition.Height مشخص میشود. مقادیر قابل قبول برای طول و عرض ها، مقادیر زیر هستند:

• Auto، که سایز ستون ها و ردیف ها را با توجه به محتوا آنها مشخص میکند.
• Proportional Values، که سایز ردف ها و ستون ها را، نسبتی از فضای باقیمانده قرار میدهد. مقادیر proportional با علامت* در انتها آنها مشخص میشوند.
• Absolute Values ، که سایز ستونها و ردیف ها را با مقادیر مشخص و ثابت، تعین میکند.

بنابر این، در کد بالا، هر ستون، عرضی به اندازه نصف Grid و هر ردیف، طولی به اندازه 50 device-independent units، دارد.

مکان هر Label در یک ،Grid با صفات پیوست داده شده Grid.Column و Grid.Row ، با index های 0و 1، مشخص میشود. بنابراین، ستون اول، ستون 0 و ردیف اول، ردیف 0 است. اولین Label این صفات پیوست داده شده را ندارد زیرا که هر Child view که فاقد این صفات باشد، به طور اتوماتیک در ردیف و ستون 0 قرار داده میشود.

این کد صفت Aspect را، که scaling mode را برای image مشخص میکند، Fill مقدار دهی میکند. یک عضو Fill در Aspect به شکلی تعریف شده است که عکس را بسط میدهد تا تمام فضای view را پر کند( بدون توجه به تغییر کیفیت عکس ). برای اطلاعات بیشتر درباره image scaling ، Displaying images را در راهنما Images in Xamarin.Forms ببینید.

extension به شما اجازه میدهد ظاهر UI را در هر پلتفرم تعریف کنید. در این مثال، markup extension برای تعریف صفات HeightRequest و WidthRequest به اندازه 300 device-independent units در iOS و 250 device-independent units در اندروید، استفاده شده است. برای اط؛اعات بیشتر درباره OnPlatform markup extension، OnPlatform markup extension را در راهنما Consuming XAML Markup Extensions ببینید. همچنین HorizontalOptions، مشخص میکند که عکس افقی و در مرکز باشد.

２. در Visual Studio for Mac toolbar، دکمه start را( که یل علامت مثلثی مانند علامت Play میباشد ) بزنید تا اپلیکیشن در شبیه ساز انتخابی شما، اجرا شود:

گام سوم

در Visual Studio

１. در MainPage.xaml، تعریف Grid را تغییر دهید تا محتوا در ستون و ردیف ها قرار بگیرند:

این کد ستونها و ردیف های Grid را مشخص میکند و Label ها را در ستون و ردیف مشخصی قرار میدهد . صفت پیوست داده شده ColumnSpan، برای Label اول مشخص میکند که متن آن در چند ستون قرار میگیرد. مقدار ColumnSpan، ۲ مشخص شده است که تعداد ستون هایی است که Label اشغال میکند. برایLabel دوم، صفت پیوست داده شده RowSpan ، ۲ قرار داده شده، پس Label میتواند ۲ ردیف را اشغال کند.

２. در Visual Studio toolbar، دکمه start را ( که علامتی مثلثی شبیه به علامت play دارد) بزنید تا اپلیکیشن در دستگاه شبیه ساز انتخابی شما اجرا شود:

در Visual Studio for Mac

１. در MainPage.xaml، تعریف Grid را تغییر دهید تا محتوا در ستون و ردیف ها قرار بگیرند:

این کد ستونها و ردیف های Grid را مشخص میکند و Label ها را در ستون و ردیف مشخصی قرار میدهد . صفت پیوست داده شده ColumnSpan، برای Label اول مشخص میکند که متن آن در چند ستون قرار میگیرد. مقدار ColumnSpan، ۲ مشخص شده است که تعداد ستون هایی است که Label اشغال میکند. برایLabel دوم، صفت پیوست داده شده RowSpan ، ۲ قرار داده شده، پس Label میتواند ۲ ردیف را اشغال کند.

２. در Visual Studio toolbar، دکمه start را ( که علامتی مثلثی شبیه به علامت play دارد) بزنید تا اپلیکیشن در دستگاه شبیه ساز انتخابی شما اجرا شود:

گام چهارم

تبريك

شما با موفقیت این بخش را به اتمام رساندید و آموختید:

• یک Xmarin.Forms Grid در XAML بسازید.
• ستون ها ردیف ها را برای Grid مشخص کنید.
• در چند ردیف یا ستون در Grid، محتوا قرار دهید.