XAML in Xamarin.Forms 基礎篇 電子書

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

Xamarin.Forms 快速入門 電子書

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

2018/06/20

Xamarin.Essentials 體驗 4 : Clipboard 剪貼簿

根據 Xamarin.Essentials 官方文件中指出:Xamarin.Essentials 跨平台應用程式開發介面的開發人員提供他們的行動應用程式。透過 Xamarin.Essentials 的套件幫忙,可以將這些功能整合到您的應用程式:加速計 應用程式資訊 電池 剪貼簿 指南針 資料傳輸 裝置顯示資訊 裝置資訊 電子郵件 檔案系統的協助程式 手電筒 地理編碼 地理位置 迴轉儀 磁力計 開啟瀏覽器 電話撥號員 喜好設定 螢幕鎖定 安全儲存體 SMS 文字轉換語音 追蹤版本 震動。
我們現在來體驗關於 Clipboard 剪貼簿 這項功能,因此,可以參考底下的專案範例,該專案範例

建立測試專案

  • 首先,我們先使用 Prism Template Pack 擴充功能所提供的專案樣板,建立起一個 Xamarin.Forms 專案,在這裡我們僅選擇 Android / iOS / UWP 類型的專案;接著,我們需要把 PropertyChanged.Fody NuGet 套件安裝到 .NET Standard 專案類別庫內,並且安裝 FodyWeavers.xml 檔案。
  • 緊接著,我們要開始安裝 Xamarin.Essentials NuGet 套件到所有的專案內,在這裡,請使用滑鼠右擊方案節點,選擇 管理方案的 NuGet 套件 選項
  • 請在 NuGet - 解決方案 的視窗中,輸入要搜尋的套件名稱 : Xamarin.Essentials
    並且,請勾選 包括搶鮮版 的文字檢查盒,並且安裝這個套件;我寫這篇文章的時候, Xamarin.Essentials 的最新版本為 0.7.0.17 版本,因此,我們安裝這個版本。
    Xamarin Essentials NuGet Installation
  • 當 Xamarin.Essentials 套件安裝完成之後,您將會發現到在 Visual Studio 2017 的錯誤視窗中,出現了底下錯誤訊息
Warning
偵測到 Xamarin.Android.Support.Compat 的版本衝突。請直接從專案參考套件,以解決此問題。 
 XFESFileSystem.Android -> Xamarin.Essentials 0.7.0.17-preview -> Xamarin.Android.Support.CustomTabs 27.0.2 -> Xamarin.Android.Support.Compat (= 27.0.2) 
 XFESFileSystem.Android -> Xamarin.Android.Support.Design 25.4.0.2 -> Xamarin.Android.Support.Compat (= 25.4.0.2).
偵測到 Xamarin.Android.Support.Compat 的版本衝突
  • Information 這個時候您可以參考 Xamarin.Essentials 體驗 1 : File System Helpers 檔案系統存取 文章中的解決辦法
    完成之後,Android 專案下的 .csproj 檔案,請搜尋這個關鍵字 PackageReference Include="Xamarin.Essentials", 此時,您將會看到底下的內容,安裝了 Xamarin.Android.Support.CustomTabs NuGet 套件,並且都升級到 27.0.2.1 版本
    當然,最快的方式,就是使用 Visual Studio Code 工具,開啟 Android 專案下的 .csproj 檔案,值些修改成為底下內容,儲存後回到 Visual Studio 2017 下,緊接著重新載入這個 .csproj 檔案,就可以進行 Android 專案的編譯動作囉。
