Xamarin.Forms 教學系列文（三.壹）文字排版 & 顏色

學習目標

• Label、Text 的排版
• 如何建立 Color 物件

這一章節來玩弄一下文字...

當我們要顯示一大段落的文字時，最簡單的方式就是全塞在 Label 的 Text 內...

    public class BaskervillesPage : ContentPage
    {
        public BaskervillesPage()
        {
            Content = new Label
            {
                VerticalOptions = LayoutOptions.Center,
                Text = "\u2003Mr. Sherlock Holmes, who was usually very late in " + 
                "the mornings, save upon those not infrequent " + 
                "occasions when he was up all night, was seated at " + 
                "the breakfast table. I stood upon the hearth-rug " + 
                "and picked up the stick which our visitor had left " +
                "behind him the night before. It was a fine, thick " + 
                "piece of wood, bulbous-headed, of the sort which " +
                "is known as a \u201CPenang lawyer.\u201D Just " + 
                "under the head was a broad silver band, nearly an " +
                "inch across, \u201CTo James Mortimer, M.R.C.S., " + 
                "from his friends of the C.C.H.,\u201D was engraved " +
                "upon it, with the date \u201C1884.\u201D It was " +
                "just such a stick as the old-fashioned family " + 
                "practitioner used to carry\u2014dignified, solid, " + 
                "and reassuring."
            };

            Padding = new Thickness(5, Device.OnPlatform(20, 5, 5), 5, 5);
        }
    }

可以注意到文字段落內有用到 \u201C 之類的萬國字元來顯示雙引號 "，或是 \u2003 代表空白。

執行結果，文字會依螢幕大小斷行。

排版

上一段程式內有用到一個屬性，HorizontalOptions，其值可以設定為 Start, Center 或是 End，代表的是這個 Label 的置左，置中和置右。
不過位移效果其實不明顯，因為是將 Label 相對於 ContentPage 做位移的動作。

還有另一個較相似的屬性，HorizontalTextAlignment，同樣可以設為 Start, Center 或是 End。會發現其位移效果較大，因為是針對 Label 內每一行文字做排版動作。

另外，若已經設定了 VerticalOptions，任何對 VerticalTextAlignment 的設定會失效。



換行

Label 定義了一個屬性可以設定是否自動換行，LineBreakMode。

但若要自行控制文字的換行可以在 Text 內鍵入 (\n)，或是使用 c# 內建的 Environment.NewLine。

文字和背景顏色

文字或背景的顏色會依照不同的平台有不同的預設。

當然我們可以自行設定 Label 的屬性， TextColor 或 BackgroundColor。

底下程式利用背景顏色做個小小的實驗，讓我們進一步了解 HorizontalTextAlignment 和 HorizontalOptions 的差異。

    public class GreetingsPage : ContentPage
    {
        public GreetingsPage()
        {
            Content = new Label
            {
                Text = "Greetings, Xamarin.Forms!",
                HorizontalTextAlignment = TextAlignment.Center,
                VerticalTextAlignment = TextAlignment.Center,
                BackgroundColor = Color.Yellow,
                TextColor = Color.Blue
            };
        }
    }

會發現 Label 其實是佔滿整個 ContentPage 的內容 (HorizontalOptions 預設值是 LayoutOptions.Fill)，只有文字位移至中間。

改成用 HorizontalOptions

    public class GreetingsPage : ContentPage
    {
        public GreetingsPage()
        {
            Content = new Label
            {
                Text = "Greetings, Xamarin.Forms!",
                HorizontalOptions = LayoutOptions.Center,
                VerticalOptions = LayoutOptions.Center,
                BackgroundColor = Color.Yellow,
                TextColor = Color.Blue
            };
        }
    }

就能看到整個 Label 位移到中間了!

顏色

這一小節先跳脫文字，帶大家了解 Color 的特性。

設定顏色有兩種方法：

• 利用 三原色，RGB 的值來設定，範圍 (double) 0 ~ 1.0。
• 利用 色相 (hue)，飽和度 (saturation) 和亮度 (luminosity) 值來設定，範圍 (double) 0 ~ 1.0

Color 內還有一個屬性能設定透明度，A。

直接用 Color 來建構顏色物件：

• new Color (double graShade)
• new Color (double r, double g, double b)
• new Color (double r, double g, double b, double a)

或是利用 Color 提供的靜態方法來建立顏色物件：

• Color.FromRgb (double r, double g, double b)
• Color.FromRgb (int r, int g, int b)
• Color.FromRgba (double r, double g, double b, double a)
• Color.FromRgba (int r, int g, int b, int a)
• Color.FromHsla (double h, double s, double l, double a)

使用靜態方法時，要注意值的型態若為 int，範圍就是 0 ~ 255。

所以說，底下兩行代表的顏色是不一樣的：

1. Color.FromRgb(1, 0, 0)
2. Color.FromRgb(1.0, 0, 0)

除了自行設定， Color 也定義了 17 種預設的顏色可以使用如下圖：

Color 還包含了一些有趣的方法可以針對已經存在的顏色做修改：

• AddLuminosity (double delta)
• MultiplyAlpha (double alpha)
• WithHue (double newHue)
• WithLouminosity (double newLuminosity)
• WithSaturation (double newSaturation)

最後，介紹一下 Color 兩個比較特殊的唯獨屬性：

• Color.Default
• Color.Accent

第一個顧名思義就是平台預設值...可以參考下表：

第二個則是引用主題的顏色。



更改主題


在 Android 系統若是要更改主題，可以在專案的 Properties 資料夾內找到 AndroidManifest.xml 檔案，
通常會長得像這樣：

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <uses-sdk android:minSdkVersion="15" />
    <application></application>
</manifest>

在 application 內加入：

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <uses-sdk android:minSdkVersion="15" />
    <application android:theme="@style/android:Theme.Holo.Light">
    </application>
</manifest>

Android 的主題就是黑色的字和白色的背景了~