Partager via

Contrôles XAML

  • Article

Les vues sont des objets d’interface utilisateur tels que des étiquettes, des boutons et des curseurs communément appelés contrôles ou widgets dans d’autres environnements de programmation graphique. Les vues prises en charge par Xamarin.Forms tous dérivent de la View classe.

Toutes les vues définies peuvent Xamarin.Forms être référencées à partir de fichiers XAML.

Affichages pour la présentation

Affichage Exemple

BoxView

Affiche un rectangle d’une couleur particulière.

Capture d’écran d’un BoxView

Guide de l’API / 
<BoxView Color="Accent »
         WidthRequest="150 »
         HeightRequest="150 »
         HorizontalOptions="Center">

Ellipse

Affiche un ellipse ou un cercle.

Capture d’écran d’un Ellipse

Guide de l’API / 
<Ellipse Fill="Red »
         WidthRequest="150 »
         HeightRequest="50 »
         HorizontalOptions="Center" />

Image

Affiche une bitmap.

Capture d’écran d’une image

Guide de l’API / 
<Image Source="https://aka.ms/campus.jpg" ;
       Aspect="AspectFit »
       HorizontalOptions="Center" />

Étiquette

Affiche une ou plusieurs lignes de texte.

Capture d’écran d’une étiquette

Guide de l’API / 
<Label Text="Hello, Xamarin.Forms! »
       FontSize="Large »
       FontAttributes="Italic »
       HorizontalTextAlignment="Center" />

Line

Afficher une ligne.

Capture d’écran d’une ligne

Guide de l’API / 
<Ligne X1="40 »
      Y1="0 »
      X2="0 »
      Y2="120 »
      Stroke="Red »
      HorizontalOptions="Center" />

Mappage

Affiche une carte.

Capture d’écran d’une carte

Guide de l’API / 
<maps:Map ItemsSource="{Binding Locations}" />

Chemin d’accès

Afficher des courbes et des formes complexes.

Capture d’écran d’un chemin d’accès

Guide de l’API / 
<Path Stroke="Black »
      Aspect="Uniform »
      HorizontalOptions="Center »
      HeightRequest="100 »
      WidthRequest="100 »
      Data="M13.9,16.2
            L32,16.2 32,31.9 13.9,30.1Z
            M0,16.2
            L11.9,16.2 11.9,29.9 0,28.6Z
            M11.9,2
            L11.9,14.2 0,14.2 0,3.3Z
            M32,0
            L32,14.2 13.9,14.2 13.9,1.8Z" />

Polygon

Afficher un polygone.

Capture d’écran d’un polygone

Guide de l’API / 
<Polygon Points="0 48, 0 144, 96 150, 100 0, 192 0, 192 96,
                 50 96, 48 192, 150 200 144 48"
         Fill="Blue »
         Stroke="Red »
         StrokeThickness="3 »
         HorizontalOptions="Center" />

Polyligne

Affichez une série de lignes droites connectées.

Capture d’écran d’une polyligne

Guide de l’API / 
<Polyline Points="0,0 10,30, 15,0 18,60 23,30 35,30 40,0
                  43,60 48,30 100,30"
          Stroke="Red »
          HorizontalOptions="Center" />

Rectangle

Afficher un rectangle ou un carré.

Capture d’écran d’un rectangle

Guide de l’API / 
<Rectangle Fill="Red »
           WidthRequest="150 »
           HeightRequest="50 »
           HorizontalOptions="Center" />

WebView

Affiche des pages web ou du contenu HTML.

Capture d’écran d’un WebView

Guide de l’API / 
<WebView Source="https://learn.microsoft.com/xamarin/" ;
         VerticalOptions="FillAndExpand" />

Affichages lançant des commandes

Affichage Exemple

Bouton

Affiche du texte dans un objet rectangulaire.

Capture d’écran d’un bouton

Guide de l’API / 
<Bouton Text="Cliquez sur moi ! »
        Font="Large »
        BorderWidth="1 »
        HorizontalOptions="Center »
        VerticalOptions="CenterAndExpand »
        Clicked="OnButtonClicked" />

ImageButton

Affiche une image dans un objet rectangulaire.

Capture d’écran d’un ImageButton

Guide de l’API / 
<ImageButton Source="XamarinLogo.png »
             HorizontalOptions="Center »
             VerticalOptions="CenterAndExpand »
             Clicked="OnImageButtonClicked" />

RadioButton

Autorise la sélection d’une option à partir d’un jeu.

Capture d’écran d’un RadioButton

Guide		 
<RadioButton Text="Ananas »
             CheckedChanged="OnRadioButtonCheckedChanged" />

RefreshView

Fournit des fonctionnalités d’extraction à actualisation pour le contenu pouvant faire défiler le contenu.

Capture d’écran d’un RefreshView

Guide		 
<RefreshView IsRefreshing="{Binding IsRefreshing} »
             Command="{Binding RefreshCommand} » >
    <-- contrôle scrollable est ici ->
</RefreshView>

SearchBar

Accepte l’entrée utilisateur qu’elle utilise pour effectuer une recherche.

Capture d’écran d’une barre de recherche

Guide		 
<SearchBar Placeholder="Entrer le terme de recherche »
           SearchButtonPressed="OnSearchBarButtonPressed" />

SwipeView

Fournit des éléments de menu contextuel qui sont révélés par un mouvement de balayage.

Capture d’écran d’un SwipeView