XML
    <PackageReference Include="Xamarin.Essentials" Version="0.7.0.17-preview"/>
    <PackageReference Include="Xamarin.Android.Support.CustomTabs" Version="27.0.2.1"/>
    <PackageReference Include="Xamarin.Android.Support.Design" Version="27.0.2.1" />
    <PackageReference Include="Xamarin.Android.Support.v7.AppCompat" Version="27.0.2.1" />
    <PackageReference Include="Xamarin.Android.Support.v4" Version="27.0.2.1" />
    <PackageReference Include="Xamarin.Android.Support.v7.CardView" Version="27.0.2.1" />
    <PackageReference Include="Xamarin.Android.Support.v7.MediaRouter" Version="27.0.2.1" />
  • 如此,最初產生的錯誤訊息便會消失了。
  • 我們需要安裝 Toasts.Forms.Plugin NuGet 套件到 Xamarin.Forms 專案 (也就是 .NET Standard 專案) 內,這是因為我們需要能夠使用 Toast 快顯通知這樣功能,顯示出一些訊息到螢幕上。
  • 一旦您安裝好 Toasts.Forms.Plugin NuGet 套件後,您需要在每個原生專案內進行該套件初始化的設定與相依性注入的設定,在這裡,我們將會使用 Prism 所提供的相依性注入容器服務,而不會使用 Xamarin.Forms 預設的相依性注入服務。只要經過了這樣處理程序之後,我們就可以在 Xamarin.Forms 的 ViewModel 中,隨時使用快顯通知 Toast 這樣好用的介面功能了。
  • 請打開 Android 專案的 MainActivity.cs 這個檔案
    我們要在 OnCreate 這個方法內,加入這個套件初始化的呼叫
    Plugin.Toasts.ToastNotification.Init(this);
    另外,我們也需要進行這個 抽象介面 Plugin.Toasts.IToastNotificator 與具體實作類別 Plugin.Toasts.ToastNotification 的註冊,請在這個檔案中找到 RegisterTypes 方法,在這個方法內填入 container.Register();
C#
using Android.App;
using Android.Content.PM;
using Android.OS;
using Prism;
using Prism.Ioc;

