Xamarin.Forms
Vues Xamarin.Forms

Bouton

Le bouton est probablement le contrôle le plus courant non seulement dans les applications mobiles, mais aussi dans toutes les applications disposant d'une interface utilisateur. Le concept d'un bouton a trop d'objectifs à énumérer ici. En règle générale cependant, vous utiliserez un bouton pour permettre aux utilisateurs de lancer une action ou une opération dans votre application. Cette opération peut inclure tout, de la navigation de base dans votre application, à la soumission de données à un service Web quelque part sur Internet.

XAML

<Button
    x:Name="MyButton"
    Text="Click Me!"
    TextColor="Red"
    BorderColor="Blue"
    VerticalOptions="Center"
    HorizontalOptions="Center"
    Clicked="Button_Clicked"/>

XAML Code-Behind

public void Button_Clicked( object sender, EventArgs args ) 
{
    MyButton.Text = "I've been clicked!";
}

Code

var button = new Button( ) 
{
    Text = "Hello, Forms !",
    VerticalOptions = LayoutOptions.CenterAndExpand,
    HorizontalOptions = LayoutOptions.CenterAndExpand,
    TextColor = Color.Red,
    BorderColor = Color.Blue,
};

button.Clicked += ( sender, args ) => 
{
    var b = (Button) sender;
    b.Text = "I've been clicked!";
};

Sélecteur de date

Très souvent, dans les applications mobiles, il y aura une raison de traiter les dates. Lorsque vous travaillez avec des dates, vous aurez probablement besoin d'une sorte de saisie utilisateur pour sélectionner une date. Cela peut se produire lorsque vous travaillez avec une application de planification ou de calendrier. Dans ce cas, il est préférable de fournir aux utilisateurs un contrôle spécialisé leur permettant de sélectionner une date de manière interactive, plutôt que de demander aux utilisateurs de saisir manuellement une date. C'est là que le contrôle DatePicker est vraiment utile.

XAML

<DatePicker Date="09/12/2014" Format="d" />

Code

var datePicker = new DatePicker{
Date = DateTime.Now,
Format = "d"
};

Entrée

La vue d'entrée permet aux utilisateurs de saisir une seule ligne de texte. Cette seule ligne de texte peut être utilisée à des fins multiples, y compris la saisie de notes de base, d'informations d'identification, d'URL, etc. Cette vue est une vue polyvalente, ce qui signifie que si vous avez besoin de taper du texte normal ou que vous souhaitez masquer un mot de passe, tout se fait via ce seul contrôle.

XAML

<Entry Placeholder="Please Enter Some Text Here"
HorizontalOptions="Center"
VerticalOptions="Center"
Keyboard="Email"/>

Code

var entry = new Entry {
Placeholder = "Please Enter Some Text Here",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center,
Keyboard = Keyboard.Email
};

Éditeur

L'éditeur est très similaire à l'entrée en ce sens qu'il permet aux utilisateurs d'entrer du texte libre. La différence est que l'éditeur permet une entrée multi-lignes alors que l'entrée n'est utilisée que pour une entrée sur une seule ligne. L'entrée fournit également quelques propriétés supplémentaires par rapport à l'éditeur pour permettre une personnalisation supplémentaire de la vue.

XAML

<Editor HorizontalOptions="Fill"
VerticalOptions="Fill"
 Keyboard="Chat"/>

Code

var editor = new Editor {
HorizontalOptions = LayoutOptions.Fill,
VerticalOptions = LayoutOptions.Fill,
Keyboard = Keyboard.Chat
};

Image

Les images sont des parties très importantes de toute application. Ils permettent d'injecter des éléments visuels supplémentaires ainsi que des marques dans votre application. Sans oublier que les images sont généralement plus intéressantes à regarder que du texte ou des boutons. Vous pouvez utiliser une image en tant qu'élément autonome dans votre application, mais un élément Image peut également être ajouté à d'autres éléments d'affichage, tels qu'un bouton.

XAML

<Image Aspect="AspectFit" Source="http://d2g29cya9iq7ip.cloudfront.net/co
ntent/images/company/aboutus-video-bg.png?v=25072014072745"/>

Code

var image = new Image {
Aspect = Aspect.AspectFit,
Source = ImageSource.FromUri(new Uri("http://d2g29cya9iq7ip.cloudfron
t.net/content/images/company/aboutus-video-bg.png?v=25072014072745"))
};

Étiquette

Croyez-le ou non, le Label est l'une des classes View les plus cruciales, mais encore sous-estimées, non seulement dans Xamarin.Forms, mais dans le développement de l'interface utilisateur en général. Il est considéré comme une ligne de texte plutôt ennuyeuse, mais sans cette ligne de texte, il serait très difficile de transmettre certaines idées à l'utilisateur. Les contrôles d'étiquette peuvent être utilisés pour décrire ce que l'utilisateur doit entrer dans un contrôle d'édition ou de saisie. Ils peuvent décrire une section de l'interface utilisateur et lui donner un contexte. Ils peuvent être utilisés pour afficher le total dans une application de calculatrice. Oui, l'étiquette est vraiment le contrôle le plus polyvalent de votre trousse à outils, qui ne suscite pas toujours beaucoup d'attention, mais c'est le premier à être remarqué s'il n'y en a pas.

XAML

<Label Text="This is some really awesome text in a Label!"
TextColor="Red"
XAlign="Center"
YAlign="Center"/>

Code

var label = new Label {
Text = "This is some really awesome text in a Label!",
TextColor = Color.Red,
XAlign = TextAlignment.Center,
YAlign = TextAlignment.Center
};