Image Button در Xamarin.Forms

کلیه حقوق مادی و معنوی این مقاله متعلق به آموزشگاه تحلیل داده می باشد و هر گونه استفاده غیر قانونی از آن پیگرد قانونی دارد.

Image Button در Xamarin.Forms

در این مقاله به شما آموزش خواهیم داد چطور یک در Xamarin.Forms یک Image Button ایجاد کنید. حتماً از خودتان می  پرسید چرا؟ مگر نه اینکه در Button خاصیتی به نام Image وجود دارد؟ اما با استفاده از این خاصیت، تصویر به صورت یک آیکون به متن موجود در دکمه اضافه می شود.

مواد لازم:

·         Visual Studio 2012 or higher/Xamarin Studio 5

·         Xamarin Forms 1 or higher

طرز تهیه:

1.     با انتخاب New Project از صفحه خوشآمدگویی Visual Studio، یک برنامه جدید ایجاد کنید.

2.     از بین قالب های نصب شده بر روی Visual Studio در زبان C#، Mobile Apps را انتخاب کنید. دو گزینه برای ساخت Blank App خواهید داشت: Xamarin.Forms Portable و Xamarin.Forms Shared. گزینه Xamarin.Forms Portable را انتخاب کنید.

3.     در فایل Solution چهار پروژه با نام های XamarinSample (Portable)، XamarinSample.Android، XamarinSample.iOS و XamarinSample.WinPhone وجود دارد. بر روی اولین پروژه (XamarinSample (Portable)) راست کلیک کرده و گزینه Add>New Item را انتخاب کنید.

4.     در پنجره باز شده، Forms XAML Page را انتخاب و یک نام برای آن وارد کنید.

5.     بعد از اضافه شدن Forms XAML Page به پروژه، App.Cs را باز کنید و کد زیر را در سازنده آن را وارد کنید:

MainPage = new NavigationPage(new MainPage()); 

6.     به Forms XAML Page ای که در مرحله 4 ایجاد کردیم بر گردید. به عبارتی صفحه اصلی (MainPage) که در سازنده فراخوانی کردیم. تگ Label زیر را جایگزین تگ موجود در آن کنید:

<Image x:Name="img" Source="image.jpg" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"></Image>

7.     کدهای زیر را برای تشخیص tap (Tap Gesture Recognizers) در فایل MainPage.xaml.cs وارد کنید:

//Creating TapGestureRecognizers  

var tapImage = new TapGestureRecognizer();  

//Binding events  

tapImage.Tapped += tapImage_Tapped;  

//Associating tap events to the image buttons  

img.GestureRecognizers.Add(tapImage);  

void tapImage_Tapped(object sender, EventArgs e)  

{  

  // handle the tap  

  DisplayAlert("Alert", "This is an image button", "OK");  

}

8.     فایل image.jpg را در هر سه پروژه با سیستم های عامل مختلف و در مسیر مشخص برای هر کدام، اضافه کنید:

·         Android: پوشه ImageButtonRecipe.Droid -> Resources -> drawable

·         iOS: ImageButtonRecipe.iOS -> Resources

·         WinPhone: ImageButtonRecipe.WinPhone

9.     حالا Image Button در تمام دستگاه ها به شکل زیر خواهد بود:

10. با کلیک بر روی این دکمه ها، یک پیغام به صورت pop-up باز می شود: