آموزش ساخت Buttom در زامارين

آموزش ساخت دكمه در Xamarin

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

• نوشتن اولین برنامه در زامارین
• آموزش Stack Layout در زامارين

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

• یک Xamarin.Forms Button درXAML بسازید.
• فشرده شدن Button را پاسخ دهید
• ظاهر Button را تغییر دهید.

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

گام اول

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

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

این کد UI اپلیکیشن را تعریف میکند که شامل یک Button دریک StackLayout میباشد. صفت Button.Text متن داخل Button را مشخص میکند.

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

توجه کنید که Button تمام فضایی که میتواند گرفته است( تمام عرض parent که StackLayout است.(

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

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

این کد UI اپلیکیشن را تعریف میکند که شامل یک Button دریک StackLayout میباشد. صفت Button.Text متن داخل Button را مشخص میکند.

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

گام دوم

در Visual Studio

１. در MainPage.xaml، تعریف Button را تغییر دهید تا یک handler برای Clicked event به آن افزوده شود:

این کد Clicked event را به event handler به نام OnButtonClicked تنظیم میکند که در گام بعد تعریف خواهد شد.

２. در Solution Explorer، در پروژه ButtonTutorial، MainPage.xaml را باز کنید و بر MainPage.xaml.cs دابل کلیک کنید تا باز شود. سپس OnButtonClicked event handler را به آن کلاس اضافه کنید:

    void OnButtonClicked(object sender, EventArgs e)
    {
        (sender as Button).Text = "Click me again!";
    }

زمانی که Buttonزده شود، متد OnButtonClicked اجرا میشود. ارگومان sender، شی Button است که موظف است Clicked event را آغاز کند و میتواند با شی Button در دسترس قرار بگیرد. این Event handler متن موجود در Button را به روز رسانی میکند.

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

در Visual Studio for Mac

１. در MainPage.xaml، تعریف Button را تغییر دهید تا یک handler برای Clicked event به آن افزوده شود:

این کد Clicked event را به event handler به نام OnButtonClicked تنظیم میکند که در گام بعد تعریف خواهد شد.

２. در Solution Pad، در پروژه ButtonTutorial، MainPage.xaml را باز کنید و بر MainPage.xaml.cs دابل کلیک کنید تا باز شود. سپس OnButtonClicked event handler را به آن کلاس اضافه کنید:

    void OnButtonClicked(object sender, EventArgs e)
    {
        (sender as Button).Text = "Click me again!";
    }

زمانی که Buttonزده شود، متد OnButtonClicked اجرا میشود. ارگومان sender، شی Button است که موظف است Clicked event را آغاز کند و میتواند با شی Button در دسترس قرار بگیرد. این Event handler متن موجود در Button را به روز رسانی میکند.

３. در Visual Studio for Mac toolbar، دکمه Start را بزنید(دکمه مثلثی که مانن علامت play است) تا اپلیکیشن در شبیه ساز منتخب iOS یا اندروید شما اجرا شود. Button را بزنید و مشاهده کنید که متن درون آن تغییر میکند:

گام سوم

در Visual Studio

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

این کد ظاهر Button را تغییر میدهد. TextColor، رنگ Button را تغییر میدهد، BackgroundColor رنگ پس زمینه متن را عوض میکند و BorderColor رنگ محیط اطراف Button را تغییر میدهد و BorderWidth، عرض مرز را مشخص میکند. به صورت پیش فرض، Button یک مستطیل است اما میتواند با تنظیم CornerRadius گوشه های دایره ای پیدا کند. علاوه بر آن اندازه Button با تغییر WidthRequest و HeightRequest ، تغییر میکند.

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

در Visual Studio for Mac

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

این کد ظاهر Button را تغییر میدهد. TextColor، رنگ Button را تغییر میدهد، BackgroundColor رنگ پس زمینه متن را عوض میکند و BorderColor رنگ محیط اطراف Button را تغییر میدهد و BorderWidth، عرض مرز را مشخص میکند. به صورت پیش فرض، Button یک مستطیل است اما میتواند با تنظیم CornerRadius گوشه های دایره ای پیدا کند. علاوه بر آن اندازه Button با تغییر WidthRequest و HeightRequest ، تغییر میکند.

２. در Visual Studio for Mac toolbar، دکمه Start را بزنید(دکمه مثلثی که مانن علامت play است) تا اپلیکیشن در شبیه ساز منتخب iOS یا اندروید شما اجرا شود. مشاهده کنید که ظاهر Button تغییر کرده است:

گام چهارم

تبریک!

شما این tutorial را با موفقیت به اتمام رساندید و یاد گرفتید:

• یک Xamarin.Forms Button درXAML بسازید.
• فشرده شدن Button را پاسخ دهید
• ظاهر Button را تغییر دهید.