XAML in Xamarin.Forms 基礎篇 電子書

XAML in Xamarin.Forms 基礎篇 電子書
XAML in Xamarin.Forms 基礎篇 電子書

Xamarin.Forms 快速入門 電子書

Xamarin.Forms 快速入門 電子書
Xamarin.Forms 快速入門 電子書

2016/11/03

Xamarin.Forms SQLite資料庫使用

在這個範例專案中,將會說明如何在核心PCL專案內,使用 SQLite 資料庫來操作資料表的 CRUD功能。您需要在原生專案與核心PCL專案中安裝這個 SQLite.Net PCL NuGet 套件,並且要在原生專案中提供 SQLiteConnection 的實作。

建立SQLite資料庫使用方案

  1. 首先,開啟您的 Visual Studio 2015
  2. 接著透過 Visual Studio 2015 功能表,選擇這些項目 檔案 > 新增 > 專案 準備新增一個專案。
  3. 接著,Visual Studio 2015 會顯示 新增專案 對話窗,請在這個對話窗上,進行選擇 Visual C# > Cross-Platform > Blank Xaml App (Xamarin.Forms Portable)
  4. 接著,在最下方的 名稱 文字輸入盒處,輸入 XFSQLite 這個名稱,最後使用滑鼠右擊右下方的 確定按鈕。
  5. 當專案建立到一半,若您的開發環境還沒有建置與設定完成 Mac 電腦與 Xamarin Studio for Mac 系統,此時會看到 Xamarin Mac Agent Instructions 對話窗出現,這個對話窗是要提醒您進行與 Mac 電腦連線設定,這是因為,您無法在 Windows 作業系統進行 iOS 相關應用程式的建立與設計工作,而是需要透過 Mac 電腦安裝的 XCode 來協助您完成這些 iOS 應用程式的建立工作。不過,這不影響您繼續開發 Xamarin.Forms 的應用程式,只不過此時,您無法編譯與執行 iOS 的應用程式。
  6. 接著會看到 新的通用Windows專案 對話視窗,此時,您只需要按下 確定 按鈕即可,此時,專案精靈會繼續完成相關平台的專案建立工作。
  7. 最後,整個新的 Xamarin.Forms 專案就建立完成了。

安裝所需 NuGet 套件

  1. 請在 XFSQLite 核心PCL專案的 參考 節點上,滑鼠右擊,接著點選 管理 NuGet 套件 選項,接著點選 瀏覽 標籤頁次,在搜尋文字輸入盒中,輸入 SQLite.Net PCL 這個套件,當找到這個套件之後,請將這個套件安裝到這個專案裡面。
  2. 請在 XFSQLite.Droid 專案的 參考 節點上,滑鼠右擊,接著點選 管理 NuGet 套件 選項,接著點選 瀏覽 標籤頁次,在搜尋文字輸入盒中,輸入 SQLite.Net PCL 這個套件,當找到這個套件之後,請將這個套件安裝到這個專案裡面。
  3. 請在 XFSQLite.iOS 專案的 參考 節點上,滑鼠右擊,接著點選 管理 NuGet 套件 選項,接著點選 瀏覽 標籤頁次,在搜尋文字輸入盒中,輸入 SQLite.Net PCL 這個套件,當找到這個套件之後,請將這個套件安裝到這個專案裡面。
  4. 請在 XFSQLite.UWP 專案的 參考 節點上,滑鼠右擊,接著點選 管理 NuGet 套件 選項,接著點選 瀏覽 標籤頁次,在搜尋文字輸入盒中,輸入 SQLite.Net PCL 這個套件,當找到這個套件之後,請將這個套件安裝到這個專案裡面。
請特別注意,當您在安裝 sqlite-net-pcl NuGet 套件的時候,將會發現到很多類似的名稱的套件,請您要選取底下的套件
Created by: Frank A. Krueger
Id: sqlite-net-pcl
NuGet link: sqlite-net-pcl
sqlite-net-pcl

核心PCL專案

建立 SQLite 使用的介面

  1. 滑鼠右擊 XFSQLite 核心PCL專案節點,選擇 加入 > 新增項目 > Visual C# > 介面
  2. 在底下名稱欄位,輸入 ISQLite 並且點選 新增 按鈕
  3. 使用底下程式碼替換掉剛剛產生的檔案

ISQLite.cs

using SQLite;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace XFSQLite
{
    public interface ISQLite
    {
        SQLiteConnection GetConnection();
    }
}

建立資料表的模型

  1. 滑鼠右擊 XFSQLite 核心PCL專案節點,選擇 加入 > 類別 > Visual C# > 類別
  2. 在底下名稱欄位,輸入 MyRecord 並且點選 新增 按鈕
  3. 使用底下程式碼替換掉剛剛產生的檔案

MyRecord.cs

