Lijst

De .NET Multi-platform App UI (.NET MAUI) Frame wordt gebruikt om een view of lay-out te verpakken met een rand die kan worden geconfigureerd met kleur, schaduw en andere opties. Frames kunnen worden gebruikt om randen rond besturingselementen te maken, maar kunnen ook worden gebruikt om een complexere gebruikersinterface te maken.

Belangrijk

De Frame controle is gemarkeerd als verouderd in .NET MAUI 9 en wordt volledig verwijderd in een toekomstige release. Het Border besturingselement moet ter vervanging gebruikt worden. Voor meer informatie, zie Rand.

De klasse Frame definieert de volgende eigenschappen:

• BorderColor, van het type Color, bepaalt de kleur van de Frame-rand.
• CornerRadius, van het type float, bepaalt de afgeronde straal van de hoek.
• HasShadow, van het type bool, bepaalt of het frame een slagschaduw heeft.

Deze eigenschappen worden ondersteund door BindableProperty objecten, wat betekent dat ze doelen van gegevensbindingen kunnen zijn en gestijld kunnen zijn.

De Frame-klasse neemt over van ContentView, die een Content bindbare eigenschap biedt. De eigenschap Content is de ContentProperty van de Frame-klasse en hoeft daarom niet expliciet vanuit XAML te worden ingesteld.

Notitie

De Frame klasse bestond in Xamarin.Forms en is aanwezig in .NET MAUI voor gebruikers die hun apps van Xamarin.Forms migreren naar .NET MAUI. Als u een nieuwe .NET MAUI-app bouwt, is het raadzaam om in plaats daarvan Border te gebruiken en schaduwen in te stellen met behulp van de Shadow bindbare eigenschap op VisualElement. Zie Rand en Schaduwvoor meer informatie.

Een frame maken

Een Frame-object wikkelt doorgaans een ander controle-element in, zoals een Label:

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

Het uiterlijk van Frame objecten kan worden aangepast door eigenschappen in te stellen:

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

De equivalente C#-code is:

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

In de volgende schermopname ziet u het voorbeeld Frame:

Een kaart maken met een frame

Door een Frame-object te combineren met een indeling zoals een StackLayout kunt u complexere gebruikersinterface maken.

In de volgende XAML ziet u hoe u een kaart maakt met een 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>

In de volgende schermopname ziet u de voorbeeldkaart:

Ronde elementen

De eigenschap CornerRadius van het besturingselement Frame is één benadering voor het maken van een cirkelafbeelding. In de volgende XAML ziet u hoe u een cirkelafbeelding maakt met een 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>

In de volgende schermopname ziet u de voorbeeldcirkelafbeelding: