مشخصات مقاله
-
537
-
0.0
-
3146
-
0
-
0
|آموزش xamarin|آموزش ListView در زامارين|
آموزش گريد Grid در Xamarin
قبل از شروع، باید با موفقیت بخش های زیر را به پایان رسانده باشید
- نوشتن اولین برنامه در زامارین
در این بخش شما می آموزید چگونه:
- یک Xamarin.Forms ListView در XAML بسازید.
- در ListView، داده قرار دهید.
- به انتخاب ایتم های موجود در ListView پاسخ دهید.
- ظاهر cell های ListView را تغیید دهید.
شما میتوانید از Visual Studio 2019 ویا Visual Studio for Mac برای تولید یک اپلیکیشن ساده که محتوا یک ListView را نمایش دهد ، استفاده کنید. اپلیکیشن نهایی به شکل زیر خواهد بود:
گام اول
در 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 بسازید و آن را ListViewTutorial نام گذاری کنید. مطمئن شوید که اپ شما از مکانیزم .NET Standard برای shared code استفاده میکند.
برای استفاده از کد ها C# و XAML موجود در این بخش شما باید solution خود را ListViewTutorial بنامید. استفاده از نام متفاوت باعث میشود شما با کپی کردن کد های موجود در این بخش به error برخورد کنید.
２. در Solution Explorer، در پروژه ListViewTutorial ، بر MainPage.xaml دابل کلیک کنید تا باز شود و سپس کد های موجود در آن را حذف کرده و کد زیر را جایگزین کنید:
Baboon
Capuchin Monkey
Blue Monkey
Squirrel Monkey
Golden Lion Tamarin
Howler Monkey
Japanese Macaque
این کد UI صفحه را مشخص میکند که شامل یک ListView در یک StackLayout میباشد. صفت ListView.ItemSource، آیتم هایی که باید نمایش داده شودن را، در یک آرایه string ، نمایش میدهند.
３. در Visual Studio toolbar، دکمه Start را ( که یک علامت مثلثی شبیه به دکمه play دارد) بزنید تا اپلیکیشن در دستگاه شبیه ساز انتخابی شما اجرا شود:
در 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 بسازید و آن را ListViewTutorial نام گذاری کنید. مطمئن شوید که اپ شما از مکانیزم .NET Standard برای shared code استفاده میکند.
برای استفاده از کد ها C# و XAML موجود در این بخش شما باید solution خود را ListViewTutorial بنامید. استفاده از نام متفاوت باعث میشود شما با کپی کردن کد های موجود در این بخش به error برخورد کنید.
２. در Solution Pad، در پروژه ListViewTutorial ، بر MainPage.xaml دابل کلیک کنید تا باز شود و سپس کد های موجود در آن را حذف کرده و کد زیر را جایگزین کنید:
Baboon
Capuchin Monkey
Blue Monkey
Squirrel Monkey
Golden Lion Tamarin
Howler Monkey
Japanese Macaque
این کد UI صفحه را مشخص میکند که شامل یک ListView در یک StackLayout میباشد. صفت ListView.ItemSource، آیتم هایی که باید نمایش داده شودن را، در یک آرایه string ، نمایش میدهند.
３. در Visual Studio toolbar، دکمه Start را ( که یک علامت مثلثی شبیه به دکمه play دارد) بزنید تا اپلیکیشن در دستگاه شبیه ساز انتخابی شما اجرا شود:
گام دوم
در Visual Studio
１. در MainPage.xaml، تعریف ListViewTutorial را تغییر دهید تا ستون ها ردیف ها را مشخص کند و محتوا را در آنها قرار دهد:
public class Monkey
{
public string Name { get; set; }
public string Location { get; set; }
public string ImageUrl { get; set; }
public override string ToString()
{
return Name;
}
}
این کد شی Monkey را تعریف میکند که یک نام، یک مکان و یک url از عکس یک monkey میگیرد. علاوه بر این، کلاس یک متد ToSting را Override میکند که صفت Name را برمیگرداند.
２. در Solution Explorer، درپروژه ListViewTutorial، MainPage.xaml را باز کنید و بر MainPage.xaml.cs دابل کلیک کنید تا باز شود سپس کد های موجود در آن را حذف کنید و کد زیر را جایگزین کنید:
using System.Collections.Generic;
using Xamarin.Forms;
namespace ListViewTutorial
{
public partial class MainPage : ContentPage
{
public IList Monkeys { get; private set; }
public MainPage()
{
InitializeComponent();
Monkeys = new List();
Monkeys.Add(new Monkey
{
Name = "Baboon",
Location = "Africa & Asia",
ImageUrl = "http://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"
});
Monkeys.Add(new Monkey
{
Name = "Capuchin Monkey",
Location = "Central & South America",
ImageUrl = "http://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Capuchin_Costa_Rica.jpg/200px-Capuchin_Costa_Rica.jpg"
});
Monkeys.Add(new Monkey
{
Name = "Blue Monkey",
Location = "Central and East Africa",
ImageUrl = "http://upload.wikimedia.org/wikipedia/commons/thumb/8/83/BlueMonkey.jpg/220px-BlueMonkey.jpg"
});
Monkeys.Add(new Monkey
{
Name = "Squirrel Monkey",
Location = "Central & South America",
ImageUrl = "http://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Saimiri_sciureus-1_Luc_Viatour.jpg/220px-Saimiri_sciureus-1_Luc_Viatour.jpg"
});
Monkeys.Add(new Monkey
{
Name = "Golden Lion Tamarin",
Location = "Brazil",
ImageUrl = "http://upload.wikimedia.org/wikipedia/commons/thumb/8/87/Golden_lion_tamarin_portrait3.jpg/220px-Golden_lion_tamarin_portrait3.jpg"
});
Monkeys.Add(new Monkey
{
Name = "Howler Monkey",
Location = "South America",
ImageUrl = "http://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Alouatta_guariba.jpg/200px-Alouatta_guariba.jpg"
});
Monkeys.Add(new Monkey
{
Name = "Japanese Macaque",
Location = "Japan",
ImageUrl = "http://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Macaca_fuscata_fuscata1.jpg/220px-Macaca_fuscata_fuscata1.jpg"
});
Monkeys.Add(new Monkey
{
Name = "Mandrill",
Location = "Southern Cameroon, Gabon, Equatorial Guinea, and Congo",
ImageUrl = "http://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Mandrill_at_san_francisco_zoo.jpg/220px-Mandrill_at_san_francisco_zoo.jpg"
});
Monkeys.Add(new Monkey
{
Name = "Proboscis Monkey",
Location = "Borneo",
ImageUrl = "http://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Proboscis_Monkey_in_Borneo.jpg/250px-Proboscis_Monkey_in_Borneo.jpg"
});
Monkeys.Add(new Monkey
{
Name = "Red-shanked Douc",
Location = "Vietnam, Laos",
ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9f/Portrait_of_a_Douc.jpg/159px-Portrait_of_a_Douc.jpg"
});
Monkeys.Add(new Monkey
{
Name = "Gray-shanked Douc",
Location = "Vietnam",
ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Cuc.Phuong.Primate.Rehab.center.jpg/320px-Cuc.Phuong.Primate.Rehab.center.jpg"
});
Monkeys.Add(new Monkey
{
Name = "Golden Snub-nosed Monkey",
Location = "China",
ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Golden_Snub-nosed_Monkeys%2C_Qinling_Mountains_-_China.jpg/165px-Golden_Snub-nosed_Monkeys%2C_Qinling_Mountains_-_China.jpg"
});
Monkeys.Add(new Monkey
{
Name = "Black Snub-nosed Monkey",
Location = "China",
ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/RhinopitecusBieti.jpg/320px-RhinopitecusBieti.jpg"
});
Monkeys.Add(new Monkey
{
Name = "Tonkin Snub-nosed Monkey",
Location = "Vietnam",
ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9c/Tonkin_snub-nosed_monkeys_%28Rhinopithecus_avunculus%29.jpg/320px-Tonkin_snub-nosed_monkeys_%28Rhinopithecus_avunculus%29.jpg"
});
Monkeys.Add(new Monkey
{
Name = "Thomas's Langur",
Location = "Indonesia",
ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Thomas%27s_langur_Presbytis_thomasi.jpg/142px-Thomas%27s_langur_Presbytis_thomasi.jpg"
});
Monkeys.Add(new Monkey
{
Name = "Purple-faced Langur",
Location = "Sri Lanka",
ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Semnopithèque_blanchâtre_mâle.JPG/192px-Semnopithèque_blanchâtre_mâle.JPG"
});
Monkeys.Add(new Monkey
{
Name = "Gelada",
Location = "Ethiopia",
ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/1/13/Gelada-Pavian.jpg/320px-Gelada-Pavian.jpg"
});
BindingContext = this;
}
}
}
این کد، صفت Monkeys را از نوع IList
صفت BindingContext از طریق Visual tree، منتقل میشود. بنابراین، از آنجا که برای شی ContextPage تنظیم شده است، این مقدار به Child های ContentPage، از جمله ListView، منتقل میشود. ３. در MainPage.xaml، تعریف ListView تغییر دهید تا صفت ItemSource برای مجموعه Monkeys تنظیم شود: این کد دیتا، صفت ItemSource را به مجموعه Monkeys ، bind میکند. در زمان اجرا، ListView برای مجموعه Monkeys ، به BindingContext خود نگاه میکند و با دیتا مجموعه پر میشود. برای اطلاعات بیشتر درباره data binding، به Xamarin.Forms Data Binding مراجعه کنید. ４. در Visual Studiotoolbar، دکمه start را (که یک علامت مثلثی شبیه به علامت play دارد) بزنید تا اپلیکیشن در شبیه ساز انتخابی شما اجرا شود: ListView، صفت Name از هر Monkey در مجموعه Monkeys را، نشان میدهد زیراکه به صورت پیش فرض، ListView متد ToString را برای نمایش اشیا از مجموعه صدا میکند که در کلاس Monkey ، Override شده است که مقدار صفت Name را برگرداند. １. در Solution Pad، در پروژه ListViewTutorial ، کلاسی به نام Monkey بسازید و کد زیر در آن قرار دهید: این کد شی Monkey را تعریف میکند که یک نام، یک مکان و یک url از عکس یک monkey میگیرد. علاوه بر این، کلاس یک متد ToSting را Override میکند که صفت Name را برمیگرداند. ２. در Solution Pad، درپروژه ListViewTutorial، MainPage.xaml را باز کنید و بر MainPage.xaml.cs دابل کلیک کنید تا باز شود سپس کد های موجود در آن را حذف کنید و کد زیر را جایگزین کنید: این کد، صفت Monkeys را از نوع IList
صفت BindingContext از طریق Visual tree، منتقل میشود. بنابراین، از آنجا که برای شی ContextPage تنظیم شده است، این مقدار به Child های ContentPage، از جمله ListView، منتقل میشود. ３. در MainPage.xaml، تعریف ListView تغییر دهید تا صفت ItemSource برای مجموعه Monkeys تنظیم شود: این کد دیتا، صفت ItemSource را به مجموعه Monkeys ، bind میکند. در زمان اجرا، ListView برای مجموعه Monkeys ، به BindingContext خود نگاه میکند و با دیتا مجموعه پر میشود. برای اطلاعات بیشتر درباره data binding، به Xamarin.Forms Data Binding مراجعه کنید. ４. در Visual Studiotoolbar، دکمه start را (که یک علامت مثلثی شبیه به علامت play دارد) بزنید تا اپلیکیشن در شبیه ساز انتخابی شما اجرا شود: ListView، صفت Name از هر Monkey در مجموعه Monkeys را، نشان میدهد زیراکه به صورت پیش فرض، ListView متد ToString را برای نمایش اشیا از مجموعه صدا میکند که در کلاس Monkey ، Override شده است که مقدار صفت Name را برگرداند. １. در MainPage.xaml، تعریف ListView را تغییر دهید تا محتوا در ستون و ردیف ها قرار بگیرند: این کد برایItemSelected یک handler event به نام OnListViewItemSelected و برای ItemTapped یک event handler به نام OnListViewItemTapped تنظیم میکند.
هر دو این event handler ها در گام بعدی ایجاد میشوند.
２. در Solution Explore، در پروژه ListViewTutorial ، MainPage.xaml را باز کنید و بر MainPage.xaml.cs دابل کلیک کنید تا باز شود. سپس event handler های OnListViewItemSelected و OnListViewItemTapped را به کلاس اضافه کنید: زمانی که یک به یک آیتم در ListView ضربه زده میشود(tapped)، event های ItemSelected و ItemTapped آغاز میشوند که باعث میشود متد های OnListViewItemSelected و OnLIstViewItemTapped اجرا شوند. آرگومان های sender برای هر دو متد، شی ListView میباشد که موظف است event ها را آغاز کند و از طریق شی ListView قابل دسترس است. آرگومان SelectedItemChangedEventArgs در متد OnListViewItemSelected، آیتم های انتخاب شده و آرگومان ItemTappedEventArgs در متد OnListViewItemTapped، آیتم های ضربه زده شده را فراهم میکنند. ItemSelected event تنها زمانی آغاز میشود که یک item از ListView انتخاب شده باشد. بنابراین دوبارضربه زدن به یک آیتم، دو ItemTapped events را آغاز میکند اما فقط یک ItemSelected event آغاز میشود. ３. در Visual Studio، دکمه Start را ( که علامتی مثلثی شبیه علامت play دارد) بزنید تا اپلیکیشن در شبیه ساز انتخابی شما اجرا شود: در هر دو event handler ها breakpoint قرار دهید و بر یک item در ListView ضربه بزنید. توجه کنید که ItemSelecte فقط زمانی آغاز میشود که یک آیتم جدید در ListView انتخاب شود اما ItemTapped هر بار که بی آیتم ضربه بزنید، آغاز میشود. １. در MainPage.xaml، تعریف ListView را تغییر دهید تا برای event های ItemSelected و ItemTapped، handler هایی تعریف شود: این کد برایItemSelected یک handler event به نام OnListViewItemSelected و برای ItemTapped یک event handler به نام OnListViewItemTapped تنظیم میکند.
هر دو این event handler ها در گام بعدی ایجاد میشوند.
２. در Solution Pad، در پروژه ListViewTutorial ، MainPage.xaml را باز کنید و بر MainPage.xaml.cs دابل کلیک کنید تا باز شود. سپس event handler های OnListViewItemSelected و OnListViewItemTapped را به کلاس اضافه کنید: زمانی که یک به یک آیتم در ListView ضربه زده میشود(tapped)، event های ItemSelected و ItemTapped آغاز میشوند که باعث میشود متد های OnListViewItemSelected و OnLIstViewItemTapped اجرا شوند. آرگومان های sender برای هر دو متد، شی ListView میباشد که موظف است event ها را آغاز کند و از طریق شی ListView قابل دسترس است. آرگومان SelectedItemChangedEventArgs در متد OnListViewItemSelected، آیتم های انتخاب شده و آرگومان ItemTappedEventArgs در متد OnListViewItemTapped، آیتم های ضربه زده شده را فراهم میکنند. ItemSelected event تنها زمانی آغاز میشود که یک item از ListView انتخاب شده باشد. بنابراین دوبارضربه زدن به یک آیتم، دو ItemTapped events را آغاز میکند اما فقط یک ItemSelected event آغاز میشود. ３. درfor Mac Visual Studio، دکمه Start را ( که علامتی مثلثی شبیه علامت play دارد) بزنید تا اپلیکیشن در شبیه ساز انتخابی شما اجرا شود: در هر دو event handler ها breakpoint قرار دهید و بر یک item در ListView ضربه بزنید. توجه کنید که ItemSelecte فقط زمانی آغاز میشود که یک آیتم جدید در ListView انتخاب شود اما ItemTapped هر بار که بی آیتم ضربه بزنید، آغاز میشود. در گام های قبل، با استفاده از data binding ، ListView را پر کردیم. بااینکه در data binding به یک مجموعه ، هر شی در مجموعه چند آیتم از دیتا را تعریف میکند، تنها یک آیتم از دیتا در شی نشان داده میشود؛ مثلا صفت Name از شی Monkey. در این بخش شما ListViewTutorial را طوری تغییر میدهید که ListView چند آیتم از دیتا را در یک ردیف نشان دهد. １. در MainPage.xaml، تعریف ListView را تغییر دهید تا ظاهر هر ردیف تغییر کند: این کد صفت ListView.ItemTemplate را DataTemplate قرار میدهد که ظاهر هر ردیف از ListView را تعیین میکند. یک child برای DataTemplate باید از نوع cell باشد یا از آن مشتق گرفته شده باشد. این کد از ViewCell ، که از cell مشتق شده است، برای ایجاد یک custom layout برای هر ردیف از ListView استفاده میکند. Layout های داخل ViewCell با Grid مدیریت میشوند که شامل یک شی Image و دو شی Label میباشد. شی Image، صفت Source خود را به صفت ImageUrl از هر شی Monkey، bind میکند و شی Label صفت Text خود را با صفاتName و Location از هر شی Monkey ، bind میکند.
به صورت پیش فرض، تمام ردیف ها از یک ListView دارای طول یکسان هستند، بااین حال این کد ListView.HasUnevenRows را true قرار میدهد تا ردیف ها بتوانند طول متفاوتی بسته به محتوای خود داشته باشند. این باعث میشود صفات Name و Location از هرشی Monkey ، به اجبار طول مشخص داشته باشند. برای اطلاعات بیشتر درباره ظاهر cellهای ListView، Customizing ListView Cell Appearance را ببینید. برای اطلاعات بیشتر درباره data template ها، Xamarin.Forms Data Templates را ببینید. ２. در Visual Studio toolbar ، دکمه start را( که علامتی مثلثی شبیه علامت Play دارد) بزنید تا اپلیکیشن در دستگاه شبیه ساز انتخابی شما اجرا شود: １. در MainPage.xaml، تعریف ListView را تغییر دهید تا ظاهر هر ردیف تغییر کند: این کد صفت ListView.ItemTemplate را DataTemplate قرار میدهد که ظاهر هر ردیف از ListView را تعیین میکند. یک child برای DataTemplate باید از نوع cell باشد یا از آن مشتق گرفته شده باشد. این کد از ViewCell ، که از cell مشتق شده است، برای ایجاد یک custom layout برای هر ردیف از ListView استفاده میکند. Layout های داخل ViewCell با Grid مدیریت میشوند که شامل یک شی Image و دو شی Label میباشد. شی Image، صفت Source خود را به صفت ImageUrl از هر شی Monkey، bind میکند و شی Label صفت Text خود را با صفاتName و Location از هر شی Monkey ، bind میکند. به صورت پیش فرض، تمام ردیف ها از یک ListView دارای طول یکسان هستند، بااین حال این کد ListView.HasUnevenRows را true قرار میدهد تا ردیف ها بتوانند طول متفاوتی بسته به محتوای خود داشته باشند. این باعث میشود صفات Name و Location از هرشی Monkey ، به اجبار طول مشخص داشته باشند. برای اطلاعات بیشتر درباره ظاهر cellهای ListView، Customizing ListView Cell Appearance را ببینید. برای اطلاعات بیشتر درباره data template ها، Xamarin.Forms Data Templates را ببینید. ２. در Visual Studio for Mac toolbar ، دکمه start را( که علامتی مثلثی شبیه علامت Play دارد) بزنید تا اپلیکیشن در دستگاه شبیه ساز انتخابی شما اجرا شود: تبريك شما با موفقیت این بخش را به اتمام رساندید و آموختید:
در Visual Studio for Mac
public class Monkey
{
public string Name { get; set; }
public string Location { get; set; }
public string ImageUrl { get; set; }
public override string ToString()
{
return Name;
}
}
using System.Collections.Generic;
using Xamarin.Forms;
namespace ListViewTutorial
{
public partial class MainPage : ContentPage
{
public IList
گام سوم
در Visual Studio
void OnListViewItemSelected(object sender, SelectedItemChangedEventArgs e)
{
Monkey selectedItem = e.SelectedItem as Monkey;
}
void OnListViewItemTapped(object sender, ItemTappedEventArgs e)
{
Monkey tappedItem = e.Item as Monkey;
}
در Visual Studio for Mac
void OnListViewItemSelected(object sender, SelectedItemChangedEventArgs e)
{
Monkey selectedItem = e.SelectedItem as Monkey;
}
void OnListViewItemTapped(object sender, ItemTappedEventArgs e)
{
Monkey tappedItem = e.Item as Monkey;
}
گام چهارم
در Visual Studio
در Visual Studio for Mac
گام پنجم