Xamarin.Forms 開放資料跨平台應用程式開發 讀取資料與顯示清單

當您已經建立起 Xamarin.Forms 開發專案與加入了相關套件與插件，並且也在不同的專案內加入了分類用的資料夾，接下來，您將會需要開始寫出兩個頁面，其中，第一個頁面就是在應用程式啟動的時候，正在讀取與更新資料的頁面；當資料讀取完畢，就會切換到顯示清單的頁面，使用者可以透過這個頁面，瀏覽有哪些資料。

在這個階段的練習，您將會學會底下的 Xamarin.Forms 的開發技術：

1. 建立資料模型 (Model)
2. 建立可以讀取創業空間資料的類別
3. 建立全域靜態類別
4. 更新 MainPage 與其檢視模型 (ViewModel)
5. 建立首頁之導航頁面
6. 建立顯示創意空間清單的檢視(View)與檢視模型
7. 註冊此次新加入的 View

這篇章節的練習專案的原始程式碼將會存放在 GitHubhttps://github.com/vulcanlee/XFAppSample/tree/master/XFCreative/2.LoadList 內

建立資料模型 (Model)

1. 在核心PCL XFCreative 專案內，使用滑鼠右鍵點選 Models 資料夾，接著，選擇 加入 > 類別
2. 在 加入新項目 - XFCreative 對話窗中，點選 Visual C# > 類別
3. 在底下名稱欄位內，輸入 創業空間資料，接著，點選 新增 按鈕
4. 使用底下程式碼替換掉剛剛產生的檔案內容

創業空間資料.cs

1. 這個資料模型類別的欄位定義來源，是由創意空間的開放資料http://sme.moeasmea.gov.tw/startup/upload/opendata/gov_source_map_opendata.json 的 JSON 內容進行分析而得到的。其中，有些 JSON 欄位使用的屬性名稱，在C#中並不合法，因此，需要使用[JsonProperty(PropertyName = "JSON內實際欄位名稱")] 的 C# 屬性來修正某些欄位的定義，例如，在 JSON 中有個欄位是 聯絡e-mail，這樣的名稱在 C# 內是不被允許的，因此，在這裡使用[JsonProperty(PropertyName = "聯絡e-mail")] 做了修正。
2. 底下創意空間內的某個節點的資料：

{"創業空間名稱":"南投縣竹山鎮柯子坑社區","所屬單位":"政府單位-財政部國有財產署","創業空間類型":"公有活化空間","招募團隊類型":null,"座標經度":"120.66600430","座標緯度":"23.75490710","空間是否出租":"0","空間主照片":"https:\/\/sme.moeasmea.gov.tw\/startup\/thumbnail.php?src=upload\/space\/20150320040239nmw.jpg&w=351&zc=1","縣市區域":"南投縣","地址":"南投縣竹山鎮民生巷61-63號等20戶","標籤":"長期進駐,可住宿","詳細照片":"","聯絡人":"吳宏明","連絡電話":"049-2390100#305","聯絡e-mail":"ntu@fnpc.gov.tw","官方網站":" ","建築類型":"一般房屋","建造材質":"鋼筋混凝土","建物現況":"正常使用","樓別\/樓高":"每棟1-3\/3","使用坪數":"每棟42","空間資訊":"柯子坑社區透天別墅位於竹山鎮與雲林縣交界處，距國道3號竹山、斗六交流道均僅約15-20分鐘車程，交通方便。方圓內有公所文教區（公所、稅捐稽徵所、地政事務所、雲林及中和國小、欣榮紀念圖書館等）、竹山公園、台灣大學百年熱帶實驗林等，生活機能完善。當地除有秀傳醫院、慈山醫院外，經由南雲大橋跨越清水溪，另有台大醫院雲林分院，醫療體系完備。附近更有多處著名景點，如溪頭、杉林溪、鳳凰谷鳥園、大鞍天梯、竹海風景區、麒麟潭、紫南宮、古坑華山…等，休閒旅遊便捷。每戶基地約30坪，建坪約46坪，樓高3層，面寬5米、棟距6米，4房3衛2廳，獨門獨院，每戶皆含1個停車位，是青年創業及圓夢的理想場所。","進駐\/使用人數":"300人","價格方案":"<br>1.每戶申報地價總額為76,931元，每戶房屋課稅現值為347,900元<br>2.每戶年租金約38,637元（實際以出租當時計收標準計算為準）<br>3.水電費使用者自付","使用時間":"全日","備註":"鄉村區乙種建築用地（地目：建）","建立時間":"2015-03-13 09:37:38","修改時間":"2016-08-05 16:25:28"}

1. 這個 創業空間資料 類別所扮演的腳色，會將讀取到的遠端開放資料，將取得的文字JSON內容，經過 JSON 反序列化，就會轉換成為 List<創業空間資料> 物件。

