XAML in Xamarin.Forms 基礎篇 電子書

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

Xamarin.Forms 快速入門 電子書

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

2015/09/28

Xamarin.Android Templates Pack

當使用 VS 2015 的 [新增專案] > [範本] > [Android] ,其中,若選擇了 [Blank App (Android)] 範本來建立新的專案。
image
當專案建立完成後,立即執行該專案,發現到該專案的內容相當精簡,只有一個 Activity,和一個Layout (Main.axml) ,這個 Layout內,也只有一個 Button;在Activity內,也只有一個事件,那就是按鈕事件,當按下這個按鈕之後,會自動累計加一。
image
Layout內定義的內容
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <Button
        android:id="@+id/MyButton"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/Hello" />
</LinearLayout>
MainActivity.cs內的內容
using System;using Android.App;using Android.Content;using Android.Runtime;using Android.Views;using Android.Widget;using Android.OS;
namespace App1
{
    [Activity(Label = "App1", MainLauncher = true, Icon = "@drawable/icon")]
    public class MainActivity : Activity
    {
        int count = 1;

        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);

            // Set our view from the "main" layout resource            SetContentView(Resource.Layout.Main);

            // Get our button from the layout resource,
            // and attach an event to it            Button button = FindViewById<Button>(Resource.Id.MyButton);

