|آموزش xamarin|آموزش ايجاد عكس در زامارين|

آموزش عكس در Xamarin

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

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

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

• یک Xamarin.Forms Image در XAML بسازید.
• ظاهر Image را تغییر دهید.
• Image های موجود در local file را در هر پلتفرم نمایش دهید.

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

گام اول

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

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

این کد UI صفحه را تعیین میکند که شامل یک Image در یک StackLayout میباشد. صفت Image.Source ، عکسی که میخواهیم نمایش دهیم با یک URI مشخص میکند. Image.Source، که نوع ImageSource دارد، اجازه میدهد عکس هایی از منابع فایل، URI ها و یا resource داشته باشیم. برای اطلاعات بیشتر، Displaying images را در راهنما Images in Xamarin.Forms ببینید.

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

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

این کد UI صفحه را تعیین میکند که شامل یک Image در یک StackLayout میباشد. صفت Image.Source ، عکسی که میخواهیم نمایش دهیم با یک URI مشخص میکند. Image.Source، که نوع ImageSource دارد، اجازه میدهد عکس هایی از منابع فایل، URI ها و یا resource داشته باشیم. برای اطلاعات بیشتر، Displaying images را در راهنما Images in Xamarin.Forms ببینید.

صفت HeightRequest، طول Image را در device-independent units مشخص میکند.

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

گام دوم

در Visual Studio

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

این کد صفت 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 toolbar، دکمه Start را بزنید(دکمه مثلثی که مانند علامت play است) تا اپلیکیشن در شبیه ساز منتخب iOS یا اندروید شما اجرا شود:

در Visual Studio for Mac

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

این کد صفت 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 است) تا اپلیکیشن در شبیه ساز منتخب iOS یا اندروید شما اجرا شود:

گام سوم

فایل های عکس میتوانند به platform projects اضافه شوند و از طریق Xamarin.Forms shared code ارجاع داده شوند. این متد توزیع عکس زمانی مورد استفاده قرار میگیرد که عکس هاplatform-specific باشند، مانند زمانی که از resolution های مختلف و یا design مختلف، در پلتفرم ها استفاده میکنیم.

در این تمرین شما ImageTutorial را طورو تغییر میدهید که از یک Local image، به جای یک عکس دانلود شده از URI، استفاده کند. Local image مورد نظر، لوگو Xamarin است که میتوانید از لینک زیر دانلود کنید:

دانلود XamarinLogo.png

در Visual Studio

１. در Solution Explorer، در پروژه ImageTutorial.iOS، Assets Catalogs را باز کنید، بر Assets دابل کلیک کنید تا باز شود. درتب Assets.xcassets، بر دکمه plus کلیک کنید و Add Image Set را انتخاب کنید:

２. درتب Assets.xcassets، new iamge set را انتخاب کنید. ادیتور نمایش داده میشود:

３. XamarinLogo.png را از فایل سیستم خود به جعبه 1x برای کتگوری Universal منتقل کنید:

４. درتب Assets.xcassets، بر نام image راست کلیک کنید و نامش را به XamarinLogo تغییر دهید:

تغییرات را ذخیره کنید و Assets.xcassets را ببندید.

５. در Solution Explorer، درپروژه ImageTutorial.Android، فولدرResources را باز کنید. سپس XamarinLogo.png را از فایل سیستم خود به فولدرdrawable ببرید:

６. درپروژه ImageTutorial، در MainPage.xaml، تعریف Image را تغییر دهید تا فایل local ، XamarinLogo را نشان دهد:

در این کد صفت Source، local file را نشان میدهد. مقدار صفت WidthRequest، 300 device-independent units برای iOS و 250 device-independent units برای اندروید در نظر گرفته شده است. صفت HorizontalOptions مشخص میکند که عکس به شکل افقی در مرکز قرار میگیرد.

７. در Visual Studio for Mac toolbar ، دکمه Start را بزنیدتا اپلیکیشن در دستگاه شبیه ساز انتخابی شما اجرا شود:

در Visual Studio for Mac

１. در Solution Pad ، در پروژه ImageTutorial.iOS، بر Assets.xcassets دابل کلیک کنید تا باز شود. سپس، در Assets List، راست کلیک کنید و New Image Set را انتخاب کنید:

２. در Assets List، new image set را انتخاب کنید تا editor نمایش داده شود:

３. XamarinLogo.png را از فایل سیستم خود بکشید و در 1x برای کتگوری Universal بگذارید:

４. در Assets List ، بر نام new image set دابل کلیک کنید و آن را XamarinLogo نام گذاری کنید:

５. در Solution Pad، درپروژه ImageTutorial.Android، فولدر Resources را باز کنید، XamarinLogo.png را از فایل سیستم خود به فولدر drawable بکشید.

６. در دیالوگ Add File to Folder، OK را بزنید:

７. درپروژه ImageTutorial، در MainPage.xaml، تعریف Image را تغییر دهید تا فایل local ، XamarinLogo را نشان دهد:

در این کد صفت Source، local file را نشان میدهد. مقدار صفت WidthRequest، 300 device-independent units برای iOS و 250 device-independent units برای اندروید در نظر گرفته شده است. صفت HorizontalOptions مشخص میکند که عکس به شکل افقی در مرکز قرار میگیرد.

８. در Visual Studio for Mac toolbar ، دکمه Start را بزنیدتا اپلیکیشن در دستگاه شبیه ساز انتخابی شما اجرا شود:

گام چهارم

تبريك

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

• یک Xamarin.Forms Image در XAML بسازید.
• ظاهر Image را تغییر دهید.
• Image های موجود در local file را در هر پلتفرم نمایش دهید.