Frame

A interface do usuário do aplicativo multiplataforma .NET (.NET MAUI) Frame é usada para encapsular um modo de exibição ou layout com uma borda que pode ser configurada com cor, sombra e outras opções. Os quadros podem ser usados para criar bordas ao redor de controles, mas também podem ser usados para criar uma interface do usuário mais complexa.

A Frame classe define as seguintes propriedades:

• BorderColor, do tipo Color, determina a cor da Frame borda.
• CornerRadius, do tipo float, determina o raio arredondado do canto.
• HasShadow, do tipo bool, determina se o quadro tem uma sombra projetada.

Essas propriedades são apoiadas por BindableProperty objetos, o que significa que elas podem ser alvos de associações de dados e estilizadas.

A Frame classe herda de ContentView, que fornece uma Content propriedade vinculável. A Content propriedade é a da Frame classe e, portanto, não precisa ser definida explicitamente a ContentProperty partir de XAML.

Observação

A Frame classe existia no Xamarin.Forms e está presente no .NET MAUI para usuários que estão migrando seus aplicativos do Xamarin.Forms para o .NET MAUI. Se você estiver criando um novo aplicativo .NET MAUI, é recomendável usá-lo Border e definir sombras usando a Shadow propriedade bindable em VisualElement. Para obter mais informações, consulte Borda e sombra.

Criar um quadro

Um Frame objeto normalmente encapsula outro controle, como um Label:

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

A aparência dos Frame objetos pode ser personalizada definindo propriedades:

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

Este é o código C# equivalente:

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

A captura de tela a seguir mostra o exemplo Frame:

Criar um cartão com um quadro

A combinação de um objeto com um layout como um FrameStackLayout permite a criação de uma interface do usuário mais complexa.

O XAML a seguir mostra como criar um cartão com um 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>

A captura de tela a seguir mostra o cartão de exemplo:

Elementos redondos

A CornerRadius propriedade do Frame controle é uma abordagem para criar uma imagem de círculo. O XAML a seguir mostra como criar uma imagem de círculo com um 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>

A captura de tela a seguir mostra a imagem de círculo de exemplo: