Xamarin.Forms Cadre

Télécharger l’exemple

La Xamarin.FormsFrame classe est une disposition utilisée pour encapsuler une vue avec une bordure qui peut être configurée avec la couleur, l’ombre et d’autres options. Les frames sont couramment utilisés pour créer des bordures autour des contrôles, mais peuvent être utilisés pour créer une interface utilisateur plus complexe. Pour plus d’informations, consultez Utilisation de l’image avancée.

La capture d’écran suivante montre Frame les contrôles sur iOS et Android :

La Frame classe définit les propriétés suivantes :

• BorderColor est une Color valeur qui détermine la couleur de la Frame bordure.
• CornerRadius est une float valeur qui détermine le rayon arrondi du coin.
• HasShadow est une bool valeur qui détermine si le cadre a une ombre portée.

Ces propriétés sont soutenues par BindableProperty des objets, ce qui signifie que peut Frame être la cible des liaisons de données.

Notes

Le HasShadow comportement de la propriété dépend de la plateforme. La valeur par défaut est true sur toutes les plateformes. Toutefois, sur UWP, les ombres portées ne sont pas affichées. Les ombres portées sont affichées sur Android et iOS, mais les ombres portées sur iOS sont plus sombres et occupent plus d’espace.

Créer un cadre

Un Frame peut être instancié en XAML. L’objet par défaut Frame a un arrière-plan blanc, une ombre portée et aucune bordure. Un Frame objet encapsule généralement un autre contrôle. L’exemple suivant montre un wrapper par défaut Frame un Label objet :

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

Un Frame peut également être créé dans le code :

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

Frame Les objets peuvent être personnalisés avec des coins arrondis, des bordures colorisées et des ombres portées en définissant des propriétés dans le code XAML. L’exemple suivant montre un objet personnalisé Frame :

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

Ces propriétés instance peuvent également être définies dans le code :

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

Utilisation avancée de frame

La Frame classe hérite de ContentView, ce qui signifie qu’elle peut contenir n’importe quel type d’objet, y compris les ViewLayout objets . Cette capacité permet d’utiliser pour créer des objets d’interface utilisateur complexes tels que des Frame cartes.

Créer un carte avec un frame

La combinaison d’un Frame objet avec un Layout objet tel qu’un StackLayout objet permet de créer une interface utilisateur plus complexe. La capture d’écran suivante montre un exemple carte, créé à l’aide d’un Frame objet :

Le code XAML suivant montre comment créer un carte avec la Frame classe :

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

Un carte peut également être créé dans le code :

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

Éléments ronds

La CornerRadius propriété du Frame contrôle peut être utilisée pour créer une image de cercle. La capture d’écran suivante montre un exemple d’image ronde, créée à l’aide d’un Frame objet :

Le code XAML suivant montre comment créer une image de cercle en 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>

Une image de cercle peut également être créée dans le code :

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

L’imageoutdoors.jpg doit être ajoutée à chaque projet de plateforme, et la façon dont cela est réalisé varie selon la plateforme. Pour plus d’informations, consultez Images dans Xamarin.Forms.

Notes

Les coins arrondis se comportent légèrement différemment d’une plateforme à l’autre. L’objet ImageMargin doit être la moitié de la différence entre la largeur de l’image et la largeur du cadre parent, et doit être négatif pour centrer l’image uniformément dans l’objet Frame . Toutefois, la largeur et la hauteur demandées ne sont pas garanties. Par conséquent, les Marginpropriétés et HeightRequestWidthRequest peuvent devoir être modifiées en fonction de la taille de votre image et d’autres choix de disposition.

Liens connexes

• Démonstrations de frame
• Images dans Xamarin.Forms