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 套件安裝完成之後，您將會發現到在 Visual Studio 2017 的錯誤視窗中，出現了底下錯誤訊息

偵測到 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 的版本衝突

這個時候您可以參考 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 專案的編譯動作囉。

    <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 語法

在這裡，我們將會增加一個按鈕，用來取得最新的螢幕裝置的顯示資訊

<?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 內容，重新顯示到螢幕上。

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;
        }
    }
}

根據官方文件上的說明

Orientation
- Landscape 2 Screen is in landscape.
- Portrait 1 Screen is in portrait.
- Unknown 0 Unknown screen orientation.
ScreenRotation
- Rotation0 0 Rotated 0 degrees.
- Rotation180 2 Rotated 180 degrees.
- Rotation270 3 Rotated 270 degrees.
- Rotation90 1 Rotated 90 degrees.
Android 平台執行結果

這是一開始執行的螢幕截圖

現在，我們將螢幕轉個九十度，這個時候， DeviceDisplay.ScreenMetricsChanaged 事件將會被觸發，並且會把最新螢幕顯示裝套重新顯示在螢幕頁面上；不過，事與願違，似乎這個事件所傳入的引數值，並不是這個時候螢幕的最新顯示狀態值。

現在，讓我們按下 Refresh 按鈕後，您將會看到現在最新的螢幕顯示狀態值了。
UWP 平台執行結果

這是一開始執行的螢幕截圖，在我的 Windows 10 電腦環境中，我有雙螢幕，現在看到的是我主螢幕的顯示資訊。

現在，我們將該視窗拖拉到另外一個螢幕下，這個時候，我們可以看到 DeviceDisplay.ScreenMetricsChanaged 事件將會被觸發，並且會把最新螢幕顯示裝套重新顯示在螢幕頁面上。這樣的機制在 UWP 環境中是運作正常的。

2018/06/17

Xamarin.Essentials 體驗 2 : Device Information 裝置資訊

我們首先來體驗關於 Device Information 裝置資訊這項功能，在其官方文件中有提到：DeviceInfo類別會提供執行應用程式之裝置的相關資訊，因此，我們來練習如何使用這些功能。

因此，可以參考底下的專案範例，該專案範例位於 https://github.com/vulcanlee/xamarin-forms-sample2018/tree/master/XFESDeviceInformation

建立測試專案

首先，我們先使用 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 套件安裝完成之後，您將會發現到在 Visual Studio 2017 的錯誤視窗中，出現了底下錯誤訊息

偵測到 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.Essentials 體驗 1 : File System Helpers 檔案系統存取文章中的解決辦法
如此，最初產生的錯誤訊息便會消失了。
我們將開始要進行 View ViewModel Model 的設計了，首先，我們開啟 MainPage.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="XFESDeviceInformation.Views.MainPage"
             Title="Device Information 裝置資訊">

    <StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
        <Label Text="Welcome to Xamarin Forms and Prism!" />
        <Label Text="{Binding Model, StringFormat='DeviceInfo.Model : {0}'}"/>
        <Label Text="{Binding Manufacturer, StringFormat='DeviceInfo.Manufacturer : {0}'}"/>
        <Label Text="{Binding Name, StringFormat='DeviceInfo.Name : {0}'}"/>
        <Label Text="{Binding VersionString, StringFormat='DeviceInfo.VersionString : {0}'}"/>
        <Label Text="{Binding Platform, StringFormat='DeviceInfo.Platform : {0}'}"/>
        <Label Text="{Binding Idiom, StringFormat='DeviceInfo.Idiom : {0}'}"/>
        <Label Text="{Binding DeviceType, StringFormat='DeviceInfo.DeviceType : {0}'}"/>
    </StackLayout>

</ContentPage>

請打開 MainPageViewModel.cs 這個檔案

在這個檔案中，我們將會在 OnNavigatedTo 事件中，使用 DeviceInfo 類別各個屬性，將其值取出來，設定要綁定到頁面的屬性物件中。

