|آموزش xamarin|آموزش ايجاد Popup در زامارين|

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

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

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

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

• یک هشدار نمایش دهید که از کاربر میخواهد یک انتخاب انجام دهد.
• یک action sheet نمایش دهید که کاربر را در یک task راهنمایی کند.

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

گام اول

نمایش هشدار

Xamarin.Forms دارای یک modal pop-up میباشد، که به عنوان هشدار شاخته میشود، و برای نمایش یک هشدار به کاربر و یا پرسیدن یک سوال از آنها استفاده میشود. در این بخش شما از متد DisplayAlert ، از کلاس Page ، استفاده میکنید تا یک هشدار به کاربر نمایش دهید و یک پرسش مطرح کنید.

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

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

این کد UI صفحه را تعریف میکند که شامل دو شی Button در یک StackLayout میباشد. صفت Button.Text متنی که در هر Button نشان داده میشود را نشان میدهد و Clicked event ها دارای event handler هایی هستند که در گامهای بعدی ساخته میشوند.

３. در Solution Explorer ، در پروژه PopupsTutorial، MainPage.xaml را باز کنید و بر MainPage.xaml.cs دابل کلیک کنید تا باز شود و event handler های OnDisplayAlertButtonClicked و OnDisplayAlertQuestionButtonClicked را به کلاس اضافه کنید:

    async void OnDisplayAlertButtonClicked(object sender, EventArgs e)
    {
        await DisplayAlert("Alert", "This is an alert.", "OK");
    }
    
    async void OnDisplayAlertQuestionButtonClicked(object sender, EventArgs e)
    {
        bool response = await DisplayAlert("Save?", "Would you like to save your data?", "Yes", "No");
        Console.WriteLine("Save data: " + response);
    }

زمانی که بر Button ضربه زده شود، متد event hanlder مربوط به آن اجرا میشود. متد OnDisplayAlertButtonClicked متد DisplayAlert را صدا میکند که یک modal alert با یک دکمه cancel نمایش دهد. زمانی که alert برطرف شود، کاربر میتواند به کار با اپلیکیشن ادامی دهد.

متد OnDisplayAlertQuestionButtonClicked یک overload از متد DisplayAlert را صدا میکند تا یک هشدار با یک دکمه accept و یک دکمه cancel نمایش میدهد. پس از انتخاب یکی از دکمه ها، انتخاب به عنوان یک Boolean برگردانده میشود.

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

پس از برطرف شدن هشدار، دومین Button را بزنید:

مشاهده کنید که پس از انتخاب گزینه دلخواه به سوال مطرح شده، پاسخ در پنجره Visual Studio Output نمایش داده میشود.

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

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

این کد UI صفحه را تعریف میکند که شامل دو شی Button در یک StackLayout میباشد. صفت Button.Text متنی که در هر Button نشان داده میشود را نشان میدهد و Clicked event ها دارای event handler هایی هستند که در گامهای بعدی ساخته میشوند.

３. در Solution Pad ، در پروژه PopupsTutorial، MainPage.xaml را باز کنید و بر MainPage.xaml.cs دابل کلیک کنید تا باز شود و event handler های OnDisplayAlertButtonClicked و OnDisplayAlertQuestionButtonClicked را به کلاس اضافه کنید:

    async void OnDisplayAlertButtonClicked(object sender, EventArgs e)
    {
        await DisplayAlert("Alert", "This is an alert.", "OK");
    }
    
    async void OnDisplayAlertQuestionButtonClicked(object sender, EventArgs e)
    {
        bool response = await DisplayAlert("Save?", "Would you like to save your data?", "Yes", "No");
        Console.WriteLine("Save data: " + response);
    }

زمانی که بر Button ضربه زده شود، متد event hanlder مربوط به آن اجرا میشود. متد OnDisplayAlertButtonClicked متد DisplayAlert را صدا میکند که یک modal alert با یک دکمه cancel نمایش دهد. زمانی که alert برطرف شود، کاربر میتواند به کار با اپلیکیشن ادامی دهد.

متد OnDisplayAlertQuestionButtonClicked یک overload از متد DisplayAlert را صدا میکند تا یک هشدار با یک دکمه accept و یک دکمه cancel نمایش میدهد. پس از انتخاب یکی از دکمه ها، انتخاب به عنوان یک Boolean برگردانده میشود.

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

پس از برطرف شدن هشدار، دومین Button را بزنید:

مشاهده کنید که پس از انتخاب گزینه دلخواه به سوال مطرح شده، پاسخ در پنجره Visual Studio Output نمایش داده میشود.

گام دوم

Xamarin.Forms دارای یک modal pop-up میباشد ، که action sheet نام دارد، و برای راهنمایی کاربر در یک task استفاده میشود. در این بخش شما از متد DisplayActionSheet ، از کلاس Page ، برای نمایش action sheet استفاده میشود که کاربر را در یک task هدایت میکند.

در Visual Studio

１. در MainPage.xaml، یک Button جدیدی ایجاد کنید که یک action sheet را نمایش دهد:

صفت Button.Text متنی که در Button نمایش داده میشود را مشخص میکند. علاوه براین برایClicked event یک event handler به نام OnDisplayActionSheetButtonClicked ایجاد شده است که در گام بعد تعریف میشود.

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

    async void OnDisplayActionSheetButtonClicked(object sender, EventArgs e)
{
    string action = await DisplayActionSheet("Send to?", "Cancel", null, "Email", "Twitter", "Facebook");
    Console.WriteLine("Action: " + action);
}

زمانی که Button ضربه زده شود، متد OnDisplayActionSheetButtonClicked اجرا میشود. این متد، متد DisplayActionSheet را صدا میکند تا تعدادی راهنما و جایگزین برای انجام task به کاربر نشان دهد. پس از انتخاب یکی از گزینه ها توسط کاربر، پاسخ کاربر بهشکل String بازگردانده میشود.

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

مشاهده کنید که پس از انتخاب گزینه در action sheet، انتخاب در پنجرهVisual Studio Output ، نمایش داده میشود.

در Visual Studio for Mac

１. در MainPage.xaml، یک Button جدیدی ایجاد کنید که یک action sheet را نمایش دهد:

صفت Button.Text متنی که در Button نمایش داده میشود را مشخص میکند. علاوه براین برایClicked event یک event handler به نام OnDisplayActionSheetButtonClicked ایجاد شده است که در گام بعد تعریف میشود.

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

    async void OnDisplayActionSheetButtonClicked(object sender, EventArgs e)
    {
        string action = await DisplayActionSheet("Send to?", "Cancel", null, "Email", "Twitter", "Facebook");
        Console.WriteLine("Action: " + action);
    }

زمانی که Button ضربه زده شود، متد OnDisplayActionSheetButtonClicked اجرا میشود. این متد، متد DisplayActionSheet را صدا میکند تا تعدادی راهنما و جایگزین برای انجام task به کاربر نشان دهد. پس از انتخاب یکی از گزینه ها توسط کاربر، پاسخ کاربر بهشکل String بازگردانده میشود.

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

مشاهده کنید که پس از انتخاب گزینه در action sheet، انتخاب در پنجرهVisual Studio for Mac Application Output ، نمایش داده میشود.

گام چهارم

تبريك

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

• یک هشدار نمایش دهید که از کاربر میخواهد یک انتخاب انجام دهد.
• یک action sheet نمایش دهید که کاربر را در یک task راهنمایی کند.