Xamarin.Forms
Mise en forme de Xamarin
Recherche…
ContentPresenter
Un gestionnaire de disposition pour les vues modélisées. Utilisé dans un ControlTemplate pour marquer l'emplacement du contenu à présenter.
ContentView
Un élément avec un seul contenu. ContentView a très peu d'utilisation. Son but est de servir de classe de base pour les vues composées définies par l'utilisateur.
XAML
<ContentView>
<Label Text="Hi, I'm a simple Label inside of a simple ContentView"
HorizontalOptions="Center"
VerticalOptions="Center"/>
</ContentView>
Code
var contentView = new ContentView {
Content = new Label {
Text = "Hi, I'm a simple Label inside of a simple ContentView",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center
}
};
Cadre
Un élément contenant un seul enfant, avec des options de cadrage. Frame ont un défaut Xamarin.Forms.Layout.Padding de 20.
XAML
<Frame>
<Label Text="I've been framed!"
HorizontalOptions="Center"
VerticalOptions="Center" />
</Frame>
Code
var frameView = new Frame {
Content = new Label {
Text = "I've been framed!",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center
},
OutlineColor = Color.Red
};
ScrollView
Un élément capable de défiler si son Content requis.
ScrollView contient des dispositions et leur permet de faire défiler l'écran. ScrollView est également utilisé pour permettre aux vues de se déplacer automatiquement dans la partie visible de l'écran lorsque le clavier est affiché.
Remarque: les ScrollViews ne doivent pas être imbriquées. De plus, les ScrollViews ne doivent pas être imbriquées avec d'autres contrôles fournissant un défilement, tels que ListView et WebView .
Un ScrollView est facile à définir. Dans XAML:
<ContentPage.Content>
<ScrollView>
<StackLayout>
<BoxView BackgroundColor="Red" HeightRequest="600" WidthRequest="150" />
<Entry />
</StackLayout>
</ScrollView>
</ContentPage.Content>
La même définition dans le code:
var scroll = new ScrollView();
Content = scroll;
var stack = new StackLayout();
stack.Children.Add(new BoxView { BackgroundColor = Color.Red, HeightRequest = 600, WidthRequest = 600 });
stack.Children.Add(new Entry());
TemplatedView
Un élément qui affiche le contenu avec un modèle de contrôle et la classe de base pour ContentView .
AbsoluteLayout
AbsoluteLayout positionne et dimensionne les éléments enfants proportionnellement à sa propre taille et position ou à des valeurs absolues. Les vues enfants peuvent être positionnées et dimensionnées à l'aide de valeurs proportionnelles ou de valeurs statiques, et les valeurs proportionnelles et statiques peuvent être mélangées.
Une définition d'un AbsoluteLayout dans XAML ressemble à ceci:
<AbsoluteLayout>
<Label Text="I'm centered on iPhone 4 but no other device"
AbsoluteLayout.LayoutBounds="115,150,100,100" LineBreakMode="WordWrap" />
<Label Text="I'm bottom center on every device."
AbsoluteLayout.LayoutBounds=".5,1,.5,.1" AbsoluteLayout.LayoutFlags="All"
LineBreakMode="WordWrap" />
<BoxView Color="Olive" AbsoluteLayout.LayoutBounds="1,.5, 25, 100"
AbsoluteLayout.LayoutFlags="PositionProportional" />
<BoxView Color="Red" AbsoluteLayout.LayoutBounds="0,.5,25,100"
AbsoluteLayout.LayoutFlags="PositionProportional" />
<BoxView Color="Blue" AbsoluteLayout.LayoutBounds=".5,0,100,25"
AbsoluteLayout.LayoutFlags="PositionProportional" />
<BoxView Color="Blue" AbsoluteLayout.LayoutBounds=".5,0,1,25"
AbsoluteLayout.LayoutFlags="PositionProportional, WidthProportional" />
</AbsoluteLayout>
La même disposition ressemblerait à ceci dans le code:
Title = "Absolute Layout Exploration - Code";
var layout = new AbsoluteLayout();
var centerLabel = new Label {
Text = "I'm centered on iPhone 4 but no other device.",
LineBreakMode = LineBreakMode.WordWrap};
AbsoluteLayout.SetLayoutBounds (centerLabel, new Rectangle (115, 159, 100, 100));
// No need to set layout flags, absolute positioning is the default
var bottomLabel = new Label { Text = "I'm bottom center on every device.", LineBreakMode = LineBreakMode.WordWrap };
AbsoluteLayout.SetLayoutBounds (bottomLabel, new Rectangle (.5, 1, .5, .1));
AbsoluteLayout.SetLayoutFlags (bottomLabel, AbsoluteLayoutFlags.All);
var rightBox = new BoxView{ Color = Color.Olive };
AbsoluteLayout.SetLayoutBounds (rightBox, new Rectangle (1, .5, 25, 100));
AbsoluteLayout.SetLayoutFlags (rightBox, AbsoluteLayoutFlags.PositionProportional);
var leftBox = new BoxView{ Color = Color.Red };
AbsoluteLayout.SetLayoutBounds (leftBox, new Rectangle (0, .5, 25, 100));
AbsoluteLayout.SetLayoutFlags (leftBox, AbsoluteLayoutFlags.PositionProportional);
var topBox = new BoxView{ Color = Color.Blue };
AbsoluteLayout.SetLayoutBounds (topBox, new Rectangle (.5, 0, 100, 25));
AbsoluteLayout.SetLayoutFlags (topBox, AbsoluteLayoutFlags.PositionProportional);
var twoFlagsBox = new BoxView{ Color = Color.Blue };
AbsoluteLayout.SetLayoutBounds (topBox, new Rectangle (.5, 0, 1, 25));
AbsoluteLayout.SetLayoutFlags (topBox, AbsoluteLayoutFlags.PositionProportional | AbsoluteLayout.WidthProportional);
layout.Children.Add (bottomLabel);
layout.Children.Add (centerLabel);
layout.Children.Add (rightBox);
layout.Children.Add (leftBox);
layout.Children.Add (topBox);
Le contrôle AbsoluteLayout de Xamarin.Forms vous permet de spécifier exactement à l’écran les éléments enfants, ainsi que leur taille et leur forme (limites).
Il existe différentes manières de définir les limites des éléments enfants en fonction de l'énumération AbsoluteLayoutFlags utilisée pendant ce processus. L'énumération AbsoluteLayoutFlags contient les valeurs suivantes:
- Tous : Toutes les dimensions sont proportionnelles.
- HeightProportional : la hauteur est proportionnelle à la disposition.
- Aucun : Aucune interprétation n'est effectuée.
- PositionProportional : Combine XProportional et YProportional.
- SizeProportional : Combine WidthProportional et HeightProportional.
- WidthProportional : La largeur est proportionnelle à la disposition.
- XProportional : la propriété X est proportionnelle à la disposition.
- YProportional : la propriété Y est proportionnelle à la disposition.
Le processus de travail avec la mise en page du conteneur AbsoluteLayout peut sembler un peu contre-intuitif au début, mais avec un peu d’utilisation, il deviendra familier. Une fois que vous avez créé vos éléments enfants, pour les définir dans une position absolue dans le conteneur, vous devez suivre trois étapes. Vous souhaiterez définir les indicateurs assignés aux éléments à l'aide de la méthode AbsoluteLayout.SetLayoutFlags () . Vous voudrez également utiliser la méthode AbsoluteLayout.SetLayoutBounds () pour donner aux éléments leurs limites. Enfin, vous voudrez ajouter les éléments enfants à la collection Children. Étant donné que Xamarin.Forms est une couche d'abstraction entre Xamarin et les implémentations spécifiques aux périphériques, les valeurs de position peuvent être indépendantes des pixels du périphérique. C'est là que les indicateurs de disposition mentionnés précédemment entrent en jeu. Vous pouvez choisir comment le processus de mise en page des contrôles Xamarin.Forms doit interpréter les valeurs que vous définissez.
la grille
Une présentation contenant des vues organisées en lignes et en colonnes.
Ceci est une définition de Grid typique dans XAML.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="2*" />
<RowDefinition Height="*" />
<RowDefinition Height="200" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ContentView Grid.Row="0" Grid.Column="0"/>
<ContentView Grid.Row="1" Grid.Column="0"/>
<ContentView Grid.Row="2" Grid.Column="0"/>
<ContentView Grid.Row="0" Grid.Column="1"/>
<ContentView Grid.Row="1" Grid.Column="1"/>
<ContentView Grid.Row="2" Grid.Column="1"/>
</Grid>
La même Grid définie dans le code ressemble à ceci:
var grid = new Grid();
grid.RowDefinitions.Add (new RowDefinition { Height = new GridLength(2, GridUnitType.Star) });
grid.RowDefinitions.Add (new RowDefinition { Height = new GridLength (1, GridUnitType.Star) });
grid.RowDefinitions.Add (new RowDefinition { Height = new GridLength(200)});
grid.ColumnDefinitions.Add (new ColumnDefinition{ Width = new GridLength (200) });
Pour ajouter des éléments à la grille: Dans XAML :
<Grid>
<--DEFINITIONS...--!>
<ContentView Grid.Row="0" Grid.Column="0"/>
<ContentView Grid.Row="1" Grid.Column="0"/>
<ContentView Grid.Row="2" Grid.Column="0"/>
<ContentView Grid.Row="0" Grid.Column="1"/>
<ContentView Grid.Row="1" Grid.Column="1"/>
<ContentView Grid.Row="2" Grid.Column="1"/>
</Grid>
En code C #:
var grid = new Grid();
//DEFINITIONS...
var topLeft = new Label { Text = "Top Left" };
var topRight = new Label { Text = "Top Right" };
var bottomLeft = new Label { Text = "Bottom Left" };
var bottomRight = new Label { Text = "Bottom Right" };
grid.Children.Add(topLeft, 0, 0);
grid.Children.Add(topRight, 0, 1);
grid.Children.Add(bottomLeft, 1, 0);
grid.Children.Add(bottomRight, 1, 1);
Pour la Height et la Width plusieurs unités sont disponibles.
- Auto - taille automatiquement pour adapter le contenu de la ligne ou de la colonne. Spécifié comme GridUnitType.Auto en C # ou comme Auto dans XAML.
- Proportionnel - dimensionne les colonnes et les lignes en proportion de l'espace restant. Spécifié comme valeur et GridUnitType.Star en C # et en tant que # * dans XAML, # étant la valeur souhaitée. Si vous spécifiez une ligne / colonne avec *, cela remplira l'espace disponible.
- Absolute - dimensionne les colonnes et les lignes avec des valeurs de hauteur et de largeur spécifiques et fixes. Spécifié comme valeur et GridUnitType.Absolute en C # et en # dans XAML, # étant la valeur souhaitée.
Remarque: Les valeurs de largeur des colonnes sont définies par défaut sur Auto dans Xamarin.Forms, ce qui signifie que la largeur est déterminée par la taille des enfants. Notez que cela diffère de l'implémentation de XAML sur les plates-formes Microsoft, où la largeur par défaut est *, ce qui remplira l'espace disponible.
Disposition relative
Une Layout qui utilise des Constraints pour mettre en forme ses enfants.
RelativeLayout permet de positionner et de dimensionner les vues relatives aux propriétés de la présentation ou des vues frères. Contrairement à AbsoluteLayout , RelativeLayout n’a pas le concept de l’ancre mobile et n’a pas de possibilité de positionner les éléments par rapport aux bords inférieur ou droit de la mise en page. RelativeLayout prend en charge le positionnement d'éléments en dehors de ses propres limites.
Un RelativeLayout dans XAML, est comme ceci:
<RelativeLayout>
<BoxView Color="Red" x:Name="redBox"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Height,Factor=.15,Constant=0}"
RelativeLayout.WidthConstraint="{ConstraintExpression
Type=RelativeToParent,Property=Width,Factor=1,Constant=0}"
RelativeLayout.HeightConstraint="{ConstraintExpression
Type=RelativeToParent,Property=Height,Factor=.8,Constant=0}" />
<BoxView Color="Blue"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView,
ElementName=redBox,Property=Y,Factor=1,Constant=20}"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,
ElementName=redBox,Property=X,Factor=1,Constant=20}"
RelativeLayout.WidthConstraint="{ConstraintExpression
Type=RelativeToParent,Property=Width,Factor=.5,Constant=0}"
RelativeLayout.HeightConstraint="{ConstraintExpression
Type=RelativeToParent,Property=Height,Factor=.5,Constant=0}" />
</RelativeLayout>
La même disposition peut être réalisée avec ce code:
layout.Children.Add (redBox, Constraint.RelativeToParent ((parent) => {
return parent.X;
}), Constraint.RelativeToParent ((parent) => {
return parent.Y * .15;
}), Constraint.RelativeToParent((parent) => {
return parent.Width;
}), Constraint.RelativeToParent((parent) => {
return parent.Height * .8;
}));
layout.Children.Add (blueBox, Constraint.RelativeToView (redBox, (Parent, sibling) => {
return sibling.X + 20;
}), Constraint.RelativeToView (blueBox, (parent, sibling) => {
return sibling.Y + 20;
}), Constraint.RelativeToParent((parent) => {
return parent.Width * .5;
}), Constraint.RelativeToParent((parent) => {
return parent.Height * .5;
}));
StackLayout
StackLayout organise les vues dans une ligne unidimensionnelle ("pile"), horizontalement ou verticalement. Views dans un StackLayout peuvent être dimensionnées en fonction de l'espace dans la mise en page à l'aide des options de présentation. Le positionnement est déterminé par les vues de commande qui ont été ajoutées à la mise en page et aux options de disposition des vues.
Utilisation dans XAML
<StackLayout>
<Label Text="This will be on top" />
<Button Text="This will be on the bottom" />
</StackLayout>
Utilisation dans le code
StackLayout stackLayout = new StackLayout
{
Spacing = 0,
VerticalOptions = LayoutOptions.FillAndExpand,
Children =
{
new Label
{
Text = "StackLayout",
HorizontalOptions = LayoutOptions.Start
},
new Label
{
Text = "stacks its children",
HorizontalOptions = LayoutOptions.Center
},
new Label
{
Text = "vertically",
HorizontalOptions = LayoutOptions.End
},
new Label
{
Text = "by default,",
HorizontalOptions = LayoutOptions.Center
},
new Label
{
Text = "but horizontal placement",
HorizontalOptions = LayoutOptions.Start
},
new Label
{
Text = "can be controlled with",
HorizontalOptions = LayoutOptions.Center
},
new Label
{
Text = "the HorizontalOptions property.",
HorizontalOptions = LayoutOptions.End
},
new Label
{
Text = "An Expand option allows one or more children " +
"to occupy the an area within the remaining " +
"space of the StackLayout after it's been sized " +
"to the height of its parent.",
VerticalOptions = LayoutOptions.CenterAndExpand,
HorizontalOptions = LayoutOptions.End
},
new StackLayout
{
Spacing = 0,
Orientation = StackOrientation.Horizontal,
Children =
{
new Label
{
Text = "Stacking",
},
new Label
{
Text = "can also be",
HorizontalOptions = LayoutOptions.CenterAndExpand
},
new Label
{
Text = "horizontal.",
},
}
}
}
};
