通过

Frame

  • 项目

.NET Multi-platform App UI (.NET MAUI) Frame 用于包装视图或布局，其边框可以使用颜色、阴影和其他选项进行配置。 框架可用于创建控件周围的边框，但也可用于创建更复杂的 UI。

重要

Frame 控件在 .NET MAUI 9 中标记为已过时，并将在未来版本中完全删除。 应使用 Border 控件代替它。 有关详细信息，请参阅 边框。

Frame 类定义以下属性：

  • BorderColor，类型为 Color，确定 Frame 边框的颜色。
  • CornerRadius，类型为 float，确定拐角的圆角半径。
  • HasShadow，类型为 bool，确定框架是否有投影。

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

Frame 类继承自 ContentView，后者提供 Content 可绑定属性。 由于 Content 属性是 ContentProperty 类的 Frame，因此不需要通过 XAML 显式设置。

注意

Frame 类位于 Xamarin.Forms 中，并显示在 .NET MAUI 中，适用于将应用从 Xamarin.Forms 迁移到 .NET MAUI 的用户。 如果要生成新的 .NET MAUI 应用，建议改用 Border，并使用 Shadow 上的 VisualElement 可绑定属性设置阴影。 有关详细信息，请参阅边框和阴影。

创建框架

Frame 对象通常包装另一个控件，如 Label：

<Frame>
  <Label Text="Frame wrapped around a Label" />
</Frame>

可以通过设置属性来自定义 Frame 对象的外观：

<Frame BorderColor="Gray"
       CornerRadius="10">
  <Label Text="Frame wrapped around a Label" />
</Frame>

等效 C# 代码如下：

Frame frame = new Frame
{
    BorderColor = Colors.Gray,
    CornerRadius = 10,
    Content = new Label { Text = "Frame wrapped around a Label" }
};

以下屏幕截图显示了示例 Frame：

Frame 示例的屏幕截图。

使用框架创建卡片

将 Frame 对象与 StackLayout 等布局相结合，可以创建更复杂的 UI。

以下 XAML 演示如何使用 Frame 创建卡片：

<Frame BorderColor="Gray"
       CornerRadius="5"
       Padding="8">
  <StackLayout>
    <Label Text="Card Example"
           FontSize="14"
           FontAttributes="Bold" />
    <BoxView Color="Gray"
             HeightRequest="2"
             HorizontalOptions="Fill" />
    <Label Text="Frames can wrap more complex layouts to create more complex UI components, such as this card!"/>
  </StackLayout>
</Frame>

以下屏幕截图显示了示例卡片：

使用 Frame 创建的卡片的屏幕截图。

圆形元素

CornerRadius 控件的 Frame 属性是一种创建圆形图像的方法。 以下 XAML 演示如何使用 Frame 创建圆形图像：

<Frame Margin="10"
       BorderColor="Black"
       CornerRadius="50"
       HeightRequest="60"
       WidthRequest="60"
       IsClippedToBounds="True"
       HorizontalOptions="Center"
       VerticalOptions="Center">
  <Image Source="outdoors.jpg"
         Aspect="AspectFill"
         Margin="-20"
         HeightRequest="100"
         WidthRequest="100" />
</Frame>

以下屏幕截图显示了示例圆形图像：

使用 Frame 创建的圆形图像的屏幕截图。