using SQLite;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace XFSQLite
{
    public class MyRecord
    {
        public MyRecord()
        {
        }

        [PrimaryKey, AutoIncrement]
        public int ID { get; set; }
        public string UserName { get; set; }
        public string SelectItem { get; set; }
        public bool Done { get; set; }
    }
}

建立資料庫類別

  1. 滑鼠右擊 XFSQLite 核心PCL專案節點,選擇 加入 > 類別 > Visual C# > 類別
  2. 在底下名稱欄位,輸入 DoggyDatabase 並且點選 新增 按鈕
  3. 使用底下程式碼替換掉剛剛產生的檔案

DoggyDatabase.cs

using SQLite;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace XFSQLite
{
    public class DoggyDatabase
    {
        static object locker = new object();

        public string DBPath { get; set; }

        SQLiteConnection database;

        public DoggyDatabase()
        {
            database = DependencyService.Get<ISQLite>().GetConnection();
            DBPath = database.DatabasePath;
            // create the tables
            database.CreateTable<MyRecord>();
        }

        public IEnumerable<MyRecord> GetItems()
        {
            lock (locker)
            {
                return (from i in database.Table<MyRecord>() select i).ToList();
            }
        }

        public IEnumerable<MyRecord> GetItemsNotDone()
        {
            lock (locker)
            {
                return database.Query<MyRecord>("SELECT * FROM [MyRecord] WHERE [Done] = 0");
            }
        }

        public MyRecord GetItem(int id)
        {
            lock (locker)
            {
                return database.Table<MyRecord>().FirstOrDefault(x => x.ID == id);
            }
        }

        public int SaveItem(MyRecord item)
        {
            lock (locker)
            {
                if (item.ID != 0)
                {
                    database.Update(item);
                    return item.ID;
                }
                else
                {
                    return database.Insert(item);
                }
            }
        }

        public int DeleteItem(int id)
        {
            lock (locker)
            {
                return database.Delete<MyRecord>(id);
            }
        }

        public void DeleteAll()
        {
            var fooItems = GetItems().ToList();
            foreach (var item in fooItems)
            {
                DeleteItem(item.ID);
            }
        }
    }
}

修正首頁頁面

  1. 在 XFSQLite 核心PCL專案內,打開 `MainPage.xaml
  2. 使用底下XAML宣告標記換掉這個檔案內容

MainPage.xaml

<?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:local="clr-namespace:XFSQLite"
             x:Class="XFSQLite.MainPage">

  <StackLayout
    Orientation="Vertical"
    VerticalOptions="Center" HorizontalOptions="Center"
    >
    <Label
      x:Name="labelMessage"
      Text="歡迎來到 SQLite 的世界"
      VerticalOptions="Center"
      HorizontalOptions="Center" />

    <Label
      x:Name="labelMessagePath"
      Text=""
      VerticalOptions="Center"
      HorizontalOptions="Center"
      LineBreakMode="WordWrap"/>

    <Label
     x:Name="labelMessageWrite"
     Text=""
     VerticalOptions="Center"
     HorizontalOptions="Center" />

    <Button
      x:Name="button寫入資料庫"
      Text="寫入資料庫" />

    <Label
     x:Name="labelMessageRead"
     Text=""
     VerticalOptions="Center"
     HorizontalOptions="Center" />

    <Button
      x:Name="button從資料庫讀出"
      Text="從資料庫讀出" />
  </StackLayout>

</ContentPage>
  1. 在 XFSQLite 核心PCL專案內,打開 `MainPage.xaml.cs
  2. 使用底下程式碼替換掉剛剛產生的檔案

MainPage.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace XFSQLite
{
    public partial class MainPage : ContentPage
    {
        DoggyDatabase fooDoggyDatabase;
        public MainPage()
        {
            InitializeComponent();

            fooDoggyDatabase = new DoggyDatabase();

            labelMessagePath.Text = $"路徑: {fooDoggyDatabase.DBPath}";

            button寫入資料庫.Clicked += (s, e) =>
            {
                fooDoggyDatabase.DeleteAll();
                fooDoggyDatabase.SaveItem(new MyRecord
                {
                    UserName = "Vulcan Lee",
                    SelectItem = "一顆蘋果",
                    Done = false,
                });
                labelMessageWrite.Text = $"資料已經寫入資料表內";
            };
            button從資料庫讀出.Clicked += (s, e) =>
            {
                var fooItem = fooDoggyDatabase.GetItems().FirstOrDefault();

                labelMessageRead.Text = $"從資料表內讀取: {fooItem.UserName} / {fooItem.SelectItem}";
            };
        }
    }
}

原生 Android 專案

建立 SQLite 使用的介面

  1. 滑鼠右擊 XFSQLite.Droid 核心PCL專案節點,選擇 加入 > 類別 > Visual C# > Class
  2. 在底下名稱欄位,輸入 SQLite_Android 並且點選 新增 按鈕
  3. 使用底下程式碼替換掉剛剛產生的檔案

