Xamarin Form初学（一）——Monkey

关于Xamarin 的破解已经有很多资料了 我就不废话了。
直接开始项目。

在创建三个文件夹
Models、ViewModels、Views，大家一看就应该知道我现在用的MVVM的框架。
Models目录里面放的是用户展示的数据。
Views目录里面放的是展示的页面布局。
ViewModels目录里面放的是Models于Views之间的逻辑关系（数据填充关系）。

在Models目录下创建一个类Monkey。我们要展示的是猴子数据。

    public class Monkey
    {
        public string Name { get; set; }
        public string Location { get; set; }
        public string Details { get; set; }
    }

在ViewModels下面创建MonkeysViewModel.cs的类。ViewModels用来收集世界上所有的猴子。

public class MonkeysViewModel
    {
        public ObservableCollection<Monkey> Monkeys { get; set; }
        public MonkeysViewModel()
        {
            Monkeys = new ObservableCollection<Monkey>();
            Monkeys.Add(new Monkey
            {
                Name = "Baboon",
                Location = "Africa & Asia",
                Details = "Baboons are African and Arabian Old World monkeys belonging to" +
                " the genus Papio, part of the subfamily Cercopithecinae."
            });
            Monkeys.Add(new Monkey
            {
                Name = "Capuchin Monkey",
                Location = "Central & South America",
                Details = "The capuchin monkeys are New World monkeys of the subfamily Cebinae." +
                " Prior to 2011, the subfamily contained only a single genus, Cebus."
            });
            Monkeys.Add(new Monkey
            {
                Name = "Blue Monkey",
                Location = "Central and East Africa",
                Details = "The blue monkey or diademed monkey is a species of Old World monkey native to Central and" +
                "East Africa, ranging from the upper Congo River basin east to the East African"+
                " Rift and south to northern Angola and Zambia"
            });

            Monkeys.Add(new Monkey()
            {
                Name="Squirrel Monkey",
                Location="Central & South America",
                Details="The Squirrel monkeys are the New World monkeys of the genus Saimiri, "+
                "They are the only geuns in the subfamily Saimirinae. The name of the genus Saimiri"+
                " is of Tupi origin, and was also used as an English name by early researchers."
            });
            Monkeys.Add(new Monkey()
            {
                Name = "Golden Lion Tamarin",
                Location = "Brazil",
                Details = "The golden lion tamarin also known as the golden marmoset, is a small New World monkey of"+
                "the family Callitrichidae."
            });
            Monkeys.Add(new Monkey()
            {
                Name = "Howler Monkey",
                Location = "South America",
                Details = "Howler monkeys are among the largest"+
                "of the New World monkeys. Fifteen species are"+
                "currently recognized. Previously classifid in"+
                "the family Cebidae, they are now placed in the"+
                "family Atelidae."
            });
            Monkeys.Add(new Monkey()
            {
                Name = "Japanese Macaque",
                Location = "Japan",
                Details = "The Japanese macaque, is a terrestrial"+
                "Old World monkey species native to Japan. They are" +
                "also sometimes known as the snow monkey because" +
                "they live in areas where snow covers the ground"+
                "for months each"
            });
            Monkeys.Add(new Monkey()
            {
                Name = "Mandrill",
                Location = "Southern Cameroon, Gabon,Equatorial Guinea, and Congo",
                Details = "The mandrill is a primate of the Old World monkey family, closely related to the baboons"+
                "and even more closely to the drill. It is found in southern Cameroon, Gabon, Equatorial Guinea,"+
                "and Congo."
            });
            Monkeys.Add(new Monkey() 
            {
                Name = "Proboscis Monkey",
                Location = "Borneo",
                Details = "The proboscis monkey or long-nosed monkey,"+
                "known as the bekantan in Malay," +
                "is a reddish-brown arboreal Old World monkey that is" +
                "endemic to the south-east Asian island of Borneo." 
            });

        }
    }

Views目录下创建DetailsPage.cs（用于展示每一只猴子的信息）的类，我们要展示的页面布局
（注：这里我使用代码的方式来编写界面布局，以后再写用Xaml编写布局）

 public class DetailsPage:ContentPage
    {
        public DetailsPage(Models.Monkey monkey)
        {
            this.Title = monkey.Name;

            var details = new Label
            {
                Text = monkey.Details
            };

            Content = new ScrollView
            {
                Padding = 20,
                Content = details
            };
        }
    }

记住一定要View一定要继承ContentPage，需要引用Xamarin.Forms这个命名空间。
一下看懂代码的同学可以跳过。

---

this.Title 是ContentPage类中的一个属性看名字就知道使用来显示的标题。
Content 也是ContentPage类中的一个属性显示内容。
Title可以看作HTML中的Hand标记（只能显示文字），
Content 可以看作是HTML中的Body标记

---

我们在编写MonkeyPage页面用来展示所有的猴子，只用ListView展示Name、Location属性，Detail在详细页面中显示。

public class MonkeyPage:ContentPage
    {
        public MonkeyPage()
        {
            Title = "Monkeys";

            var list = new ListView();

            var viewModel = new MonkeysViewModel();

            list.ItemsSource = viewModel.Monkeys;

            var cell = new DataTemplate(typeof(TextCell));
            cell.SetBinding(TextCell.TextProperty, "Name");
            cell.SetBinding(TextCell.DetailProperty, "Location");
            list.ItemTemplate = cell;

            list.ItemTapped += (sender, args) =>
            {
                var monkey = args.Item as Monkey;
                if (monkey == null)
                {
                    return;
                }
                Navigation.PushAsync(new DetailsPage(monkey));
                list.SelectedItem = null;
            };

            Content = list;
        }

    }

啦啦啦最后一步
打开App.cs文件

public class App
    {
        public static Page GetMainPage()
        {
            var monkeys = new MonkeyPage();
            return new NavigationPage(monkeys);
        }
    }

直接按F5，如果没有链接iOS的同学们（我也是，穷），设置Android程序集为启动项目在运行。

---

如果遇到以下错误

根据提示下载文件，（迅雷下，等等），放到指定目录就可以了。
最后结果

---

---