using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace XFCreative.Models
{
    public class 創業空間資料
    {
        public string 創業空間名稱 { get; set; }
        public string 所屬單位 { get; set; }
        public string 創業空間類型 { get; set; }
        public string 招募團隊類型 { get; set; }
        public string 座標經度 { get; set; }
        public string 座標緯度 { get; set; }
        public string 空間是否出租 { get; set; }
        public string 空間主照片 { get; set; }
        public string 縣市區域 { get; set; }
        public string 地址 { get; set; }
        public string 標籤 { get; set; }
        public string 詳細照片 { get; set; }
        public string 聯絡人 { get; set; }
        public string 連絡電話 { get; set; }
        [JsonProperty(PropertyName = "聯絡e-mail")]
        public string 聯絡email { get; set; }
        public string 官方網站 { get; set; }
        public string 建築類型 { get; set; }
        public string 建造材質 { get; set; }
        public string 建物現況 { get; set; }
        [JsonProperty(PropertyName = "樓別/樓高")]
        public string 樓別樓高 { get; set; }
        public string 使用坪數 { get; set; }
        public string 空間資訊 { get; set; }
        [JsonProperty(PropertyName = "進駐/使用人數")]
        public string 進駐使用人數 { get; set; }
        public string 價格方案 { get; set; }
        public string 使用時間 { get; set; }
        public string 備註 { get; set; }
        public DateTime 建立時間 { get; set; }
        public DateTime 修改時間 { get; set; }
    }
}

建立可以讀取創業空間資料的類別

1. 在核心PCL XFCreative 專案內，使用滑鼠右鍵點選 Repositories 資料夾，接著，選擇 加入 > 類別
2. 在 加入新項目 - XFCreative 對話窗中，點選 Visual C# > 類別
3. 在底下名稱欄位內，輸入 創業空間Repository，接著，點選 新增 按鈕
4. 使用底下程式碼替換掉剛剛產生的檔案內容

創業空間Repository.cs

1. 在這個 創業空間Repository 類別內，定義了 取得最新資料 非同步方法
2. 這個 取得最新資料 方法透過 HttpClient 物件，讀取遠端創業空間的開放資料。
3. 接著透過 JsonConvert.DeserializeObject 泛型方法，針對剛剛取得的JSON文字內容，進行 JSON 反序列化
4. 在最後面有個迴圈，會把 空間主照片 / 詳細照片 欄位，把 https 變更成為 http

using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net.Http;
using System.Text;
using System.Threading.Tasks;
using XFCreative.Models;

namespace XFCreative.Repositories
{
    public class 創業空間Repository
    {
        public List<創業空間資料> Items = new List<創業空間資料>();

        public async Task 取得最新資料()
        {
            var fooClient = new HttpClient();
            var fooRet = await fooClient.GetStringAsync("http://sme.moeasmea.gov.tw/startup/upload/opendata/gov_source_map_opendata.json");

            Items = JsonConvert.DeserializeObject<List<創業空間資料>>(fooRet);

            foreach (var item in Items)
            {
                item.空間主照片 = item.空間主照片.Replace("https", "http");
                item.詳細照片 = item.詳細照片.Replace("https", "http");
            }
        }
    }
}

建立全域靜態類別

1. 在核心PCL XFCreative 專案內，使用滑鼠右鍵點選 Services 資料夾，接著，選擇 加入 > 類別
2. 在 加入新項目 - XFCreative 對話窗中，點選 Visual C# > 類別
3. 在底下名稱欄位內，輸入 GlobalData，接著，點選 新增 按鈕
4. 使用底下程式碼替換掉剛剛產生的檔案內容

GlobalData.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using XFCreative.Repositories;

namespace XFCreative.Services
{
    public class GlobalData
    {
        public static 創業空間Repository 創業空間Repository = new 創業空間Repository();
    }
}

更新 MainPage 與其檢視模型 (ViewModel)

MainPage View

1. 在核心PCL XFCreative 專案內，找到資料夾 Views ，開啟 MainPage.xaml
2. 使用底下程式碼替換掉剛剛開啟的檔案內容

MainPage.xaml

1. 在這個 XAML 檔案內，首先看到的是
   prism:ViewModelLocator.AutowireViewModel="True"
   上面的 XAML 宣告表示在這個 View 內，需要透過 Prism 自動進行 ViewModel 繫結，也就是說，當這個 View 建立的同時，相對應的 ViewModel 也會被產生，接著會被設定到該 View(在這個範例就是 ContentPage ) 的 BindingContext。