            button.Click += delegate { button.Text = string.Format("{0} clicks!", count++); };
        }
    }
}
這裡有個不錯的選擇 【Xamarin.Android Templates Pack】您可以直接在 VS 2015 內,[工具] > [擴充功能與更新] > 並且搜尋這個 Visual Studio 組件庫: Xamarin.Android Templates Pack,並且加以安裝起來。
一旦安裝好後,當您建立先的 Xamarin Andorio 專案的時候,就可以選擇 [Android Navigation Drawer App AppCompact這個範本,底下為執行結果。
image image
上方左圖為啟動 App後的首頁畫面,上方右圖為點選了左上方的 [漢堡按鈕] 或者使用由左往右的手勢操作滑動畫面,也可以帶出如上右圖的浮動功能表的畫面。
我個人覺得這個開發樣板相當的實用,因為,現今大多數的 Android App,都是採用這樣的操作方式,透過這個開發樣板,可以快速地把許多基本程式碼與框架建立出來。
不過,當我還在學習如何透過 Xamarin 來開發 Android App的時候,非常好奇要做到上述的功能,究竟要使用到那些 Android SDK的功能呢?接下來的一些文章,我會想要解密這個 App 樣板究竟是如何實做出來的。
一旦我們具有這樣的知識與經驗,那麼日後我們使用 Xamarin.Android來開發出更加進階功能的時候,就會更加順暢了。

在 Windows Live Writer內,標示具有顏色的程式碼 Code Format

在遇到安裝與註冊部落格兩個問題,都順利解決之後,接下來就是要考慮到,當要把程式碼或者XML等資料內容,貼到部落格上的時候,如何標示這些程式碼的內容,使其具有顏色與特定格式。

雖然,Windows Live Write有支援 Plugin功能,網路上也搜尋到許多可用於標示格式化的程式碼的Plugin,不過,這都還要做些其他的設定,因此,找到一個最簡潔的方案。

這個網頁 http://www.manoli.net/csharpformat/ 雖然支援的格式不多,對我來說,已經非常足夠了,因此,我透過這個網頁,把文字格式的程式碼,直接轉換成為具有格式程式碼,在貼到 Windows Live Writer上, 就解決了我可以在部落格文章上,貼上具有格式內容的程式碼了,太感恩了。

底下則是我將 Visual Studio 2015 內的 XAML 部分內容剪下來,並且貼到該網頁上,所產生出來的效果:

(若您已經從網頁上複製了具有格式化的內容之後,再貼到 Windows Live Writer前,請點選 [Home] > [Paste] > [Paste Special…] > [Keep Formatting] 功能,這樣才會貼出如下的效果)

<Page
x:Class="Doggy.UWP.Views.EmailRegistrationView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Doggy.UWP.Views"
xmlns:ViewModels="using:Doggy.UILogic.ViewModels"
xmlns:Controls="using:Doggy.UWP.Controls"
xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"

xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
>

<Page.Resources>
<ResourceDictionary/>
</Page.Resources>
<Page.DataContext>
<ViewModels:EmailRegistrationViewModel/>
</Page.DataContext>

<Grid >
<Rectangle Fill="#FF262626" />
<StackPanel
Orientation="Vertical"
>
<!--#region 最上方的 Email註冊標題與回上一頁 -->
<Grid
VerticalAlignment="Top"
Height="45"
>

<Button

HorizontalAlignment="Left"
Margin="8,0,0,0"
Content="&#xf053;"
Height="28"
Foreground="White" BorderBrush="{x:Null}" Background="{x:Null}"
FontSize="17" FontFamily="/Assets/Fonts/fontawesome-webfont.ttf#FontAwesome"
BorderThickness="0" Padding="0" Command="{Binding 回上頁Command}"
/>

<TextBlock

Height="21"
VerticalAlignment="Center" HorizontalAlignment="Center"
Text="Email 註冊"

Foreground="White"
FontSize="17"
/>

</Grid
>

使用 Windows Live Writer 註冊 Blogger 帳號

順利安裝了 Windows Live Writer,接著進入到要設定部落格帳號資訊,我輸入了我的部落格網址,與我的Google 帳號與密碼, Windows Live Writer 卻一直告訴我,我輸入的帳號與密碼不正確,而且,我有再度確認確實密碼輸入無誤;只好再去請教大哥哥 (谷哥)。

image

原來我的Google有設定使用兩階段驗證,所以,部分應用程式和裝置採用安全性較低的登入技術,就無法順利登錄,解決方式就是 【使用應用程式專用密碼,才能存取安全性較低的應用程式設定】,您可以進入這個網址

https://www.google.com/settings/security/lesssecureapps

接著,您可以進入到【使用應用專用密碼登錄】網頁,為您的App新增一個專屬密碼

https://support.google.com/accounts/answer/185833

請進入到【應用程式密碼】網頁,https://security.google.com/settings/security/apppasswords,點選下方的 [選取應用程式] > [其他] ,接著輸入您應用程式要使用的名稱,就可以取得這個密碼,將這個密碼輸入到您的 Windows Live Writer 的部落格帳號設定對話窗內,就可以順利通過認證了。

image

在 Windows 10 下,安裝 Windows Live Wrtiter 2012

今天,想要開始寫部落格文章,以往都是要編寫文字、螢幕截圖、上傳到網路磁碟空間、取得網路磁碟空間並放入到部落格文章中,以圖片來顯示、接著繼續寫文字,周而復始,覺得十分麻煩。

因此,詢問 保哥 是否有好用的工具,可以像是 Microsoft Word程式那般,只需取得截圖之後,不用手動逐一上傳圖片,就可以順利完成此一部落格文章,因此,著手開始下載與安裝 Windows Live Writer,結果,當下載.Net 3.5與安裝完成之後,就發生錯誤,無法安裝,殘念。

經過搜尋,在微軟 MSDN 部落格上 Stefan Stranger 寫的一篇文章,Installing Windows Live Writer on Windows 10 ,裡面有六個步驟,將過執行之後,順利的將 Windows Live Writer 2012 安裝起來了,有興趣的人,可以參考該文章說明。

2014/07/22

如何產生較長有效期限的應用程式開發簽名憑證 app package signing certificate

當我們開發好 WinRT / Windows 8.1 市集App後,想要進行側載佈署,這個時候,您會發現到您需要將產生好的側載套件檔案中的 xxx.cer 安裝到您的電腦授權憑證內。


不過,當您檢視這個憑證,您會發現到這個憑證有效期限內只有一年,也就是您當時建立好這個側載安裝套件之後的一年內,都是有效的;然而,若該App超過一年後,並且沒有重新進行側載佈署到使用者電腦上,會因為該程式數位簽名憑證已經到期,導致您的App無法使用。


我使用一個簡單的方式來解決此一問題,那就是把這個程式數位簽名有效期限給他延長一點時間,比如說,10年,那麼,在這十年內,只要這個開發程式簽名憑證沒有過期,那麼,已經側載的App是可以繼續使用的。

首先,開啟命令提示字元視窗,說輸入底下指令

MakeCert /n "CN=Contoso Software, O=Contoso Corporation, C=US" /r /h 0 /eku "1.3.6.1.5.5.7.3.3,1.3.6.1.4.1.311.10.3.13" /e 07/01/2020 /sv MyCert.pvk MyCert.cer

Pvk2Pfx /pvk MyCert.pvk /pi p@ssw@rd /spc MyCert.cer /pfx MyCert.pfx /po p@ssw@rd

這個時候,在您命令提示字元當時所在的目錄下,會產生出 [MyCert.pfx]檔案,請將這個檔案複製到您Windows Store App的專案根目錄下。

接著,雙擊 [Package.appxmanifest] 檔案,切換到 [封裝] 頁次,點選 [選擇憑證] 按鈕,此時會跳出 [選擇憑證] 的對話視窗,接著點選 [設定憑證(T)...]的下拉選單,我們需要選擇 [從檔案選取...] 項目,這個時候,請在您專案根目錄下選擇 [MyCert.pfx] 檔案。


這樣就完成了將您的程式數位簽名( Code Sign )憑證的有效期限增加超過一年以上的目的。



2014/07/14

進行Windows 8.1 App 側載的時候,該App的憑證是安裝到哪裡了呢?

當我們進行 Windows 8.1 App 側載的時候,系統會要求我們要安裝 App的信任憑證到您的系統中。

下圖為我們要側載的 Windows 8.1 App Package 套件檔案,您可以看到檔案 [未來信Win81通用.Windows_1.0.0.0_AnyCPU_Debug.cer] 就是這個App的憑證。


其實,該憑證被 PowerShell 程式 ( Add-AppDevPackage.ps1 )自動安裝到 本機電腦中的 [受信任的人] 的區域內了,如下圖所示。





進行側載時候,遇到的開發者授權 developer license 之問題

若您需要把您開發的App,側載到其他電腦上,通常您都會遇到這樣的情況,那就是要求您建立一個 developer license ,在這裡,有幾個不錯的 PowerShell 工具可以使用。

在這裡,請按下 [Win Key] + [S] 這兩個組合按鍵,接著,在搜尋小視窗中,輸入 powerShell ,此時,您會看到Windows 8 幫您自動搜尋出與 powerShell 相關的任何事物,此時,請在 [Windows PowerShell] 這個項目上,請您使用滑鼠右擊該項目,選擇使用 [以系統管理員身分執行] 模式,啟動 PowerShell,如下圖所示。



請在開啟的 [系統管理員: Windows PowerShell] 視窗中,輸入底下指令:

Get-WindowsDeveloperLicense

此時,您會看到這台電腦上所擁有的開發者授權是否還有效,以及還剩下多少天就需要重新再度更新。

若您想要更新您電腦上的開發者憑證,請輸入底下指令:
Show-WindowsDeveloperLicenseRegistration

此時,您的電腦上會出現下圖畫面,詢問您是否要 更新您的 Windows 8.1 開發人員授權,點選右下角的 [我同意] 按鈕,即可更新到最新的開發人員授權有效時間。


想要撤銷電腦上的開發人員授權,請輸入底下指令:
Unregister-WindowsDeveloperLicense

當輸入完指令,並且按下 [Enter] 按鈕後,您會在畫面上看到

您即將把開發人員授權從這部電腦移除。
此電腦上的開發人員授權將在 2014/8/2 下午 06:17:17
到期。若將開發人員授權從這部電腦移除,某些應用程式將停止運作。確定要移除此授權?
[Y] 是(Y)  [N] 否(N)  [S] 暫停(S)  [?] 說明 (預設值為 "Y"):

請直接按下 [Enter] 按鍵,即可已將此電腦上的開發人員授權移除,此時,我們再度電腦上擁有的開發人員授權,請輸入底下指令,並且按下 [Enter]

Get-WindowsDeveloperLicense

這個時候,PowerShell 視窗會顯示底下訊息,告知您,這此電腦上沒有開發人員授權

PS C:\Vulcan> Get-WindowsDeveloperLicense
Get-WindowsDeveloperLicense : 此電腦上沒有開發人員授權。
位於 線路:1 字元:1
+ Get-WindowsDeveloperLicense
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~
    + CategoryInfo          : InvalidOperation: (:) [Get-WindowsDeveloperLicense],InvalidOperationException
    + FullyQualifiedErrorId : NoRegisteredDeveloperLicense,Microsoft.Windows.DeveloperLicense.Commands.GetWindowsDevel
   operLicenseCommand

2014/07/13

如何手動針對 Windows Store App 側載套件 Sildloading Package,安裝到您的電腦上

當您收到了Windows Store App 側載套件之後,您會看到類似下圖的檔案與目錄,其中 [Add-AppDevPackage.ps1]就是提供您側載的 PowerShell Script,請使用滑鼠右鍵點選該檔案,接著在彈跳功能表中,選擇第二個選項 [用 PowerShell 執行]。


此時,您的 [Windows PowerShell] 命令提示視窗中,會出現底下的文字

找到封裝: C:\Vulcan\未來信\未來信Win81通用\未來信Win81通用.Windows\AppPackages\未來
信Win81通用.Windows_1.0.0.0_AnyCPU_Debug_Test\未來信Win81通用.Windows_1.0.0.0_AnyCPU_Debug.appx
找到憑證: C:\Vulcan\未來信\未來信Win81通用\未來信Win81通用.Windows\AppPackages\未來
信Win81通用.Windows_1.0.0.0_AnyCPU_Debug_Test\未來信Win81通用.Windows_1.0.0.0_AnyCPU_Debug.cer

安裝這個應用程式之前,必須執行下列動作:
        - 取得開發人員授權
        - 安裝簽署憑證
必須有系統管理員認證才能繼續。請接受 UAC 提示,並在系統要求時提供您的系統管理員密碼。
按 Enter 鍵繼續...:

這是因為當您電腦第一次進行 Windows 8.1 Store App 側載的時候,您需要在這台電腦上取得開發人員授權,不過,進行註冊開發人員授權的時候,需要有系統管理員的認證才能夠操作,而且,您也需要擁有 Microsoft Account 帳號。

在我們按下了 [Enter] 按鍵後,接受了 UAC 提示,此時畫面會出現底下對話窗


當您選擇按下了 [我同意] 按鈕,稍後,您會看到 [開發人員授權] 的對話窗,要求您使用您的 Microsoft Account 微軟帳號進行登入驗證;當您輸入完微軟帳號與密碼後,會看到底下小視窗,告知您系統正在取得 Windows 8.1 的開發人員授權


一旦正式取得了開發人員授權,您會看到底下視窗,告知您此次取得的開發人員授權到期日到何時,此時我們按下 [關閉] 按鈕。


接著 [系統管理員: Windows PowerShell] 視窗中,您會看到底下文字

正在取得開發人員授權...
正在安裝憑證...您即將安裝數位憑證

到您電腦的「受信任的人」憑證存放區。這會帶來嚴重的安全性風險,請務必在您信任這個數位憑證的建立者的情
況下才執行這個動作。

使用完這個應用程式之後,您應該手動移除相關的數位憑證。有關執行這個動作的指示,請參閱:
http://go.microsoft.com/fwlink/?LinkId=243053

您確定要繼續嗎?

[Y] 是(Y)  [N] 否(N)  [?] 說明 (預設值為 "N"):

請您輸入大寫的 Y ,並且按下 [Enter] 按鍵。

稍待一段時間,您就會看到這個訊息:

成功:  已成功安裝您的應用程式。
按 Enter 鍵繼續...:

表示您已經成功了側載這個Windows 8.1 Store App了,您可以在 Windows 8.1的桌面查看最新側載安裝好的 App,並且執行他。

總結,若您是第一次在您的電腦上側載 Windows 8.1 Store App,您需要做到底下事情:
安裝這個應用程式之前,必須執行下列動作:

       - 取得開發人員授權
       - 安裝簽署憑證



如何產生 Windows Store App 的側載 Sideloading 的套件 Package

首先,使用 Visual Studio 2013 打開您的Windows Store App專案,從功能表選擇 [專案] > [市集] > 建立應用程式套件,如下圖所示:


請在 [建立應用程式套件] 對話窗中的 您要建置套件以上傳到 Windows 市集嗎?
請選擇 [否] 按鈕,接著點選右下角的 [下一步] 按鈕。

接下來您會看如下圖的對話窗,在 選取要建立的套件和方案組態對應 (左下角),您可以選擇 Neutral,表示該套件可以安裝在任何作業系統下 x86, x64, ARM,接著按下 [建立] 按鈕,則 Visual Studio 會開始幫忙建立這個App 可以用於側載的套件。


當 App 側載套件已經產生完成後,他會告訴您這些套件產生在哪個目錄下,您可以點選這個目錄連結,檔案總管會自動切換到這個目錄下。


當我們用檔案總管打開上圖的路徑後,您會看到如下圖的內容:
其中,下圖紅線框住的目錄,您可以使用任何壓縮工具將其壓縮起來,並且將這個壓縮檔案提供給需要側載的測試人員,他們就可以進行側載了。








如何得知您的電腦上安裝了那些 .Net Framework 版本 CLR

想要知道您的電腦上安裝了那些 .Net Framework CLR 版本,您可以執行 Clrver.exe 這個工具。

想要找到與啟動這個工具,有底下幾種方法:


  • 若您安裝的Visual Studio 2013,請使用命令提示字元或者檔案總管,切換到這個目錄下

    C:\Program Files (x86)\Microsoft Visual Studio 12.0\Common7\Tools
接著在命令提示字元中輸入指令 ClrVer ,就會看到底下結果了

C:\Program Files (x86)\Microsoft Visual Studio 12.0\Common7\Tools>Clrver

Microsoft (R) .NET CLR Version Tool  Version 4.0.30319.33440
Copyright (c) Microsoft Corporation.  All rights reserved.

Versions installed on the machine:
v2.0.50727
v4.0.30319

C:\Program Files (x86)\Microsoft Visual Studio 12.0\Common7\Tools>