BoxView

.NET 多平台應用程式介面（.NET MAUI） BoxView 繪製一個簡單的矩形或正方形，範圍為指定的寬度、高度與顏色。

BoxView 定義下列屬性：

  • Color，其類型為Color，用於定義BoxView的顏色。
  • CornerRadius，型別為 CornerRadius，用來定義BoxView的角半徑。 此屬性可設定為單一 double 均勻的圓角半徑值，或由 CornerRadius 四個 double 值定義的結構，分別套用於左上、右上、左下及右下 BoxView。

這些屬性由 BindableProperty 物件支援，這表示它們可以成為資料繫結的目標並且可以設定樣式。

備註

雖然 BoxView 可以模擬簡單的圖形，但更好的替代方案是使用 .NET MAUI Shapes 或 .NET MAUI Graphics。

建立 BoxView

要繪製矩形或正方形，請建立一個 BoxView 物件並設定其 Color、 、 WidthRequest及 HeightRequest 屬性。 你也可以選擇設定它的 CornerRadius 屬性。

以下 XAML 範例說明如何建立 BoxView：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:BasicBoxView"
             x:Class="BasicBoxView.MainPage">
    <BoxView Color="CornflowerBlue"
             CornerRadius="10"
             WidthRequest="160"
             HeightRequest="160"
             VerticalOptions="Center"
             HorizontalOptions="Center" />
</ContentPage>

在這個例子中，頁面的中央顯示出矢車菊藍色BoxView。

帶有圓角的 BoxView 截圖。

WidthRequest與HeightRequest屬性以裝置無關單位來衡量。

備註

A BoxView 也可以是 AbsoluteLayout 的子節點。 在此情況下，BoxView 的位置與大小皆是透過 LayoutBounds 附加的可綁定屬性來設定。

A BoxView 也可以被調整成類似特定寬度和粗細的線條。

用刷子填滿 BoxView

從 .NET 11 開始，BoxView 具有一個類型為 Brush 的 Fill 屬性。 設定 Fill 讓你可以用任何畫筆（包括漸層）來繪製 a BoxView ，而不受限於實體 Color 屬性。

以下 XAML 範例示範如何以 LinearGradientBrush 填滿 BoxView：

<BoxView Opacity="0.5"
         WidthRequest="200"
         HeightRequest="100"
         CornerRadius="60,20,20,60"
         HorizontalOptions="Center"
         VerticalOptions="Center">
    <BoxView.Fill>
        <LinearGradientBrush StartPoint="0,0"
                             EndPoint="1,0">
            <GradientStop Color="Purple"
                          Offset="0.0" />
            <GradientStop Color="Orange"
                          Offset="0.5" />
            <GradientStop Color="Red"
                          Offset="1.0" />
        </LinearGradientBrush>
    </BoxView.Fill>
</BoxView>

在此範例中，BoxView 被繪製為由紫到紅的水平線性漸層：

用線性漸層筆刷繪製的 BoxView 截圖。

或者一個 RadialGradientBrush：

<BoxView Opacity="0.5"
         WidthRequest="200"
         HeightRequest="100"
         HorizontalOptions="Center"
         VerticalOptions="Center">
    <BoxView.Fill>
        <RadialGradientBrush Center="0.5,0.5"
                             Radius="0.5">
            <GradientStop Color="Yellow"
                          Offset="0.0" />
            <GradientStop Color="Green"
                          Offset="1.0" />
        </RadialGradientBrush>
    </BoxView.Fill>
</BoxView>

在此範例中，該 BoxView 被塗成黃色至綠色的放射狀漸變：

以徑向漸層筆刷繪製的 BoxView 截圖。

Fill 屬性的優先順序高於 Color 屬性。 當兩者都已設定時，會使用由 Fill 指定的筆刷來繪製 BoxView。 如果之後將 Fill 設為 null 以清除其值，BoxView 就會恢復為以 Color 進行轉譯：

box.Color = Colors.Red;
box.Fill = new LinearGradientBrush(/* ... */); // Gradient is rendered.
box.Fill = null;                                // Red is rendered.
  • Last updated on