2. 在根項目 (Root Element)內，有使用 Title 這個屬性來設定這個 ContentPage 頁面的名稱。
3. 由於這個頁面是 ContentPage ，因此，使用了 ContentPage.Padding 來指定在 iOS 平台下，需要往下縮 20dp，這樣，才不會把 iOS 最上方的狀態列給遮蔽掉；不過，因為使用的 OnPlatform 只有指定 iOS 平台，所以，在其他平台，例如：Android, Windows UWP，就不會有任何影響到。
4. 在這個 ContentPage 頁面，使用了 Grid 版面配置項目 (Layout Element)，針對兩個控制項的定位，其中 Label 將會用來顯示系統正在忙碌的訊息文字，而其文字會透過資料繫結的方式，來設定要顯示那些文字內容；另外，也使用了 ActivityIndicator 項目，會在螢幕上顯示動畫，表示系統正在忙碌中，在這裡也使用了 Margin 屬性，設定這個控制項需要往下偏移 150 dp。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage 
  xmlns="http://xamarin.com/schemas/2014/forms"
  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
  prism:ViewModelLocator.AutowireViewModel="True"
  x:Class="XFCreative.Views.MainPage"
  Title="進行系統初始化">

  <ContentPage.Padding>
    <OnPlatform x:TypeArguments="Thickness" iOS="0,20,0,0" />
  </ContentPage.Padding>

  <Grid>
    <Label 
      HorizontalOptions="Center" VerticalOptions="Center"
      Text="{Binding Title}" />
    <ActivityIndicator 
      HorizontalOptions="Center" VerticalOptions="Center"
      Margin="0,150,0,0"
      WidthRequest="100" HeightRequest="100"
      IsRunning="True" />
  </Grid>
</ContentPage>

MainPage ViewModel

1. 在核心PCL XFCreative 專案內，找到資料夾 ViewModels ，開啟 MainPageViewModel.cs
2. 使用底下程式碼替換掉剛剛開啟的檔案內容

MainPageViewModel.cs

1. 這是您第一次接觸到 Prism 的 ViewModel 的做法，在 MainPageViewModel 建構式內，有參數INavigationService navigationService 需要傳入，不過，Prism 將會使用建構式相依性注入的方式，幫忙把 INavigationService 實作執行個體 (Instance) 注入到建構式內。
2. 這個屬性的 Title 將會用於資料繫結方式，將這個物件文字，顯示在螢幕上。其中，SetProperty 將會檢查資料是否有異動，若有，則會發出通知相關事件訂閱者，告知這個屬性值有異動，這是符合 MVVM 的設計規範
3. 這裡有兩個方法，這是實作了 INavigationAware 介面
   • OnNavigatedFrom
     這個方法將會當要導航離開這個頁面的時候，會被呼叫。
   • OnNavigatedTo
     這個方法將會在導航進入到這個頁面的時候，會被呼叫；因此，在這裡定義了，當導航進到這個頁面 (也就是這個應用程式一開啟之後，就會自動導航到這個頁面)，會先呼叫 系統初始化() 非同步方法，取得遠端開放資料的創業空間的資料；當取得這些資料之後，就會立即導航到BusinessSpacePage 頁面。
     在 Prism 開發模式下，使用 await _navigationService.Navigate("/HomePage/BusinessSpacePage"); 方式來進行頁面切換；在這裡您看到了導航引述只用了 /HomePage/BusinessSpacePage，其中，第一個 / 的絕對位置標示表示，當導航到新頁面之後，需要清空導航堆疊，也就是，使用者無法再度退回到這個頁面； HomePage定義為一個 導航頁面，因為，需要指定接著要導航到哪個頁面。
4. 每個 ViewModel 都會繼承 BindableBase 這個類別，並且需要實作 INavigationAware 這個介面。

using Newtonsoft.Json;
using Prism.Commands;
using Prism.Mvvm;
using Prism.Navigation;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net.Http;
using System.Threading.Tasks;
using XFCreative.Models;
using XFCreative.Services;

namespace XFCreative.ViewModels
{
    public class MainPageViewModel : BindableBase, INavigationAware
    {
        private readonly INavigationService _navigationService;

        private string _title;
        public string Title
        {
            get { return _title; }
            set { SetProperty(ref _title, value); }
        }

        public MainPageViewModel(INavigationService navigationService)
        {
            // 取得頁面導航的實作
            _navigationService = navigationService;
        }

        public void OnNavigatedFrom(NavigationParameters parameters)
        {

        }

        public async void OnNavigatedTo(NavigationParameters parameters)
        {
            if (parameters.ContainsKey("title"))
                Title = (string)parameters["title"] + " ...";

            await 系統初始化();

            await _navigationService.Navigate("/HomePage/BusinessSpacePage");
        }

        public async Task 系統初始化()
        {
            await GlobalData.創業空間Repository.取得最新資料();
        }
    }
}

