Xamarin.Forms Rahmen

  • Artikel

Beispiel herunterladen Das Beispiel herunterladen

Die Xamarin.FormsFrame -Klasse ist ein Layout, das zum Umschließen einer Ansicht mit einem Rahmen verwendet wird, der mit Farbe, Schatten und anderen Optionen konfiguriert werden kann. Frames werden häufig verwendet, um Rahmen für Steuerelemente zu erstellen, können aber verwendet werden, um eine komplexere Benutzeroberfläche zu erstellen. Weitere Informationen finden Sie unter Erweiterte Framenutzung.

Der folgende Screenshot zeigt Frame Steuerelemente unter iOS und Android:

Die Frame-Klasse definiert die folgenden Eigenschaften:

  • BorderColor ist ein Color Wert, der die Farbe des Frame Rahmens bestimmt.
  • CornerRadius ist ein float Wert, der den abgerundeten Radius der Ecke bestimmt.
  • HasShadow ist ein bool Wert, der bestimmt, ob der Frame einen Schlagschatten aufweist.

Diese Eigenschaften werden von BindableProperty -Objekten unterstützt, was bedeutet, dass das Frame Ziel von Datenbindungen sein kann.

Hinweis

Das HasShadow Eigenschaftenverhalten ist plattformabhängig. Der Standardwert ist true auf allen Plattformen. Auf UWP werden jedoch keine Schlagschatten gerendert. Schlagschatten werden sowohl unter Android als auch unter iOS gerendert, aber Schlagschatten unter iOS sind dunkler und nehmen mehr Platz ein.

Erstellen eines Frames

Ein Frame kann in XAML instanziiert werden. Das Standardobjekt Frame hat einen weißen Hintergrund, einen Schlagschatten und keinen Rahmen. Ein Frame -Objekt umschließt in der Regel ein anderes Steuerelement. Das folgende Beispiel zeigt, dass ein -Objekt standardmäßig Frame umschlossen wird Label :

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

Ein Frame kann auch im Code erstellt werden:

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

Frame -Objekte können mit abgerundeten Ecken, farbigen Rahmen und Schlagschatten angepasst werden, indem Eigenschaften im XAML-Code festgelegt werden. Das folgende Beispiel zeigt ein benutzerdefiniertes Frame -Objekt:

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

Diese instance Eigenschaften können auch im Code festgelegt werden:

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

Erweiterte Framenutzung

Die Frame -Klasse erbt von ContentView, was bedeutet, dass sie einen beliebigen Objekttyp View einschließlich Layout -Objekten enthalten kann. Diese Möglichkeit ermöglicht es, komplexe Frame UI-Objekte wie Karten zu erstellen.

Erstellen einer Karte mit einem Frame

Die Kombination eines Frame -Objekts mit einem Layout -Objekt, z. B. einem StackLayout -Objekt, ermöglicht die Erstellung einer komplexeren Benutzeroberfläche. Der folgende Screenshot zeigt ein Beispiel Karte, das mit einem Frame -Objekt erstellt wurde:

Der folgende XAML-Code zeigt, wie Sie eine Karte mit der Frame -Klasse erstellen:

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

Ein Karte kann auch im Code erstellt werden:

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

Runde Elemente

Die CornerRadius -Eigenschaft des Frame -Steuerelements kann verwendet werden, um ein Kreisbild zu erstellen. Der folgende Screenshot zeigt ein Beispiel für ein rundes Bild, das mit einem Frame -Objekt erstellt wurde:

Der folgende XAML-Code zeigt, wie Sie ein Kreisbild in XAML erstellen:

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

Ein Kreisbild kann auch im Code erstellt werden:

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

Das outdoors.jpg-Image muss jedem Plattformprojekt hinzugefügt werden, und wie dies erreicht wird, variiert je nach Plattform. Weitere Informationen finden Sie unter Images in Xamarin.Forms.

Hinweis

Abgerundete Ecken verhalten sich plattformübergreifend etwas anders. Das Image Objekt sollte die Hälfte des Unterschieds zwischen der Bildbreite und der breite des übergeordneten Rahmens Margin ausmachen und negativ sein, um das Bild gleichmäßig innerhalb des Frame Objekts zu zentrieren. Die angeforderte Breite und Höhe sind jedoch nicht garantiert, sodass die MarginEigenschaften , HeightRequest und WidthRequest möglicherweise basierend auf Ihrer Bildgröße und anderen Layoutoptionen geändert werden müssen.