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

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

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

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

建立資料模型 (Model)

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

創業空間資料.cs

這個資料模型類別的欄位定義來源，是由創意空間的開放資料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")] 做了修正。
底下創意空間內的某個節點的資料：

{"創業空間名稱":"南投縣竹山鎮柯子坑社區","所屬單位":"政府單位-財政部國有財產署","創業空間類型":"公有活化空間","招募團隊類型":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"}

這個 創業空間資料 類別所扮演的腳色，會將讀取到的遠端開放資料，將取得的文字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; }
    }
}

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

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

創業空間Repository.cs

在這個 創業空間Repository 類別內，定義了 取得最新資料 非同步方法
這個 取得最新資料 方法透過 HttpClient 物件，讀取遠端創業空間的開放資料。
接著透過 JsonConvert.DeserializeObject 泛型方法，針對剛剛取得的JSON文字內容，進行 JSON 反序列化
在最後面有個迴圈，會把空間主照片 / 詳細照片欄位，把 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");
            }
        }
    }
}

建立全域靜態類別

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

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

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

MainPage.xaml

在這個 XAML 檔案內，首先看到的是

prism:ViewModelLocator.AutowireViewModel="True"

上面的 XAML 宣告表示在這個 View 內，需要透過 Prism 自動進行 ViewModel 繫結，也就是說，當這個 View 建立的同時，相對應的 ViewModel 也會被產生，接著會被設定到該 View(在這個範例就是 ContentPage ) 的 BindingContext。
在根項目 (Root Element)內，有使用 Title 這個屬性來設定這個 ContentPage 頁面的名稱。
由於這個頁面是 ContentPage ，因此，使用了 ContentPage.Padding 來指定在 iOS 平台下，需要往下縮 20dp，這樣，才不會把 iOS 最上方的狀態列給遮蔽掉；不過，因為使用的 OnPlatform 只有指定 iOS 平台，所以，在其他平台，例如：Android, Windows UWP，就不會有任何影響到。
在這個 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

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

MainPageViewModel.cs

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

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

HomePage.xaml

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

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

導航頁面 ViewModel

HomePageViewModel.cs

由於這個頁面僅作用於導航頁面之用，因此，這個 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

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

創業空間NodeViewModel.cs

在這個 創業空間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

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

BusinessSpacePage.xaml

在這裡的根項目 (Root Element) 使用的是 ContentPage，並且有設定這個頁面的標題 (Title屬性)，這個名稱將會出現在導航頁面的工具列上。
這個 ContentPage.Content 裡面，僅有一個 Grid 版面配置項目，整個頁面的內容，其實就是透過了ListView 控制項目來顯示出整個清單資料。
透過了資料繫結，ListView 控制項的資料來源，將會定義在檢視模型 (ViewModel) 內的 創業空間Nodes 內。

在 XAML 內，使用的是這個語法來宣告 ItemsSource="{Binding 創業空間Nodes, Mode=TwoWay}"

這表示了 ListView.ItemSource 這個屬性值與 ViewModel 內的屬性 創業空間Nodes 具有雙向綁定的關係。
在 ListView.SelectedItem屬性，也與 ViewModel 內的屬性 創業空間Selected ，宣告具有雙向綁定繫結特性，也就是說，只要使用者點選 ListView 的任何項目，在 ViewModel 內，就可以透過這個屬性 創業空間Selected 取得使用者當時點選的物件。
在 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

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

導航頁面 ViewModel

HomePageViewModel.cs

在這個 ViewModel 內的 OnNavigatedTo 實作方法中，會呼叫 系統初始化(); 方法，進行 ListView的顯示資料初始化。
在 系統初始化 方法內，將會藉由 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

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

App.xaml.cs

若您沒有進行底下程式碼的修正，若開始執行該專案，就會產生錯誤訊息：System.InvalidOperationException: HomePage could not be created. Please make sure you have registered HomePage for navigation.
在 App 類別的 RegisterTypes 方法中，您需要把 HomePage 與 BusinessSpacePage 這兩個檢視 (View) 註冊到 Unity 的容器內，這樣，當要導航到這些頁面的時候，Unity 容器將會自動解析出所要導航的頁面物件，並且自動進行相對應的檢視模型(ViewModel)的繫結與綁定動作。
另外，在建構式內，當要切換到頁面 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 Research

XAML in Xamarin.Forms 基礎篇電子書

Xamarin.Forms 快速入門電子書

2016/10/23

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

建立資料模型 (Model)

創業空間資料.cs

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

創業空間Repository.cs

建立全域靜態類別

GlobalData.cs

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

MainPage View

MainPage.xaml

MainPage ViewModel

MainPageViewModel.cs

建立首頁之導航頁面

導航頁面 View

HomePage.xaml

導航頁面 ViewModel

導航頁面 ViewModel

HomePageViewModel.cs

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

建立清單項目的 ViewModel

創業空間NodeViewModel.cs

顯示創意空間清單 View

BusinessSpacePage.xaml

顯示創意空間清單 ViewModel

導航頁面 ViewModel

HomePageViewModel.cs

註冊此次新加入的 View

App.xaml.cs

執行結果

Android 執行結果

沒有留言:

張貼留言

XAML in Xamarin.Forms 基礎篇 電子書

Xamarin.Forms 快速入門 電子書

2016/10/23

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

建立資料模型 (Model)

創業空間資料.cs

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

創業空間Repository.cs

建立全域靜態類別

GlobalData.cs

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

MainPage View

MainPage.xaml

MainPage ViewModel

MainPageViewModel.cs

建立首頁之導航頁面

導航頁面 View

HomePage.xaml

導航頁面 ViewModel

導航頁面 ViewModel

HomePageViewModel.cs

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

建立清單項目的 ViewModel

創業空間NodeViewModel.cs

顯示創意空間清單 View

BusinessSpacePage.xaml

顯示創意空間清單 ViewModel

導航頁面 ViewModel

HomePageViewModel.cs

註冊此次新加入的 View

App.xaml.cs

執行結果

Android 執行結果

沒有留言:

張貼留言

XAML in Xamarin.Forms 基礎篇電子書

Xamarin.Forms 快速入門電子書

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