建立首頁之導航頁面

導航頁面 View

1. 在核心PCL XFCreative 專案內，使用滑鼠右鍵點選 Views 資料夾，接著，選擇 加入 > 新增項目
2. 在 加入新項目 - XFCreative 對話窗中，點選 Visual C# > Prism > Prism NavigationPage (Forms)
   
3. 在底下名稱欄位內，輸入 HomePage，接著，點選 新增 按鈕
4. 使用底下程式碼替換掉剛剛產生的檔案內容

HomePage.xaml

1. 在這裡的根項目 (Root Element) 使用的是 NavigationPage，這種類型的頁面，將會用於可以導航到其他頁面的功用；在這裡，首先將會顯示清單，當使用者點選讓一項目之後，就會導航到明細頁面。
2. 由於這個頁面僅作用於導航頁面之用，因此，這個頁面內並沒有任何相關的 XAML 宣告。

<?xml version="1.0" encoding="utf-8" ?>
<NavigationPage
  xmlns="http://xamarin.com/schemas/2014/forms"
  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
  prism:ViewModelLocator.AutowireViewModel="True"
  x:Class="XFCreative.Views.HomePage">
</NavigationPage>

導航頁面 ViewModel

1. 在核心PCL XFCreative 專案內，使用滑鼠右鍵點選 ViewModels 資料夾，接著，選擇 加入 > 類別
2. 在 加入新項目 - XFCreative 對話窗中，點選 Visual C# > 類別
3. 在底下名稱欄位內，輸入 HomePageViewModel，接著，點選 新增 按鈕
4. 使用底下程式碼替換掉剛剛產生的檔案內容

導航頁面 ViewModel

HomePageViewModel.cs

1. 由於這個頁面僅作用於導航頁面之用，因此，這個 ViewModel 內並不會作任何相關動作

using Prism.Mvvm;
using Prism.Navigation;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace XFCreative.ViewModels
{
    public class HomePageViewModel : BindableBase, INavigationAware
    {
        private readonly INavigationService _navigationService;

        private string _title;
        public string Title
        {
            get { return _title; }
            set { SetProperty(ref _title, value); }
        }

        public HomePageViewModel(INavigationService navigationService)
        {
            // 取得頁面導航的實作
            _navigationService = navigationService;
        }

        public void OnNavigatedFrom(NavigationParameters parameters)
        {

        }

        public async void OnNavigatedTo(NavigationParameters parameters)
        {
            if (parameters.ContainsKey("title"))
                Title = (string)parameters["title"] + " ...";

            await 系統初始化();
        }

        public async Task 系統初始化()
        {
        }

    }
}

建立顯示創意空間清單的檢視(View)與檢視模型

最後，您需要建立可以顯示創業空間的清單資料的頁面，讓使用者可以看到有哪些資料從網路下載下來。

建立清單項目的 ViewModel

1. 在核心PCL XFCreative 專案內，使用滑鼠右鍵點選 ViewModels 資料夾，接著，選擇 加入 > 類別
2. 在 加入新項目 - XFCreative 對話窗中，點選 Visual C# > 類別
3. 在底下名稱欄位內，輸入 創業空間NodeViewModel，接著，點選 新增 按鈕
4. 使用底下程式碼替換掉剛剛產生的檔案內容

創業空間NodeViewModel.cs

1. 在這個 創業空間NodeViewModel 類別中，因為這是一個檢視模型(ViewModel)，用來表示清單內的每個項目要出現的內容，因此，需要繼承 BindableBase 類別，進行資料繫結(Data Binding)之用。

using Prism.Mvvm;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using XFCreative.Services;

namespace XFCreative.ViewModels
{
    public class 創業空間NodeViewModel : BindableBase
    {
        #region 縣市區域
        private string _縣市區域;
        public string 縣市區域
        {
            get { return _縣市區域; }
            set { SetProperty(ref _縣市區域, value); }
        }
        #endregion

        #region 創業空間名稱
        private string _創業空間名稱;
        public string 創業空間名稱
        {
            get { return _創業空間名稱; }
            set { SetProperty(ref _創業空間名稱, value); }
        }
        #endregion

        #region 空間主照片
        private string _空間主照片;

        public string 空間主照片
        {
            get { return _空間主照片; }
            set { SetProperty(ref _空間主照片, value); }
        }
        #endregion

        #region 使用坪數
        private string _使用坪數;

        public string 使用坪數
        {
            get { return _使用坪數; }
            set { SetProperty(ref _使用坪數, value); }
        }
        #endregion

        #region 地址
        private string _地址;

        public string 地址
        {
            get { return _地址; }
            set { SetProperty(ref _地址, value); }
        }

        #endregion

        public 創業空間NodeViewModel()
        {
        }
    }
}

