BoxView

.NET 多平台应用 UI（.NET MAUI）BoxView 可以绘制具有指定宽度、高度和颜色的简单矩形或正方形。

BoxView 定义以下属性：

  • Color，类型为 Color，用于定义 BoxView 的颜色。
  • CornerRadius，类型为CornerRadius，用于定义BoxView的圆角半径。 此属性可以设置为单个double统一的角半径值，或由应用于顶部、右上、左下和右下角CornerRadius的四double个BoxView值定义的结构。

这些属性由 BindableProperty 对象提供支持，表示它们可以是数据绑定的目标，并可以设置样式。

注释

虽然 BoxView 可以模拟简单的图形，但更好的替代方法是使用 .NET MAUI 形状或 .NET MAUI 图形。

创建 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 的屏幕截图。

属性WidthRequestHeightRequest以与设备无关的单位进行度量。

注释

BoxView 也可以是 AbsoluteLayout 的子元素。 在这种情况下，使用BoxView附加的可绑定属性来设置LayoutBounds的位置和大小。

还可以调整 A BoxView 的大小，使其类似于特定宽度和粗细的线条。

用画笔填充 BoxView

从 .NET 11 开始，BoxView公开Fill类型属性Brush。 设置 Fill 后，可以使用任何画笔（包括渐变）来绘制 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