Xamarin.Forms Ramki

  • Artykuł

Download Sample Pobieranie przykładu

Klasa Xamarin.FormsFrame jest układem służącym do zawijania widoku z obramowaniem, które można skonfigurować za pomocą kolorów, cieni i innych opcji. Ramki są często używane do tworzenia obramowań wokół kontrolek, ale mogą służyć do tworzenia bardziej złożonego interfejsu użytkownika. Aby uzyskać więcej informacji, zobacz Zaawansowane użycie ramki.

Poniższy zrzut ekranu przedstawia Frame kontrolki w systemach iOS i Android:

Klasa Frame definiuje następujące właściwości:

  • BorderColor jest wartością Color , która określa kolor obramowania Frame .
  • CornerRadius jest wartością float , która określa zaokrąglony promień rogu.
  • HasShadow jest wartością określającą bool , czy ramka ma cień.

Te właściwości są wspierane przez BindableProperty obiekty, co oznacza, że Frame może być obiektem docelowym powiązań danych.

Uwaga

Zachowanie HasShadow właściwości jest zależne od platformy. Wartość domyślna znajduje się true na wszystkich platformach. Jednak w przypadku cieni upuszczania platformy UWP nie są renderowane. Cienie upuszczania są renderowane zarówno w systemach Android, jak i iOS, ale cienie w systemie iOS są ciemniejsze i zajmują więcej miejsca.

Tworzenie ramki

Wystąpienie elementu można Frame utworzyć w języku XAML. Obiekt domyślny Frame ma białe tło, cień i bez obramowania. Frame Obiekt zazwyczaj opakowuje inną kontrolkę. W poniższym przykładzie przedstawiono domyślne Frame zawijanie Label obiektu:

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

Element Frame można również utworzyć w kodzie:

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

Frame Obiekty można dostosować za pomocą zaokrąglonych narożników, kolorowanych obramowań i cieni upuszczania, ustawiając właściwości w języku XAML. W poniższym przykładzie pokazano Frame dostosowany obiekt:

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

Te właściwości wystąpienia można również ustawić w kodzie:

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

Zaawansowane użycie ramek

Klasa Frame dziedziczy z ContentViewklasy , co oznacza, że może zawierać dowolny typ View obiektu, w tym Layout obiekty. Ta możliwość umożliwia tworzenie złożonych obiektów interfejsu Frame użytkownika, takich jak karty.

Tworzenie karty z ramką

Połączenie Frame obiektu z obiektem Layout , takim jak StackLayout obiekt, umożliwia utworzenie bardziej złożonego interfejsu użytkownika. Poniższy zrzut ekranu przedstawia przykładową kartę utworzoną Frame przy użyciu obiektu:

Poniższy kod XAML pokazuje, jak utworzyć kartę z klasą 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>

Można również utworzyć kartę w kodzie:

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!"
            }
        }
    }
};

Elementy okrągłe

Właściwość CornerRadius kontrolki Frame może służyć do tworzenia obrazu okręgu. Poniższy zrzut ekranu przedstawia przykład okrągłego obrazu utworzonego Frame przy użyciu obiektu:

Poniższy kod XAML pokazuje, jak utworzyć obraz okręgowy w języku 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>

Obraz okręgowy można również utworzyć w kodzie:

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
    }
};

Obraz outdoors.jpg należy dodać do każdego projektu platformy i sposób, w jaki jest to osiągane, różni się w zależności od platformy. Aby uzyskać więcej informacji, zobacz Obrazy w pliku Xamarin.Forms.

Uwaga

Zaokrąglone rogi zachowują się nieco inaczej na różnych platformach. Obiekt ImageMargin powinien mieć połowę różnicy między szerokością obrazu a szerokością ramki nadrzędnej i powinien być ujemny, aby wyrównać obraz równomiernie w obrębie Frame obiektu. Jednak żądana szerokość i wysokość nie są gwarantowane, więc MarginHeightRequest może być konieczne zmianę właściwości i WidthRequest na podstawie rozmiaru obrazu i innych opcji układu.