using Prism.Commands;
using Prism.Mvvm;
using Prism.Navigation;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace XFESDeviceInformation.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 Model { get; set; }
        public string Manufacturer { get; set; }
        public string Name { get; set; }
        public string VersionString { get; set; }
        public string Platform { get; set; }
        public string Idiom { get; set; }
        public string DeviceType { get; set; }
        private readonly INavigationService _navigationService;

        public MainPageViewModel(INavigationService navigationService)
        {
            _navigationService = navigationService;

        }

        public void OnNavigatedFrom(NavigationParameters parameters)
        {

        }

        public void OnNavigatingTo(NavigationParameters parameters)
        {

        }

        public void OnNavigatedTo(NavigationParameters parameters)
        {
            Model = DeviceInfo.Model;
            Manufacturer = DeviceInfo.Manufacturer;
            Name = DeviceInfo.Name;
            VersionString = DeviceInfo.VersionString;
            Platform = DeviceInfo.Platform;
            Idiom = DeviceInfo.Idiom;
            DeviceType = DeviceInfo.DeviceType.ToString();
        }

    }
}

根據官方文件上的說明

Platforms 平台，DeviceInfo.Platform 相互關聯會對應至作業系統與常數字串。
- DeviceInfo.Platforms.iOS – iOS
- DeviceInfo.Platforms.Android – Android
- DeviceInfo.Platforms.UWP – UWP
- DeviceInfo.Platforms.Unsupported – 不支援
Idioms 慣用語，DeviceInfo.Idiom 相互關聯的常數字串，將應用程式對應至類型的裝置上正在執行。
- DeviceInfo.Idioms.Phone – 電話
- DeviceInfo.Idioms.Tablet – 平板電腦
- DeviceInfo.Idioms.Desktop – 桌面
- DeviceInfo.Idioms.TV – 電視
- DeviceInfo.Idioms.Unsupported – 不支援
Device Type 裝置類型，DeviceInfo.DeviceType 列舉型別來判斷應用程式是否執行下列項目的上實體或虛擬裝置將相互關聯。模擬器虛擬裝置。
Android 平台執行結果
UWP 平台執行結果

2018/06/16

Xamarin.Forms 的 Switch 控制項的資料異動偵測與設計方法

在這篇文章中，我們將會來探討這樣的頁面使用情境該如何進行設計，請參考下圖，在這個頁面中，將會有三個 Switch 控制項，我們希望能夠做到這三個控制項彼此之間的設定選擇是互斥的，也就是，類似一個 Radio Button 的變形應用；當我們選擇了選項2 之後，選項1就會變成沒有被選擇狀態，同樣的，當選擇了選項3，此時，選項1，選項2 就會變成沒有被選擇的狀態。

本篇文章的範例程式碼 https://github.com/vulcanlee/xamarin-forms-sample2018/tree/master/XFDataChanged

由於 Switch 這個控制項並沒有相對應可以使用命令 Command(其實，這個控制像是沒有提供任何的命令)，這個時候，我們第一個想到的處理方式，就是使用 Prism 提供的 Behavior 行為機制，您可參考 Using the EventToCommandBehavior ，設定當 Switch 的 Toggled 事件被觸發的時候，便可以執行 ViewModel 中指定的 DelegateCommand 的委派方法。

不過，在這篇文章中，我們將要來說明另外一種做法，那就是使用我們安裝好的 PropertyChanged.Fody 這個 NuGet 套件所提供的功能，那就是我們可以針對所綁定的資料，設計一個事件方法，一旦這個綁定的資料有所異動的時候，相對應的事件方法就會被執行。

建立測試專案

首先，我們先使用 Prism Template Pack 擴充功能所提供的專案樣板，建立起一個 Xamarin.Forms 專案，在這裡我們僅選擇 Android / iOS / UWP 類型的專案；接著，我們需要把 PropertyChanged.Fody NuGet 套件安裝到 .NET Standard 專案類別庫內，並且安裝 FodyWeavers.xml 檔案。
我們來設計這篇文章中使用的範例頁面，在這個頁面中，我們使用了三個 Switch 控制項，這三個 Switch 控制項彼此是互斥的，您可以視為這三個 Switch 控制項的行為，會類似於我們 Windows 程式中的 Radio Button；最後，我們會把您選擇的結果，顯示在最後一個 Label 控制項內。

