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

آموزش Editor در Xamarin

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

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

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

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

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

گام اول

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

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

این کد UI صفحه را تعریف میکند که شامل یک Editor و یک StackLayout میباش. Editor.Placeholder property، Placeholder متنی را که در ابتدا نمایش Editor، نمایش داده میشود نشان میدهد. علاوه براین HeightRequest، طول Editor را در device-independent units، مشخص میکند.

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

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

این کد UI صفحه را تعریف میکند که شامل یک Editor و یک StackLayout میباش. Editor.Placeholder property، Placeholder متنی را که در ابتدا نمایش Editor، نمایش داده میشود نشان میدهد. علاوه براین HeightRequest، طول Editor را در device-independent units، مشخص میکند.

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

گام دوم

در Visual Studio

１. در MainPage.xaml ، تعریف Editor را تغییر دهید تا یک event handler برای TextChanged و Completed ایجاد شود:

این کد برای TextChanged event ، OnEditorTextChanged event handler و برای Completed event، OnEditorCompleted event handler را تعریف میکند. هر دو event handler در گام بعدی تعریف میشوند.

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

    void OnEditorTextChanged(object sender, TextChangedEventArgs e)
    {
        string oldText = e.OldTextValue;
        string newText = e.NewTextValue;
    }
    
    void OnEditorCompleted(object sender, EventArgs e)
    {
        string text = ((Editor)sender).Text;
    }
    

زمانی که کد داخل Editor تغییر کند، متد OnEditorTextChanged اجرا میشود. آرگومان sender ، شی Editor میباشد که موظف است TextChanged event را آغاز کند و میتواند از طریق شی Editor در دسترس قرار بگیرد. آرگومان TextChangedEvenArgs مقادیر قدیمی و جدید را، قبل و بعد از تغییر، متن فراهم میکند.

زمانی که editing به پایان برسد، متد OnEditorCompleted اجرا میشود که باunfocus کردن Editor و یا زدن دکمه "Done" در iOS انجام میشود. آرگومان sender، شی Editor است که موظف است TextChanged event را آغاز کند و میتواند از طریق Editor در دسترس قرار بگیرد.

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

در دو event handler، break point هایی قرار دهید و متنی به Editor وارد کنید . مشاهده کنید که TextChanged event آغاز میشود. Editor را Unfocus کنید و مشاهده کنید که Completed event آغاز میشود.

در Visual Studio for Mac

１. در MainPage.xaml ، تعریف Editor را تغییر دهید تا یک event handler برای TextChanged و Completed ایجاد شود:

این کد برای TextChanged event ، OnEditorTextChanged event handler و برای Completed event، OnEditorCompleted event handler را تعریف میکند. هر دو event handler در گام بعدی تعریف میشوند.

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

    OnEditorTextChanged و OnEditorCompleted  به کلاس بیفزایید:
    void OnEditorTextChanged(object sender, TextChangedEventArgs e)
    {
        string oldText = e.OldTextValue;
        string newText = e.NewTextValue;
    }
    
    void OnEditorCompleted(object sender, EventArgs e)
    {
        string text = ((Editor)sender).Text;
    }
    

زمانی که کد داخل Editor تغییر کند، متدOnEditorTextChanged اجرا میشود. آرگومان sender ، شی Editor میباشد که موظف است TextChanged event را آغاز کند و میتواند از طریق شی Editor در دسترس قرار بگیرد. آرگومان TextChangedEvenArgs مقادیر قدیمی و جدید را، قبل و بعد از تغییر، متن فراهم میکند.

زمانی که editing به پایان برسد، متد OnEditorCompleted اجرا میشود که باunfocus کردن Editor و یا زدن دکمه "Done" در iOS انجام میشود. آرگومان sender، شی Editor است که موظف است TextChanged event را آغاز کند و میتواند از طریق Editor در دسترس قرار بگیرد.

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

در دو event handler، break point هایی قرار دهید و متنی به Editor وارد کنید . مشاهده کنید که TextChanged event آغاز میشود. Editor را Unfocus کنید و مشاهده کنید که Completed event آغاز میشود.

گام سوم

در Visual Studio

１. در MainPage.xaml ، تعریف Editor را تغییر دهید تا رفتار آن را تعیین کنید:

این کد صفاتی که رفتار Editor را مشخص میکند، تعیین میکند. صفت AutoSize ، مقدار TextChanges را گرفته است که به این معنی است که طول Editor زمانی که Text داخل آن قرار بگیرد، افزایش پیدا میکند و زمانی که متن داخل آن حذف شود، از بین میرود. صفت MaxLength محدودیت طول ورودی Editor را مشخص میکند. همچنین صفات IsSpellCheckEnabled و IsTextPredictionEnabled ، false مقدار دهی شده تا غیر فعال شود.

２. در در Visual Studio toolbar، دکمه Start را بزنید(دکمه مثلثی که مانند علامت play است) تا اپلیکیشن در شبیه ساز منتخب iOS یا اندروید شما اجرا شود. متنی در Editor وارد کنید و مشاهده کنید که طول Editor با متن افزایش می یابد و زمانی که حذف شود، کم میشود. همچنین مشاهده کنید که بیشترین تعداد کاراکتر های ورودی ۲۰۰ کاراکتر میباشد:

در Visual Studio for Mac

１. در MainPage.xaml ، تعریف Editor را تغییر دهید تا رفتار آن را تعیین کنید:

این کد صفاتی که رفتار Editor را مشخص میکند، تعیین میکند. صفت AutoSize ، مقدار TextChanges را گرفته است که به این معنی است که طول Editor زمانی که Text داخل آن قرار بگیرد، افزایش پیدا میکند و زمانی که متن داخل آن حذف شود، از بین میرود. صفت MaxLength محدودیت طول ورودی Editor را مشخص میکند. همچنین صفات IsSpellCheckEnabled و IsTextPredictionEnabled ، false مقدار دهی شده تا غیر فعال شود.

２. در در Visual Studio for Mac toolbar، دکمه Start را بزنید(دکمه مثلثی که مانند علامت play است) تا اپلیکیشن در شبیه ساز منتخب iOS یا اندروید شما اجرا شود. متنی در Editor وارد کنید و مشاهده کنید که طول Editor با متن افزایش می یابد و زمانی که حذف شود، کم میشود. همچنین مشاهده کنید که بیشترین تعداد کاراکتر های ورودی ۲۰۰ کاراکتر میباشد:

گام چهارم

تبریک!

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

• یک Xamarin.Forms Editor با XAML بسازید.
• به تغییر متن در Editor پاسخ دهید.
• رفتار Editor را تعیین کنید.