namespace XFESClipboard.Droid
{
    [Activity(Label = "XFESClipboard", Icon = "@mipmap/ic_launcher", Theme = "@style/MainTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
    public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
    {
        protected override void OnCreate(Bundle bundle)
        {
            TabLayoutResource = Resource.Layout.Tabbar;
            ToolbarResource = Resource.Layout.Toolbar;

            base.OnCreate(bundle);

            Plugin.Toasts.ToastNotification.Init(this);

            global::Xamarin.Forms.Forms.Init(this, bundle);
            LoadApplication(new App(new AndroidInitializer()));
        }
    }

    public class AndroidInitializer : IPlatformInitializer
    {
        public void RegisterTypes(IContainerRegistry container)
        {
            // Register any platform specific implementations
            container.Register<Plugin.Toasts.IToastNotificator, Plugin.Toasts.ToastNotification>();
        }
    }
}
  • 請打開 iOS 專案的 AppDelegate.cs 這個檔案
    我們要在 FinishedLaunching 這個方法內,加入這個套件初始化的呼叫
    Plugin.Toasts.ToastNotification.Init();
    另外,我們也需要進行這個 抽象介面 Plugin.Toasts.IToastNotificator 與具體實作類別 Plugin.Toasts.ToastNotification 的註冊,請在這個檔案中找到 RegisterTypes 方法,在這個方法內填入 container.Register();
C#
using Foundation;
using Prism;
using Prism.Ioc;
using UIKit;


namespace XFESClipboard.iOS
{
    // The UIApplicationDelegate for the application. This class is responsible for launching the 
    // User Interface of the application, as well as listening (and optionally responding) to 
    // application events from iOS.
    [Register("AppDelegate")]
    public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate
    {
        //
        // This method is invoked when the application has loaded and is ready to run. In this 
        // method you should instantiate the window, load the UI into it and then make the window
        // visible.
        //
        // You have 17 seconds to return from this method, or iOS will terminate your application.
        //
        public override bool FinishedLaunching(UIApplication app, NSDictionary options)
        {
            Plugin.Toasts.ToastNotification.Init();
            global::Xamarin.Forms.Forms.Init();
            LoadApplication(new App(new iOSInitializer()));

            return base.FinishedLaunching(app, options);
        }
    }

    public class iOSInitializer : IPlatformInitializer
    {
        public void RegisterTypes(IContainerRegistry container)
        {
            container.Register<Plugin.Toasts.IToastNotificator, Plugin.Toasts.ToastNotification>();
        }
    }
}
  • 請打開 UWP 專案的 MainPage.xaml.cs 這個檔案 (請特別注意,不是 Xamarin.Forms 專案內的 MainPage.xaml.cs 喔)
    我們要在 MainPage 建構式 這個方法內,加入這個套件初始化的呼叫
    Plugin.Toasts.UWP.ToastNotification.Init();
    另外,我們也需要進行這個 抽象介面 Plugin.Toasts.IToastNotificator 與具體實作類別 Plugin.Toasts.ToastNotification 的註冊,請在這個檔案中找到 RegisterTypes 方法,在這個方法內填入 container.Register();
C#
using Prism;
using Prism.Ioc;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

namespace XFESClipboard.UWP
{
    public sealed partial class MainPage
    {
        public MainPage()
        {
            this.InitializeComponent();

            Plugin.Toasts.UWP.ToastNotification.Init();

            LoadApplication(new XFESClipboard.App(new UwpInitializer()));
        }
    }

    public class UwpInitializer : IPlatformInitializer
    {
        public void RegisterTypes(IContainerRegistry container)
        {
            container.Register<Plugin.Toasts.IToastNotificator, Plugin.Toasts.UWP.ToastNotification>();
        }
    }
}
  • 我們將開始要進行 View ViewModel Model 的設計了,首先,我們開啟 MainPage.xaml 這個檔案,底下是我們測試的頁面 XAML 語法
    在這裡,我們將會增加一個文字輸入盒,讓使用者可以使用剪貼簿內的內容,貼到這個控制項內,另外,我們會在第一個 Label 控制項內加入手勢操作的 TapGestureRecognizer ,這使得使用點選這串文字之後,將會把這個顯示的文字內容,放入剪貼簿上。
    除了可以讓使用者使用手勢操作來執行剪貼簿的運算功能,也可以使用最後一個按鈕,當使用者按下這個按鈕後,便會由程式從剪貼簿上取回文字,放到文字輸入盒內。
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"
             x:Class="XFESClipboard.Views.MainPage"
             Title="Clipboard 剪貼簿">

    <StackLayout HorizontalOptions="Fill" VerticalOptions="CenterAndExpand">
        <Label Text="Welcome to Xamarin Forms and Prism!" >
            <Label.GestureRecognizers>
                <TapGestureRecognizer Command="{Binding LabelTapCommand}"
                                      CommandParameter="Welcome to Xamarin Forms and Prism!"/>
            </Label.GestureRecognizers>
        </Label>
        <Entry Text="{Binding MyEntry}"/>
        <Button Text="取出剪貼簿內文字" Command="{Binding RetriveClipboardCommand}"/>
    </StackLayout>

</ContentPage>
  • 請打開 MainPageViewModel.cs 這個檔案
    想要把文字放到剪貼簿上,我們僅需要呼叫這個方法
    Clipboard.SetText
    若要在程式內取回剪貼簿的內容,我們會使用 Clipboard.HasText 屬性檢查剪貼簿內是否有內容,若有內容,我們可以使用方法
    await Clipboard.GetTextAsync()
    將剪貼簿的文字內容取出來
using Prism.Commands;
using Prism.Mvvm;
using Prism.Navigation;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace XFESClipboard.ViewModels
{
    using System.ComponentModel;
    using Prism.Events;
    using Prism.Navigation;
    using Prism.Services;
    using Xamarin.Essentials;

    public class MainPageViewModel : INotifyPropertyChanged, INavigationAware
    {
        public event PropertyChangedEventHandler PropertyChanged;
        public string MyEntry { get; set; }
        public DelegateCommand<string> LabelTapCommand { get; set; }
        public DelegateCommand RetriveClipboardCommand { get; set; }
        private readonly INavigationService _navigationService;
        public Plugin.Toasts.IToastNotificator _ToastNotificator { get; set; }
        public MainPageViewModel(INavigationService navigationService,
            Plugin.Toasts.IToastNotificator toastNotificator)
        {
            _navigationService = navigationService;
            _ToastNotificator = toastNotificator;

            LabelTapCommand = new DelegateCommand<string>(async (x) =>
            {
                Clipboard.SetText(x);
                await _ToastNotificator.Notify(new Plugin.Toasts.NotificationOptions()
                {
                    Title = $"通知",
                    Description = $"{MyEntry} 已經複製到剪貼簿中"
                });
            });

            RetriveClipboardCommand = new DelegateCommand(async () =>
            {
                if( Clipboard.HasText )
                {
                    MyEntry = $"產生自剪貼簿:{await Clipboard.GetTextAsync()}";
                }
                else
                {
                    await _ToastNotificator.Notify(new Plugin.Toasts.NotificationOptions()
                    {
                        Title = $"警告",
                        Description = $"剪貼簿內沒有任何資料"
                    });
                }
            });
        }

        public void OnNavigatedFrom(NavigationParameters parameters)
        {

        }

        public void OnNavigatingTo(NavigationParameters parameters)
        {

        }

        public void OnNavigatedTo(NavigationParameters parameters)
        {
        }

    }
}
  • Android 平台執行結果
    這是一開始執行的螢幕截圖
    Xamarin Essentials
    現在,因為剪貼簿內現在沒有任何內容,所以,當我按下按鈕之後,會得知剪貼簿內沒有任何資料可以使用。
    Xamarin Essentials
    讓我們按下螢幕上的 Welcome to Xamarin Forms and Prism! 文字之後,便會將這個文字儲存到剪貼簿上。
    Xamarin Essentials
    我們可以在文字輸入盒中長按,此時,會出現一個彈出功能選項,讓我們點選 PASTE 貼上 這個選項。
    Xamarin Essentials
    如此,便可以從剪貼簿中將文字取出來,設定到文字輸入盒內。
    Xamarin Essentials
    若我們再度按下按鈕,現在剪貼簿中有內容了,所以,我們可以將剪貼簿內的文字取出來,設定到文字輸入盒內。
    Xamarin Essentials



2018/06/19

Xamarin.Essentials 體驗 3 : Device Display Information 裝置顯示的資訊

根據 Xamarin.Essentials 官方文件中指出:Xamarin.Essentials 跨平台應用程式開發介面的開發人員提供他們的行動應用程式。透過 Xamarin.Essentials 的套件幫忙,可以將這些功能整合到您的應用程式:加速計 應用程式資訊 電池 剪貼簿 指南針 資料傳輸 裝置顯示資訊 裝置資訊 電子郵件 檔案系統的協助程式 手電筒 地理編碼 地理位置 迴轉儀 磁力計 開啟瀏覽器 電話撥號員 喜好設定 螢幕鎖定 安全儲存體 SMS 文字轉換語音 追蹤版本 震動。
我們現在來體驗關於 Device Display Information 裝置顯示的資訊 這項功能,因此,可以參考底下的專案範例,該專案範例

建立測試專案

  • 首先,我們先使用 Prism Template Pack 擴充功能所提供的專案樣板,建立起一個 Xamarin.Forms 專案,在這裡我們僅選擇 Android / iOS / UWP 類型的專案;接著,我們需要把 PropertyChanged.Fody NuGet 套件安裝到 .NET Standard 專案類別庫內,並且安裝 FodyWeavers.xml 檔案。
  • 緊接著,我們要開始安裝 Xamarin.Essentials NuGet 套件到所有的專案內,在這裡,請使用滑鼠右擊方案節點,選擇 管理方案的 NuGet 套件 選項
  • 請在 NuGet - 解決方案 的視窗中,輸入要搜尋的套件名稱 : Xamarin.Essentials
    並且,請勾選 包括搶鮮版 的文字檢查盒,並且安裝這個套件;我寫這篇文章的時候, Xamarin.Essentials 的最新版本為 0.7.0.17 版本,因此,我們安裝這個版本。
    Xamarin Essentials NuGet Installation
  • 當 Xamarin.Essentials 套件安裝完成之後,您將會發現到在 Visual Studio 2017 的錯誤視窗中,出現了底下錯誤訊息
Warning
偵測到 Xamarin.Android.Support.Compat 的版本衝突。請直接從專案參考套件,以解決此問題。 
 XFESFileSystem.Android -> Xamarin.Essentials 0.7.0.17-preview -> Xamarin.Android.Support.CustomTabs 27.0.2 -> Xamarin.Android.Support.Compat (= 27.0.2) 
 XFESFileSystem.Android -> Xamarin.Android.Support.Design 25.4.0.2 -> Xamarin.Android.Support.Compat (= 25.4.0.2).
偵測到 Xamarin.Android.Support.Compat 的版本衝突
  • Information 這個時候您可以參考 Xamarin.Essentials 體驗 1 : File System Helpers 檔案系統存取 文章中的解決辦法
    完成之後,Android 專案下的 .csproj 檔案,請搜尋這個關鍵字 PackageReference Include="Xamarin.Essentials", 此時,您將會看到底下的內容,安裝了 Xamarin.Android.Support.CustomTabs NuGet 套件,並且都升級到 27.0.2.1 版本
    當然,最快的方式,就是使用 Visual Studio Code 工具,開啟 Android 專案下的 .csproj 檔案,值些修改成為底下內容,儲存後回到 Visual Studio 2017 下,緊接著重新載入這個 .csproj 檔案,就可以進行 Android 專案的編譯動作囉。
XML
    <PackageReference Include="Xamarin.Essentials" Version="0.7.0.17-preview"/>
    <PackageReference Include="Xamarin.Android.Support.CustomTabs" Version="27.0.2.1"/>
    <PackageReference Include="Xamarin.Android.Support.Design" Version="27.0.2.1" />
    <PackageReference Include="Xamarin.Android.Support.v7.AppCompat" Version="27.0.2.1" />
    <PackageReference Include="Xamarin.Android.Support.v4" Version="27.0.2.1" />
    <PackageReference Include="Xamarin.Android.Support.v7.CardView" Version="27.0.2.1" />
    <PackageReference Include="Xamarin.Android.Support.v7.MediaRouter" Version="27.0.2.1" />
  • 如此,最初產生的錯誤訊息便會消失了。
  • 我們將開始要進行 View ViewModel Model 的設計了,首先,我們開啟 MainPage.xaml 這個檔案,底下是我們測試的頁面 XAML 語法
    在這裡,我們將會增加一個按鈕,用來取得最新的螢幕裝置的顯示資訊
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"
             x:Class="XFESDeviceDisplay.Views.MainPage"
             Title="Device Display Information 裝置顯示的資訊">

    <StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
        <Label Text="Welcome to Xamarin Forms and Prism!" />
        <Label Text="{Binding Orientation, StringFormat='Orientation : {0}'}" FontSize="20"/>
        <Label Text="{Binding Rotation, StringFormat='Rotation : {0}'}" FontSize="20"/>
        <Label Text="{Binding Width, StringFormat='Width : {0}'}" FontSize="20"/>
        <Label Text="{Binding Height, StringFormat='Height : {0}'}" FontSize="20"/>
        <Label Text="{Binding Density, StringFormat='Density : {0}'}" FontSize="20"/>
        <Button Text="Refresh" Command="{Binding RefreshCommand}"/>
    </StackLayout>

</ContentPage>
  • 請打開 MainPageViewModel.cs 這個檔案
    在這個檔案中,我們將會在 OnNavigatedTo 事件中,使用 DeviceDisplay 類別各個屬性,將其值取出來,設定要綁定到頁面的屬性物件中。
    不過, DeviceDisplay 類別內有個 ScreenMetricsChanaged 事件,將會於螢幕顯示屬性值有變化的時候,便會觸發這個事件,我們將會於 OnNavigatedTo 事件中綁定這個事件到 Lambda 委派方法內,而這個方法會把該事件傳入的參數之 ScreenMetrics 內容,重新顯示到螢幕上。
C#
using Prism.Commands;
using Prism.Mvvm;
using Prism.Navigation;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace XFESDeviceDisplay.ViewModels
{
    using System.ComponentModel;
    using Prism.Events;
    using Prism.Navigation;
    using Prism.Services;
    using Xamarin.Essentials;

    public class MainPageViewModel : INotifyPropertyChanged, INavigationAware
    {
        public event PropertyChangedEventHandler PropertyChanged;
        public string Orientation { get; set; }
        public string Rotation { get; set; }
        public double Width { get; set; }
        public double Height { get; set; }
        public double Density { get; set; }
        public DelegateCommand RefreshCommand { get; set; }
        private readonly INavigationService _navigationService;

        public MainPageViewModel(INavigationService navigationService)
        {
            _navigationService = navigationService;
            RefreshCommand = new DelegateCommand(() =>
            {
                Refresh(DeviceDisplay.ScreenMetrics);
            });
        }

        public void OnNavigatedFrom(NavigationParameters parameters)
        {

        }

        public void OnNavigatingTo(NavigationParameters parameters)
        {

        }

        public void OnNavigatedTo(NavigationParameters parameters)
        {
            Refresh(DeviceDisplay.ScreenMetrics);

            DeviceDisplay.ScreenMetricsChanaged += (x) =>
            {
                Refresh(x.Metrics);
            };
        }

        public void Refresh(ScreenMetrics screenMetrics)
        {
            Orientation = screenMetrics.Orientation.ToString();
            Rotation = screenMetrics.Rotation.ToString();
            Width = screenMetrics.Width;
            Height = screenMetrics.Height;
            Density = screenMetrics.Density;
        }
    }
}
  • 根據官方文件上的說明
    • Landscape 2 Screen is in landscape.
    • Portrait 1 Screen is in portrait.
    • Unknown 0 Unknown screen orientation.
    • Rotation0 0 Rotated 0 degrees.
    • Rotation180 2 Rotated 180 degrees.
    • Rotation270 3 Rotated 270 degrees.
    • Rotation90 1 Rotated 90 degrees.
  • Android 平台執行結果
    這是一開始執行的螢幕截圖
    Xamarin Essentials
    現在,我們將螢幕轉個九十度,這個時候, DeviceDisplay.ScreenMetricsChanaged 事件將會被觸發,並且會把最新螢幕顯示裝套重新顯示在螢幕頁面上;不過,事與願違,似乎這個事件所傳入的引數值,並不是這個時候螢幕的最新顯示狀態值。
    Xamarin Essentials
    現在,讓我們按下 Refresh 按鈕後,您將會看到現在最新的螢幕顯示狀態值了。
    Xamarin Essentials
  • UWP 平台執行結果
    這是一開始執行的螢幕截圖,在我的 Windows 10 電腦環境中,我有雙螢幕,現在看到的是我主螢幕的顯示資訊。
    Xamarin Essentials
    現在,我們將該視窗拖拉到另外一個螢幕下,這個時候, 我們可以看到 DeviceDisplay.ScreenMetricsChanaged 事件將會被觸發,並且會把最新螢幕顯示裝套重新顯示在螢幕頁面上。這樣的機制在 UWP 環境中是運作正常的。
    Xamarin Essentials