架構和BoxView
兩個簡單的矩形視圖通常用于示範目的：
BoxView是一個填充矩形。 它從View派生并定義了一個Color屬性，其預設設定為Color.Default，預設情況下是透明的。
架構顯示圍繞某些内容的矩形邊框。 架構通過ContentView從布局派生，從中繼承Content屬性。 Frame的内容可以是單個視圖或包含一堆視圖的布局。 從VisualElement中，Frame繼承了BackgroundColor屬性，該屬性在iPhone上是白色的，但在Android和Windows Phone上是透明的。 從Layout中，Frame繼承Padding屬性，将它初始化為20個機關，以給内容留出一點喘息空間。 架構本身定義了預設情況下為true的HasShadow屬性（但陰影僅在iOS裝置上顯示）以及預設情況下為透明但不影響iOS陰影的OutlineColor屬性，該陰影始終為黑色，并且在HasShadow為 設定為true。
架構輪廓和BoxView預設情況下都是透明的，是以你可能會有點不确定如何在不使用不同平台的顔色的情況下對它們着色。 一個不錯的選擇是Color.Accent，無論如何保證顯示。 或者，您可以控制着色背景以及架構輪廓和BoxView。
如果BoxView或Frame的大小沒有任何限制 - 也就是說，如果它不在StackLayout中，并且其HorizontalOptions和VerticalOptions設定為LayoutOptions-.Fill的預設值，則這些視圖會展開以填充其容器。
例如，下面是一個程式，其中心标簽設定為Frame的Content屬性：
點選(此處)折疊或打開
标簽以架構為中心，但架構填充了整個頁面，如果頁面沒有在所有邊上都填充20，您甚至可能無法清楚地看到架構：
要顯示居中的架構文本，您需要将Frame（而不是Label）上的HorizontalOptions和VerticalOptions屬性設定為LayoutOptions.Center：
現在，該架構将文本（但架構的20個單元的預設填充）包含在頁面的中心：
本章示例代碼中包含的FramedText版本可以自由地為每件事物提供自定義顔色：
結果在所有三個平台上看起來大緻相同：
嘗試将BoxView設定為ContentPage的Content屬性，如下所示：
一定要設定顔色屬性，以便您可以看到它。 BoxView會填充其容器的整個區域，就像Label使用預設的HorizontalOptions或VerticalOptions設定一樣：
它甚至是iOS狀态欄的底層！
現在嘗試設定BoxView的HorizontalOptions和VerticalOptions屬性
除了Fill之外的其他内容，如下面的代碼示例所示：
在這種情況下，BoxView将采用40機關平方的預設尺寸：
BoxView現在是40機關平方，因為BoxView将其WidthRequest和HeightRequest屬性初始化為40.這兩個屬性需要一點解釋：
VisualElement定義寬度和高度屬性，但這些屬性是隻讀的。
VisualElement還定義了可設定和可擷取的WidthRequest和HeightRequest屬性。通常，所有這些屬性都被初始化為-1（這實際上意味着它們是未定義的），但是某些View衍生物（如BoxView）會将WidthRequest和HeightRequest屬性設定為特定值。
在頁面組織完其子項的布局并呈現所有視覺效果後，“寬度”和“高度”屬性将訓示每個視圖的實際尺寸 - 視圖在螢幕上占用的區域。由于寬度和高度是隻讀的，是以僅供參考。 （第5章“處理大小”介紹了如何處理這些值。）
如果你想要一個視圖是一個特定的大小，你可以設定WidthRequest和HeightRequest屬性。但是，這些屬性表明（如他們的名字所示）要求的尺寸或首選尺寸。如果允許視圖填充其容器，則這些屬性将被忽略。
通過覆寫OnSizeRequest方法，BoxView将其預設大小設定為值40。如果沒有其他人對此問題有任何意見，您可以将這些設定視為BoxView希望的大小。您已經看到，當允許BoxView填充頁面時，忽略WidthRequest和HeightRequest。如果HorizontalOptions設定為LayoutOptions.Left，Center或Right，或者BoxView是水準StackLayout的子項，則WidthRequest将啟動。 HeightRequest行為相似。
以下是本章代碼中包含的SizedBoxView程式的版本：
現在我們得到一個具有特定大小和明确設定的顔色的BoxView：
讓我們在增強的顔色清單中使用Frame和BoxView。 ColorBlocks程式有一個頁面構造器，它幾乎與ReflectedColors中的構造器完全相同，除了它調用名為CreateColorView的方法而不是CreateColorLabel。 這是該方法：
CreateColorView方法傳回一個Frame，其中包含一個帶有訓示顔色的BoxView的水準StackLayout，用于指定顔色名稱的Label以及用于RGB合成和Hue，Saturation和Luminosity值的另外兩個Label視圖的另一個StackLayout。 RGB和HSL顯示對Color.Default值沒有意義，是以在這種情況下，内部StackLayout的IsVisible屬性設定為false。 StackLayout仍然存在，但在頁面呈現時忽略它。
該程式不知道哪個元素将決定每個顔色項目的高度 - BoxView，具有顔色名稱的标簽或具有RGB和HSL值的兩個Label視圖 - 是以它将确定所有Label視圖的中心。 正如你所看到的，BoxView在高度上展開以适應文本的高度：
現在這是一個可滾動的顔色清單，開始是我們可以引以為豪的事情。