<?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="XFDataChanged.Views.MainPage"
             Title="Switch 控制項的資料異動偵測與設計方法">

    <StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
        <Label Text="Welcome to Xamarin Forms and Prism!" />
        <StackLayout Orientation="Horizontal">
            <Label Text="選項 1"/>
            <Switch IsToggled="{Binding Option1}"/>
        </StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="選項 2"/>
            <Switch IsToggled="{Binding Option2}"/>
        </StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="選項 3"/>
            <Switch IsToggled="{Binding Option3}"/>
        </StackLayout>

        <Label Text="{Binding YourChoice, StringFormat='你選擇的是 {0}'}"/>
    </StackLayout>

</ContentPage>

我們開始進行 ViewModel 的 C# 商業邏輯程式碼的設計，在這裡，我們需要設計三個所綁定 Switch 的 C# Property 屬性物件，當它本身的值有異動的話，我們需要有個相對應的事件方法被呼叫與執行。不過，我們對於這樣的事件方法，它的名稱需要使用指定的命名規格，那就是

On你的綁定屬性Changed

其中前的 On 與最後的 Changed 是固定不變的，我們來看個例子，若您的綁定屬性物件為 Option1 ，當使用者在頁面中進行操作，變動了 Option1 的值，這個時候，您的 ViewModel 內的

OnOption1Changed

方法，就會被自動呼叫了。

為了要能夠讓 Switch 的運作表現如同 Radio 的效果，我們同時也設計了 SetOption 方法

using Prism.Commands;
using Prism.Mvvm;
using Prism.Navigation;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace XFDataChanged.ViewModels
{
    using System.ComponentModel;
    using Prism.Events;
    using Prism.Navigation;
    using Prism.Services;
    public class MainPageViewModel : INotifyPropertyChanged, INavigationAware
    {
        public event PropertyChangedEventHandler PropertyChanged;
        public bool Option1 { get; set; }
        public bool Option2 { get; set; }
        public bool Option3 { get; set; }
        public string YourChoice { get; set; }
        private readonly INavigationService _navigationService;

        public MainPageViewModel(INavigationService navigationService)
        {
            _navigationService = navigationService;

        }

        public void OnNavigatedFrom(NavigationParameters parameters)
        {

        }

        public void OnNavigatingTo(NavigationParameters parameters)
        {

        }
        public void OnOption1Changed()
        {
            SetOption(nameof(Option1));
        }
        public void OnOption2Changed()
        {
            SetOption(nameof(Option2));
        }
        public void OnOption3Changed()
        {
            SetOption(nameof(Option3));
        }
        public void OnNavigatedTo(NavigationParameters parameters)
        {
            ResetOptions();
        }

        public void ResetOptions()
        {
            SetOption(nameof(Option1));
        }
        public bool CorrelationAction { get; set; }
        public void SetOption(string choiceOption)
        {
            if (CorrelationAction == true) return;
            CorrelationAction = true;
            switch (choiceOption)
            {
                case nameof(Option1):
                    Option1 = true;
                    Option2 = false;
                    Option3 = false;
                    break;
                case nameof(Option2):
                    Option1 = false;
                    Option2 = true;
                    Option3 = false;
                    break;
                case nameof(Option3):
                    Option1 = false;
                    Option2 = false;
                    Option3 = true;
                    break;
                default:
                    break;
            }
            YourChoice = choiceOption;
            CorrelationAction = false;
        }
    }
}

訂閱：文章 (Atom)

Xamarin Research

XAML in Xamarin.Forms 基礎篇電子書

Xamarin.Forms 快速入門電子書

2018/06/19

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

建立測試專案

2018/06/17

Xamarin.Essentials 體驗 2 : Device Information 裝置資訊

建立測試專案

2018/06/16

Xamarin.Forms 的 Switch 控制項的資料異動偵測與設計方法

建立測試專案

XAML in Xamarin.Forms 基礎篇 電子書

Xamarin.Forms 快速入門 電子書

2018/06/19

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

建立測試專案

2018/06/17

Xamarin.Essentials 體驗 2 : Device Information 裝置資訊

建立測試專案

2018/06/16

Xamarin.Forms 的 Switch 控制項的資料異動偵測與設計方法

建立測試專案

XAML in Xamarin.Forms 基礎篇電子書

Xamarin.Forms 快速入門電子書