Guide		 
<SwipeView>
    <SwipeView.LeftItems>
        <SwipeItems>
            <SwipeItem Text="Delete »
                       IconImageSource="delete.png »
                       BackgroundColor="LightPink »
                       Invoked="OnDeleteInvoked » />
        </SwipeItems>
    </SwipeView.LeftItems>
    <!--Contenu-->
</SwipeView>

Affichages pour les valeurs des paramètres

Affichage Exemple

CheckBox

Autorise la sélection d’une boolean valeur.

Capture d’écran d’un CheckBox

Guide		 
<CheckBox IsChecked="true »
          HorizontalOptions="Center »
          VerticalOptions="CenterAndExpand" />

Curseur

Autorise la sélection d’une double valeur à partir d’une plage continue.

Capture d’écran d’un curseur

Guide de l’API / 
<Slider Minimum="0 »
        Maximum="100 »
        VerticalOptions="CenterAndExpand" />

Exécution pas à pas

Autorise la sélection d’une double valeur à partir d’une plage incrémentielle.Capture d’écran d’un pas à pas

Guide de l’API / 
<Stepper Minimum="0 »
         Maximum="10 »
         Increment="0.1 »
         HorizontalOptions="Center »
         VerticalOptions="CenterAndExpand" />

Commutateur

Autorise la sélection d’une boolean valeur.

Capture d’écran d’un commutateur

Guide de l’API / 
<Switch IsToggled="false »
        HorizontalOptions="Center »
        VerticalOptions="CenterAndExpand" />

DatePicker

Autorise la sélection d’une date.

Capture d’écran d’un DatePicker

Guide de l’API / 
<DatePicker Format="D »
            VerticalOptions="CenterAndExpand" />

TimePicker

Autorise la sélection d’une heure.

Capture d’écran d’un TimePicker

Guide de l’API / 
<TimePicker Format="T »
            VerticalOptions="CenterAndExpand" />

Affichages pour la modification de texte

Affichage Exemple

Entrée

Permet d’entrer et de modifier une seule ligne de texte.

Capture d’écran d’une entrée

Guide de l’API / 		<
<Entry Keyboard="Email »
       Espace réservé="Entrer une adresse e-mail »
       VerticalOptions="CenterAndExpand" />

Éditeur

Permet d’entrer et de modifier plusieurs lignes de texte.

Capture d’écran d’un éditeur

Guide de l’API / 
<Editor VerticalOptions="FillAndExpand" />

Affichages pour indiquer une activité

Affichage Exemple

ActivityIndicator

Affiche une animation pour montrer que l’application est engagée dans une activité longue, sans donner aucune indication de progression.

Capture d’écran d’un ActivityIndicator

Guide de l’API / 
<ActivityIndicator IsRunning="True »
                   VerticalOptions="CenterAndExpand" />

ProgressBar

Affiche une animation pour montrer que l’application progresse dans une longue activité.

Capture d’écran d’une barre de progression

Guide de l’API / 
<ProgressBar Progress= ».5 »
             VerticalOptions="CenterAndExpand" />

Affichages qui montrent des collections

Affichage Exemple

CarouselView

Affiche une liste déroulante d’éléments de données.

Capture d’écran d’un CarouselView

Guide		 
<CarouselView ItemsSource="{Binding Monkeys} »>
              ItemTemplate="{StaticResource MonkeyTemplate}" />

CollectionView

Affiche une liste modifiable d’éléments de données sélectionnables à l’aide de différentes spécifications de disposition.

Capture d’écran d’un CollectionView

Guide		 
<CollectionView ItemsSource="{Binding Monkeys} »>
                ItemTemplate="{StaticResource MonkeyTemplate} »
                ItemsLayout="VerticalGrid, 2" />

IndicatorView

Affiche les indicateurs qui représentent le nombre d’éléments d’un CarouselView.

Capture d’écran d’un IndicateurView

Guide		 
<IndicatorView x :Name="indicatorView »
               IndicatorColor="LightGray »
               SelectedIndicatorColor="DarkGray" />

ListView

Affiche une liste modifiable d’éléments de données sélectionnables.

Capture d’écran d’un ListView

Guide de l’API / 
<ListView ItemsSource="{Binding Monkeys} »>
          ItemTemplate="{StaticResource MonkeyTemplate}" />

Picker

Affiche un élément sélectionné dans une liste de chaînes de texte.

Capture d’écran d’un sélecteur

Guide de l’API / 		<
<Picker Title="Select a monkey »
        TitleColor="Red »>
  <Picker.ItemsSource>
    <x :Array Type="{x :Type x :String} »>
      <x :String>Baboon</x :String>
      <x :String>Capuchin Monkey</x :String>
      <x :String>Blue Monkey</x :String>
      <x :String>Squirrel Monkey</x :String>
      <x :String>Golden Lion Tamarin</x :String>
      <x :String>Howler Monkey</x :String>
      <x :String>Japonais Macaque</x :String>
    </x :Array>
  </Picker.ItemsSource>
</Picker>

TableView

Affiche une liste de lignes interactives.

Capture d’écran d’un TableView

Guide de l’API / 
<TableView Intent="Settings »>
    <TableRoot>
        <TableSection Title="Ring »>
            <SwitchCell Text="New Voice Mail » />
            <SwitchCell Text="New Mail » On="true » />
        </TableSection>
    </TableRoot>
</TableView>