Поделиться через

Кадр

  • Статья

Многоплатформенный пользовательский интерфейс приложения .NET (.NET MAUI) Frame используется для упаковки представления или макета с границой, которая может быть настроена с помощью цвета, тени и других параметров. Кадры можно использовать для создания границ вокруг элементов управления, но также можно использовать для создания более сложного пользовательского интерфейса.

Внимание

Элемент Frame управления помечен как устаревший в .NET MAUI 9 и будет полностью удален в будущем выпуске. Элемент Border управления должен использоваться на его месте. Дополнительные сведения см. в разделе 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 Объединение объекта с макетом, таким как StackLayout создание более сложного пользовательского интерфейса.

В следующем 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>

На следующем снимка экрана показана примерная карточка:

Снимок экрана: карточка, созданная с помощью кадра.

Круглые элементы

Свойство 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>

На следующем снимка экрана показан пример изображения круга:

Снимок экрана: изображение круга, созданное с помощью кадра.