顯示創意空間清單 View

1. 在核心PCL XFCreative 專案內，使用滑鼠右鍵點選 Views 資料夾，接著，選擇 加入 > 新增項目
2. 在 加入新項目 - XFCreative 對話窗中，點選 Visual C# > Prism > Prism ContentPage (Forms)
3. 在底下名稱欄位內，輸入 BusinessSpacePage，接著，點選 新增 按鈕
4. 使用底下程式碼替換掉剛剛產生的檔案內容

BusinessSpacePage.xaml

1. 在這裡的根項目 (Root Element) 使用的是 ContentPage，並且有設定這個頁面的標題 (Title屬性)，這個名稱將會出現在導航頁面的工具列上。
2. 這個 ContentPage.Content 裡面，僅有一個 Grid 版面配置項目，整個頁面的內容，其實就是透過了ListView 控制項目來顯示出整個清單資料。
3. 透過了資料繫結，ListView 控制項的資料來源，將會定義在檢視模型 (ViewModel) 內的 創業空間Nodes 內。
   在 XAML 內，使用的是這個語法來宣告 ItemsSource="{Binding 創業空間Nodes, Mode=TwoWay}"
   這表示了 ListView.ItemSource 這個屬性值與 ViewModel 內的屬性 創業空間Nodes 具有雙向綁定的關係。
4. 在 ListView.SelectedItem屬性，也與 ViewModel 內的屬性 創業空間Selected ，宣告具有雙向綁定繫結特性，也就是說，只要使用者點選 ListView 的任何項目，在 ViewModel 內，就可以透過這個屬性 創業空間Selected 取得使用者當時點選的物件。
5. 在 ListView 內的每個項目要顯示出甚麼樣貌，這些都會定義在 <ListView.ItemTemplate> 項目(Element)內。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
  xmlns="http://xamarin.com/schemas/2014/forms"
  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
  xmlns:behaviors="clr-namespace:Behaviors;assembly=Behaviors"
  prism:ViewModelLocator.AutowireViewModel="True"
  x:Class="XFCreative.Views.BusinessSpacePage"
  Title="創業空間清單"
  >
  <Grid
    >
    <ListView
      x:Name="listview創業空間"
      ItemsSource="{Binding 創業空間Nodes, Mode=TwoWay}"
      SelectedItem="{Binding 創業空間Selected, Mode=TwoWay}"
      CachingStrategy="RecycleElement"
      RowHeight="100"
      >
      <ListView.ItemTemplate>
        <DataTemplate>
          <ViewCell>
            <ViewCell.View>
              <Grid
                VerticalOptions="Center"
                  >
                <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="100" />
                  <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                  <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Label
                  Text ="{Binding 縣市區域}"
                  Margin="0,0,0,0"
                  FontSize="36"
                  HorizontalOptions="Start" VerticalOptions="Start"
                  HorizontalTextAlignment="Center"
                  LineBreakMode="WordWrap"
                    />

                <StackLayout
                  Grid.Row="0" Grid.Column="1"
                  Orientation="Vertical"
                  HorizontalOptions="Fill"
                  VerticalOptions="Fill"
                  >
                  <Label
                    Text ="{Binding 創業空間名稱}"
                    Margin="0,0,10,0"
                    FontSize="22"
                    HorizontalOptions="Start" VerticalOptions="Start"
                    LineBreakMode="MiddleTruncation"
                    />
                  <Label
                    Text ="{Binding 地址}"
                    Margin="0,0,10,0"
                    FontSize="14"
                    HorizontalOptions="Start" VerticalOptions="Start"
                    LineBreakMode="MiddleTruncation"
                    />
                  <Label
                    Text ="{Binding 使用坪數, StringFormat='坪數: {0}'}"
                    Margin="50,0,10,0"
                    FontSize="18"
                    HorizontalOptions="End" VerticalOptions="Start"
                    LineBreakMode="HeadTruncation"
                    />
                </StackLayout>

              </Grid>
            </ViewCell.View>
          </ViewCell>
        </DataTemplate>
      </ListView.ItemTemplate>
    </ListView>
  </Grid>

</ContentPage>

顯示創意空間清單 ViewModel

1. 在核心PCL XFCreative 專案內，使用滑鼠右鍵點選 ViewModels 資料夾，接著，選擇 加入 > 類別
2. 在 加入新項目 - XFCreative 對話窗中，點選 Visual C# > 類別
3. 在底下名稱欄位內，輸入 BusinessSpacePageViewModel，接著，點選 新增 按鈕
4. 使用底下程式碼替換掉剛剛產生的檔案內容

導航頁面 ViewModel

HomePageViewModel.cs

1. 在這個 ViewModel 內的 OnNavigatedTo 實作方法中，會呼叫 系統初始化(); 方法，進行 ListView的顯示資料初始化。
2. 在 系統初始化 方法內，將會藉由 GlobalData.創業空間Repository 取得剛剛透過網路讀到的開放資料物件清單，並且產生可用於資料繫結 (Data Binding) 的檢視模型(ViewModel) 創業空間NodeViewModel，將實際資料設定到這個檢視模型內，這樣，ListView 控制項目就可以顯示出所有的資料了。

using Newtonsoft.Json;
using Prism.Commands;
using Prism.Events;
using Prism.Mvvm;
using Prism.Navigation;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Net.Http;
using System.Threading.Tasks;
using XFCreative.Models;
using XFCreative.Services;
using System.Linq;
using Plugin.Share;
using Plugin.ExternalMaps;

namespace XFCreative.ViewModels
{
    public class BusinessSpacePageViewModel : BindableBase, INavigationAware
    {
        private readonly INavigationService _navigationService;

        #region 創業空間NodeViewModel 清單
        private ObservableCollection<創業空間NodeViewModel> _創業空間Nodes = new ObservableCollection<創業空間NodeViewModel>();
        public ObservableCollection<創業空間NodeViewModel> 創業空間Nodes
        {
            get { return this._創業空間Nodes; }
            set { this.SetProperty(ref this._創業空間Nodes, value); }
        }
        #endregion

        #region 創業空間Selected
        public 創業空間NodeViewModel 創業空間Selected { get; set; }
        #endregion

        private string _title;
        public string Title
        {
            get { return _title; }
            set { SetProperty(ref _title, value); }
        }

        public BusinessSpacePageViewModel(INavigationService navigationService)
        {
            // 取得頁面導航的實作
            _navigationService = navigationService;

        }

        public void OnNavigatedFrom(NavigationParameters parameters)
        {

        }

        public void OnNavigatedTo(NavigationParameters parameters)
        {
            if (parameters.ContainsKey("title"))
                Title = (string)parameters["title"] + " ...";

            系統初始化();
        }

        public void 系統初始化()
        {
            創業空間Nodes.Clear();
            var foo創業空間s = GlobalData.創業空間Repository.Items;

            foreach (var item in foo創業空間s)
            {
                var fooItem = new 創業空間NodeViewModel()
                {
                    縣市區域 = item.縣市區域,
                    使用坪數 = item.使用坪數,
                    創業空間名稱 = item.創業空間名稱,
                    地址 = item.地址,
                    空間主照片 = item.空間主照片.Replace("https", "http")
                };

                創業空間Nodes.Add(fooItem);
            }
        }
    }
}

註冊此次新加入的 View

1. 在核心PCL XFCreative 專案內，開啟 App.xaml.cs 檔案
2. 使用底下程式碼替換掉剛剛開啟的檔案內容

App.xaml.cs

1. 若您沒有進行底下程式碼的修正，若開始執行該專案，就會產生錯誤訊息：System.InvalidOperationException: HomePage could not be created. Please make sure you have registered HomePage for navigation.
2. 在 App 類別的 RegisterTypes 方法中，您需要把 HomePage 與 BusinessSpacePage 這兩個檢視 (View) 註冊到 Unity 的容器內，這樣，當要導航到這些頁面的時候，Unity 容器將會自動解析出所要導航的頁面物件，並且自動進行相對應的檢視模型(ViewModel)的繫結與綁定動作。
3. 另外，在建構式內，當要切換到頁面 MainPage 的命令中，將透過 title 參數，把要顯示的訊息傳遞到這個頁面內，這樣，系統就會顯示出這段文字。

using Prism.Unity;
using XFCreative.Views;

namespace XFCreative
{
    public partial class App : PrismApplication
    {
        protected override void OnInitialized()
        {
            InitializeComponent();

            NavigationService.Navigate("MainPage?title=請稍後，正在更新資料");
        }

        protected override void RegisterTypes()
        {
            Container.RegisterTypeForNavigation<MainPage>();
            Container.RegisterTypeForNavigation<HomePage>();
            Container.RegisterTypeForNavigation<BusinessSpacePage>();
        }
    }
}

執行結果

Android 執行結果

請在方案總管內，滑鼠右擊 XFCreative.Droid 專案，選擇 設定為起始專案，接著按下 F5 開始執行。

 

Xamarin.Forms 開放資料跨平台應用程式開發 建立專案

在這裡，您已經準備好要顯示資料的後端來源(這裡使用的是政府開放資料)，接下來就是需要開始建立專案與進行相關設定。

在這個階段的練習，您將會學會底下的 Xamarin.Forms 的開發技術：

1. 使用 Visual Studio 2015 增加 Prism 專案樣版
2. 建立 Prism for Xamarin.Forms 的專案
3. 升級與安裝必要的套件(NuGet Package)或者插件(Plug-ins)
4. 建立專案資料夾

這篇章節的練習專案的原始程式碼將會存放在 GitHubhttps://github.com/vulcanlee/XFAppSample/tree/master/XFCreative/1.BuildProject 內，在這個目錄下，會有兩個目錄：

• Starter
  這個目錄將會存放當您要進行練習開發這個專案之前，Visual Studio 專案的原始檔案。
• Completed
  這個目錄將會存放當您要進行練習開發這個專案完成之後，Visual Studio 專案的原始檔案。

使用 Visual Studio 2015 增加 Prism 專案樣版

安裝 Prism Template Pack

1. 首先，開啟 Visual Studio 2015
2. 點選功能表 工具 > 擴充功能與更新 選項
3. 在 擴充功能與更新 對話窗內，點選 線上 > Visual Studio 組件庫
4. 在右上方文字輸入盒內，輸入 Prism Template Pack ，並且按下 Enter 按鍵
5. 點選搜尋出來的 Prism Template Pack 項目，點選 下載 按鈕，安裝 Prism Template Pack 組件到您的Visual Studio 2015 內；安裝完成後，您需要點選 立即重新啟動 按鈕，讓您的 Visual Studio 2915 重新啟動之後，這次的安裝才會生效。
   
   

建立 Prism for Xamarin.Forms 的專案

1. 當 Visual Studio 重新啟動之後，點選功能表 檔案 > 新增 > 專案
2. 在 新增專案 對話窗內，點選 範本 > Visual C# > Prism > Prism Unity App (Forms)，並且在底下名稱欄位中，輸入 XFCreative 最後，點選 確定 按鈕。
   
3. 當專案建立到一半，若您的開發環境還沒有建置與設定完成 Mac 電腦與 Xamarin Studio for Mac 系統，此時會看到 Xamarin Mac Agent Instructions 對話窗出現，這個對話窗是要提醒您進行與 Mac 電腦連線設定，這是因為，您無法在 Windows 作業系統進行 iOS 相關應用程式的建立與設計工作，而是需要透過 Mac 電腦安裝的 XCode 來協助您完成這些 iOS 應用程式的建立工作。不過，這不影響您繼續開發 Xamarin.Forms 的應用程式，只不過此時，您無法編譯與執行 iOS 的應用程式。
4. 接著會看到 新的通用Windows專案 對話視窗，此時，您只需要按下 確定 按鈕即可，此時，專案精靈會繼續完成相關平台的專案建立工作。
5. 最後，整個新的 Xamarin.Forms 專案就建立完成了。

升級與安裝必要的套件(NuGet Package)或者插件(Plug-ins)

在這個專案內，將會使用到許多不同的 NuGet 套件 (Package)，因此，您需要先在這裡把這些套件安裝到所有的專案內，方便日後開發作業可以更加順利。

1. 滑鼠右擊方案 XFCreative ，選擇 管理方案的 NuGet 套件，在 NuGet - 解決方案 頁面中，切換到 瀏覽 標籤頁次內，請在文字輸入盒中輸入，Behaviors.Forms 並且開始搜尋這個套件，並且安裝到所有的專案內。
   使用這個套件，可以讓您在宣告 XAML 定義的時候，使用 XAML 提供的行為特性功能，例如，可以綁定當某個事件發生的時候，將會執行某個指定的 ICommand。這項功能對於有在開發 WPF 或者 Windows UWP 的開發者而言，必定不陌生，因為，在這些環境之下，可以使用 Blend SDK 所提供的各種不同行為(Behaviors)功能，來擴增或者豐富您的 XAML 宣告。
   
   若在安裝完成這個套件之後，出現了底下訊息
   Xamarin.Forms 2.2.0.4-pre1 的套件無法解除安裝，請重新啟動 Visual Studio 已完成此程序
   此時，請點選 Restart 按鈕，以重新啟動 Visual Studio 2015
   
2. 滑鼠右擊方案 XFCreative ，選擇 管理方案的 NuGet 套件，在 NuGet - 解決方案 頁面中，切換到 瀏覽 標籤頁次內，請在文字輸入盒中輸入，Newtonsoft.Json 並且開始搜尋這個套件，並且安裝到所有的專案內。
   'Newtonsoft.Json' 這個套件，可以讓您進行 JSON 物件的 序列化 (Serialization) 或者 反序列化 (Deserialization)) 的操作；這項功能將會提供當從網路取得開發資料的 JSON 定義資料之後，接著，便可以將這些 JSON 定義文字轉換成為 .NET 的物件。
   