SQLite_Android.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Xamarin.Forms;
using XFSQLite.Droid;
using System.IO;

[assembly: Dependency(typeof(SQLite_Android))]
namespace XFSQLite.Droid
{
    public class SQLite_Android : ISQLite
    {
        public SQLite_Android()
        {
        }

        #region ISQLite implementation
        public SQLite.SQLiteConnection GetConnection()
        {
            var sqliteFilename = "DoggyDB.db3";
            string documentsPath = System.Environment.GetFolderPath(System.Environment.SpecialFolder.Personal); // Documents folder
            var path = Path.Combine(documentsPath, sqliteFilename);

            var conn = new SQLite.SQLiteConnection(path);

            // Return the database connection 
            return conn;
        }
        #endregion
    }
}

原生 iOS 專案

建立 SQLite 使用的介面

  1. 滑鼠右擊 XFSQLite.iOS 核心PCL專案節點,選擇 加入 > 類別 > Apple > 類別
  2. 在底下名稱欄位,輸入 SQLite_iOS 並且點選 新增 按鈕
  3. 使用底下程式碼替換掉剛剛產生的檔案

SQLite_iOS.cs

using System;
using System.Collections.Generic;
using System.IO;
using System.Text;
using Xamarin.Forms;
using XFSQLite.iOS;

[assembly: Dependency(typeof(SQLite_iOS))]
namespace XFSQLite.iOS
{
    public class SQLite_iOS : ISQLite
    {
        public SQLite_iOS()
        {
        }

        #region ISQLite implementation
        public SQLite.SQLiteConnection GetConnection()
        {
            var sqliteFilename = "DoggyDB.db3";
            string documentsPath = Environment.GetFolderPath(Environment.SpecialFolder.Personal); // Documents folder
            string libraryPath = Path.Combine(documentsPath, "..", "Library"); // Library folder
            var path = Path.Combine(libraryPath, sqliteFilename);

            var conn = new SQLite.SQLiteConnection(path);

            // Return the database connection 
            return conn;
        }
        #endregion
    }
}

原生 UWP 專案

建立 SQLite 使用的介面

  1. 滑鼠右擊 XFSQLite.UWP 核心PCL專案節點,選擇 加入 > 類別 > Visual C# > 類別
  2. 在底下名稱欄位,輸入 SQLite_UWP 並且點選 新增 按鈕
  3. 使用底下程式碼替換掉剛剛產生的檔案

SQLite_UWP.cs

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Windows.Storage;
using Xamarin.Forms;
using XFSQLite.UWP;

[assembly: Dependency(typeof(SQLite_UWP))]
namespace XFSQLite.UWP
{
    public class SQLite_UWP : ISQLite
    {
        public SQLite_UWP()
        {
        }
        #region ISQLite implementation
        public SQLite.SQLiteConnection GetConnection()
        {
            var sqliteFilename = "DoggyDB.db3";
            string path = Path.Combine(ApplicationData.Current.LocalFolder.Path, sqliteFilename);

            var conn = new SQLite.SQLiteConnection(path);

            // Return the database connection 
            return conn;
        }
        #endregion
    }
}

實際執行畫面

Android 執行結果

請在方案總管內,滑鼠右擊 XFAuth.Droid 專案,選擇 設定為起始專案,接著按下 F5 開始執行。
Android執行結果1

iOS 執行結果

請在方案總管內,滑鼠右擊 XFAuth.iOS 專案,選擇 設定為起始專案,接著按下 F5 開始執行。
iOS執行結果1

UWP 執行結果

請在方案總管內,滑鼠右擊 XFAuth.iOS 專案,選擇 設定為起始專案,接著按下 F5 開始執行。
UWP執行結果1

在 Xamarin.Forms 中使用動畫效果

想要在 Xamarin.Forms 內,讓在 XAML 內控制項可以做出動畫效果,原則上,需要透過 Code Behind 的方式來做到動畫,除非你需要透過 Behavior 的方式把這些動畫特效,透過 XAML 宣告與資料繫結的方式來做出動畫效果。
若要依據執行動畫,可以使用底下方式來驅動。
            await button.TranslateTo(200, 0, 1000);
            await button.TranslateTo(0, 100, 1000);
            await button.ScaleTo(2.0, 1000);
            await button.RotateTo(360, 1000);
想要同時執行動畫,可以使用底下方式來驅動。
            await Task.WhenAll(
                button.TranslateTo(200, 0, 1000),
                button.TranslateTo(0, 100, 1000),
                button.ScaleTo(2.0, 1000),
                button.RotateTo(360, 1000));
專案原始碼

2016/11/02

如何在 Mac 電腦上安裝其他的 iOS Simulator

在 Mac 電腦上,開啟 Xcode 程式。

在功能表上,點選 [Xcode] > [Preferences] > [Components]

在 [Components] 對話窗中,選擇你需要額外安裝的 iOS Simulator