第五章：尺寸處理（2）

Metrical大小

現在您已經知道Xamarin.Forms應用程式中的大小與英寸和厘米的度量尺寸大緻相對應，您可以調整元素的大小以使它們在各種裝置上大小相同。 這裡有一個名為MetricalBoxView的程式，它顯示一個寬約1厘米，高約1英寸的BoxView：

public class MetricalBoxViewPage : ContentPage
{
    public MetricalBoxViewPage()
    {
        Content = new BoxView
        {
            Color = Color.Accent,
            WidthRequest = 64,
            HeightRequest = 160,
            HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.Center
        };
    }
}
           

如果你真的拿着尺子到手機螢幕上的物體上，你會發現它不是所需的尺寸，但确實接近它，因為這些螢幕截圖還證明：

這個程式是打算在手機上運作。 如果您想在平闆電腦上運作它，則可以使用Device.Idiom屬性為iPad和Windows平闆電腦設定較小的因子。

估計的字型大小

Label和Button上的FontSize屬性指定從下邊界到下邊界頂部的字型字元的大緻高度，通常（取決于字型）還包括變音符号。 在大多數情況下，您需要将此屬性設定為由Device.GetNamedSize方法傳回的值。 這允許您指定NamedSize枚舉的成員：

預設，微型，小型，中型或大型。

或者，您可以将FontSize屬性設定為實際的數字字型大小，但會涉及一些小問題（稍後将詳細讨論）。 大多數情況下，您可以在整個Xamarin.Forms中使用的裝置無關單元中指定字型大小，這意味着您可以根據平台分辨率計算獨立于裝置的字型大小。

例如，假設您想在程式中使用12點字型。 你應該知道的第一件事是，盡管12磅字型可能對于印刷材料或桌面螢幕來說是舒适的尺寸，但在手機上它相當大。 但讓我們繼續。

英寸有72點，是以12點字型是一英寸的六分之一。 DPI分辨率為160，這是大約27個獨立于裝置的單元。

我們來編寫一個名為FontSizes的小程式，該程式以類似于第3章中的NamedFontSizes程式的顯示開始，但随後顯示一些帶有數字點大小的文本，并使用裝置分辨率轉換為與裝置無關的單元：

public class FontSizesPage : ContentPage
{
    public FontSizesPage()
    {
        BackgroundColor = Color.White;
        StackLayout stackLayout = new StackLayout
        {
            HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.Center
        };
        // Do the NamedSize values.
        NamedSize[] namedSizes = 
        {
            NamedSize.Default, NamedSize.Micro, NamedSize.Small,
            NamedSize.Medium, NamedSize.Large
        };
        foreach (NamedSize namedSize in namedSizes)
        {
            double fontSize = Device.GetNamedSize(namedSize, typeof(Label));
            stackLayout.Children.Add(new Label
                {
                     Text = String.Format("Named Size = {0} ({1:F2})",
                                                             namedSize, fontSize),
                     FontSize = fontSize,
                     TextColor = Color.Black
                });
        }
        // Resolution in device-independent units per inch.
        double resolution = 160;
        // Draw horizontal separator line.
        stackLayout.Children.Add(
            new BoxView
            {
                 Color = Color.Accent,
                 HeightRequest = resolution / 80
            });
        // Do some numeric point sizes.
        int[] ptSizes = { 4, 6, 8, 10, 12 };
        foreach (double ptSize in ptSizes)
        {
            double fontSize = resolution * ptSize / 72;
            stackLayout.Children.Add(new Label
                {
                    Text = String.Format("Point Size = {0} ({1:F2})",
                                                   ptSize, fontSize),
                    FontSize = fontSize,
                    TextColor = Color.Black
                });
        }
        Content = stackLayout;
    }
}           

為了便于在三個螢幕之間進行比較，背景已統一設定為白色，标簽為黑色。 注意BoxView插入到兩個foreach塊之間的StackLayout中：HeightRequest設定使其與裝置無關的高度約為八十英寸，并且類似于水準線。

有趣的是，基于計算的結果視覺大小在平台之間比命名大小更一緻。 括号中的數字是裝置獨立單元中的數字FontSize值：