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

Xamarin.Forms Рамка

  • Статья

Класс Xamarin.FormsFrame — это макет, используемый для упаковки представления с границой, которая может быть настроена с цветом, тенью и другими параметрами. Кадры обычно используются для создания границ вокруг элементов управления, но их можно использовать для создания более сложного пользовательского интерфейса. Дополнительные сведения см. в разделе "Дополнительное использование кадра".

На следующем снимку экрана показаны Frame элементы управления в iOS и Android:

Примеры кадров в iOS и Android

Класс Frame определяет следующие свойства:

  • BorderColorColor— это значение, определяющее цвет Frame границы.
  • CornerRadius — это значение, определяющее округленный float радиус угла.
  • HasShadow — это значение, определяющее bool , имеет ли кадр тень падения.

Эти свойства поддерживаются BindableProperty объектами, то есть Frame могут быть целевыми объектами привязок данных.

Примечание.

Поведение HasShadow свойства зависит от платформы. Значение по умолчанию используется true на всех платформах. Однако при отрисовки тени падения UWP не отображаются. Тени отрисовываются как в Android, так и в iOS, но тени в iOS темнее и занимают больше места.

Создание кадра

Экземпляр Frame можно создать в XAML. Объект по умолчанию Frame имеет белый фон, тени падения и границы. Объект Frame обычно упаковывает другой элемент управления. В следующем примере показана Label оболочка объекта по умолчаниюFrame:

<Frame>
  <Label Text="Example" />
</Frame>

Можно Frame также создать в коде:

Frame defaultFrame = new Frame
{
    Content = new Label { Text = "Example" }
};

Frame объекты можно настроить с круглыми углами, цветными границами и теньми, задав свойства в XAML. В следующем примере показан настраиваемый Frame объект:

<Frame BorderColor="Orange"
       CornerRadius="10"
       HasShadow="True">
  <Label Text="Example" />
</Frame>

Эти свойства экземпляра также можно задать в коде:

Frame frame = new Frame
{
    BorderColor = Color.Orange,
    CornerRadius = 10,
    HasShadow = true,
    Content = new Label { Text = "Example" }
};

Расширенное использование кадра

Класс Frame наследует от ContentView, что означает, что он может содержать любой View тип объекта, включая Layout объекты. Эта возможность позволяет Frame использовать для создания сложных объектов пользовательского интерфейса, таких как карточки.

Создание карточки с кадром

Frame Объединение объекта с Layout объектом, таким как StackLayout объект, позволяет создавать более сложный пользовательский интерфейс. На следующем снимка экрана показан пример карточки, созданной Frame с помощью объекта:

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

В следующем XAML показано, как создать карточку с классом Frame :

<Frame BorderColor="Gray"
       CornerRadius="5"
       Padding="8">
  <StackLayout>
    <Label Text="Card Example"
           FontSize="Medium"
           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 cardFrame = new Frame
{
    BorderColor = Color.Gray,
    CornerRadius = 5,
    Padding = 8,
    Content = new StackLayout
    {
        Children =
        {
            new Label
            {
                Text = "Card Example",
                FontSize = Device.GetNamedSize(NamedSize.Medium, typeof(Label)),
                FontAttributes = FontAttributes.Bold
            },
            new BoxView
            {
                Color = Color.Gray,
                HeightRequest = 2,
                HorizontalOptions = LayoutOptions.Fill
            },
            new Label
            {
                Text = "Frames can wrap more complex layouts to create more complex UI components, such as this card!"
            }
        }
    }
};

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

Свойство CornerRadius Frame элемента управления можно использовать для создания изображения круга. На следующем снимка экрана показан пример круглого изображения, созданного с помощью Frame объекта:

В следующем XAML показано, как создать изображение круга в XAML:

<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 circleImageFrame = new Frame
{
    Margin = 10,
    BorderColor = Color.Black,
    CornerRadius = 50,
    HeightRequest = 60,
    WidthRequest = 60,
    IsClippedToBounds = true,
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.Center,
    Content = new Image
    {
        Source = ImageSource.FromFile("outdoors.jpg"),
        Aspect = Aspect.AspectFill,
        Margin = -20,
        HeightRequest = 100,
        WidthRequest = 100
    }
};

Изображение outdoors.jpg должно быть добавлено в каждый проект платформы, и как это достигается, зависит от платформы. Дополнительные сведения см. в разделе "Изображения".Xamarin.Forms

Примечание.

Округленные угловые ведут себя немного по-разному на разных платформах. Margin Объект Image должен быть половиной разницы между шириной изображения и шириной родительского кадра и должен быть отрицательным, чтобы центрировать изображение равномерно внутри Frame объекта. Однако запрошенная ширина и высота не гарантируется, поэтому MarginHeightRequest WidthRequest свойства могут быть изменены на основе размера изображения и других вариантов макета.