3. 滑鼠右擊方案 XFCreative ，選擇 管理方案的 NuGet 套件，在 NuGet - 解決方案 頁面中，切換到 瀏覽 標籤頁次內，請在文字輸入盒中輸入，Plugin.Share 並且開始搜尋這個套件，並且安裝到所有的專案內。
   您可以在核心 PCL 專案內，使用這個套件，可以讓您進行文字、連結的分享作業，或者指定一個URL，並且使用瀏覽器開啟這個URL。這些功能將會自動針對當時執行行動裝置的作業系統，執行相對應的工作。
   
4. 滑鼠右擊方案 XFCreative ，選擇 管理方案的 NuGet 套件，在 NuGet - 解決方案 頁面中，切換到 瀏覽 標籤頁次內，請在文字輸入盒中輸入，sqlite-net-pcl 並且開始搜尋這個套件，並且安裝到所有的專案內。
   當您在進行安裝這個套件之前，請確認您搜尋到的這個 NuGet 套件是由 Frank A. Krueger 這名作者所提供的套件，並且也要確認安裝套件的名稱與大小寫是否一致。透過這個套件，可以任您在核心PCL專案內，進行 SQLite 資料庫的存取動作。器開啟這個URL。這些功能將會自動針對當時執行行動裝置的作業系統，執行相對應的工作。
   
5. 滑鼠右擊方案 XFCreative ，選擇 管理方案的 NuGet 套件，在 NuGet - 解決方案 頁面中，切換到 瀏覽 標籤頁次內，請在文字輸入盒中輸入，Xam.Plugin.ExternalMaps 並且開始搜尋這個套件，並且安裝到所有的專案內。
   這個套件將會開啟外部地圖應用程式，並且導航到您指定的座標點。
   
6. 滑鼠右擊方案 XFCreative ，選擇 管理方案的 NuGet 套件，在 NuGet - 解決方案 頁面中，切換到 瀏覽 標籤頁次內，請在文字輸入盒中輸入，Xam.Plugins.Messaging 並且開始搜尋這個套件，並且安裝到所有的專案內。
   這個套件將會進行撥打電話、傳送簡訊(SMS)或者使用預設訊息應用程式傳送電子郵件。
   
7. 滑鼠右擊方案 XFCreative ，選擇 管理方案的 NuGet 套件，在 NuGet - 解決方案 頁面中，切換到 已安裝 標籤頁次內，請在文字輸入盒中輸入，Xamarin.Forms 並且開始搜尋這個套件，並且準備將所有專案內有用到這個套件，全部都升級到最新版本。
   從右半部可以觀察到，在不同的專案內，這個套件使用到不同的版本；一旦升級到最新的版本，最新 Xamarin.Forms 所提供的 XAML 宣告標記語言與相關新功能，就可以在這次專案中用到。
   若在安裝完成這個套件之後，出現了底下訊息
   Xamarin.Forms 2.2.0.31 的套件無法解除安裝，請重新啟動 Visual Studio 已完成此程序
   此時，請點選 Restart 按鈕，以重新啟動 Visual Studio 2015
   

建立專案資料夾

1. 滑鼠右擊 XFCreative.Droid 專案節點，選擇 加入 > 新增資料夾，在新產生的資料夾內，填入資料夾名稱 Services
2. 滑鼠右擊 XFCreative.iOS 專案節點，選擇 加入 > 新增資料夾，在新產生的資料夾內，填入資料夾名稱 Services
3. 滑鼠右擊 XFCreative.UWP 專案節點，選擇 加入 > 新增資料夾，在新產生的資料夾內，填入資料夾名稱 Services
4. 滑鼠右擊 XFCreative 核心PCL 專案節點，選擇 加入 > 新增資料夾，在新產生的資料夾內，填入資料夾名稱 Converters
5. 滑鼠右擊 XFCreative 核心PCL 專案節點，選擇 加入 > 新增資料夾，在新產生的資料夾內，填入資料夾名稱 Models
6. 滑鼠右擊 XFCreative 核心PCL 專案節點，選擇 加入 > 新增資料夾，在新產生的資料夾內，填入資料夾名稱 Repositories
7. 滑鼠右擊 XFCreative 核心PCL 專案節點，選擇 加入 > 新增資料夾，在新產生的資料夾內，填入資料夾名稱 Services

第一次啟動專案測試

1. 滑鼠右擊 XFCreative.Droid 專案節點，選擇 設定為起始專案
2. 按下 F5 按鍵，該使執行這個 Android 專案，看看是否可以正常執行。
3. 若可以正常編譯，但是執行的時候出現了錯誤訊息：java.lang.OutOfMemoryError
   • 此時請滑鼠雙擊 XFCreative.Droid 專案 Properties 節點
   • 在 XFCreative.Droid 頁面，點選 Android Options > Advanced
   • 在 Java Max Heap Size 欄位內輸入 1G
   • 重新執行一次