Condividi tramite

Controlli XAML

  • Articolo

Le visualizzazioni sono oggetti dell'interfaccia utente, ad esempio etichette, pulsanti e dispositivi di scorrimento comunemente noti come controlli o widget in altri ambienti di programmazione grafica. Le viste supportate da Xamarin.Forms tutte derivano dalla View classe .

È possibile fare riferimento a tutte le visualizzazioni definite in Xamarin.Forms dai file XAML.

Visualizzazioni per la presentazione

Visualizza Esempio

BoxView

Visualizza un rettangolo di un particolare colore.

Screenshot di un controllo BoxView

Guida all'API / 
<BoxView Color="Accent"
         WidthRequest="150"
         HeightRequest="150"
         HorizontalOptions="Center">

Ellisse

Visualizza un'ellisse o un cerchio.

Screenshot di un'ellisse

Guida all'API / 
<Ellipse Fill="Red"
         WidthRequest="150"
         HeightRequest="50"
         HorizontalOptions="Center" />

Immagine

Visualizza una bitmap.

Screenshot di un'immagine

Guida all'API / 
<Image Source="https://aka.ms/campus.jpg"
       Aspect="AspectFit"
       HorizontalOptions="Center" />

Etichetta

Visualizza una o più righe di testo.

Screenshot di un'etichetta

Guida all'API / 
<Label Text="Hello, Xamarin.Forms!"
       FontSize="Large"
       FontAttributes="Italic"
       HorizontalTextAlignment="Center" />

A linee

Visualizzare una linea.

Screenshot di una riga

Guida all'API / 
<Riga X1="40"
      Y1="0"
      X2="0"
      Y2="120"
      Stroke="Red"
      HorizontalOptions="Center" />

Mappa

Visualizza una mappa.

Screenshot di una mappa

Guida all'API / 
<maps:Map ItemsSource="{Binding Locations}" />

Percorso

Visualizzare curve e forme complesse.

Screenshot di un percorso

Guida all'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

Visualizzare un poligono.

Screenshot di un poligono

Guida all'API / 
<Poligono 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" />

Polilinea

Visualizzare una serie di linee rette collegate.

Screenshot di una polilinea

Guida all'API / 
<Punti polilinea="0,0 10,30, 15.0 18.60 23.30 35.30 40,0
                  43,60 48,30 100,30"
          Stroke="Red"
          HorizontalOptions="Center" />

Rettangolo

Visualizzare un rettangolo o un quadrato.

Screenshot di un rettangolo

Guida all'API / 
<Riempimento rettangolo="Rosso"
           WidthRequest="150"
           HeightRequest="50"
           HorizontalOptions="Center" />

WebView

Visualizza pagine Web o contenuto HTML.

Screenshot di un controllo WebView

Guida all'API / 
<WebView Source="https://learn.microsoft.com/xamarin/"
         VerticalOptions="FillAndExpand" />

Visualizzazioni che avviano i comandi

Visualizza Esempio

Pulsante

Visualizza il testo in un oggetto rettangolare.

Screenshot di un pulsante

Guida all'API / 
<Button Text="Click Me!"
        Font="Large"
        BorderWidth="1"
        HorizontalOptions="Center"
        VerticalOptions="CenterAndExpand"
        Clicked="OnButtonClicked" />

ImageButton

Visualizza un'immagine in un oggetto rettangolare.

Screenshot di un controllo ImageButton

Guida all'API / 
<ImageButton Source="XamarinLogo.png"
             HorizontalOptions="Center"
             VerticalOptions="CenterAndExpand"
             Clicked="OnImageButtonClicked" />

RadioButton

Consente la selezione di un'opzione da un set.

Screenshot di un controllo RadioButton

Guida		 
<RadioButton Text="Ananas"
             CheckedChanged="OnRadioButtonCheckedChanged" />

RefreshView

Fornisce funzionalità di aggiornamento tramite trascinamento verso il basso per il contenuto scorrevole.

Screenshot di un controllo RefreshView

Guida		 
<RefreshView IsRefreshing="{Binding IsRefreshing}"
             Command="{Binding RefreshCommand}" >
    <-- controllo scorrevole è disponibile qui ->
</RefreshView>

SearchBar

Accetta l'input dell'utente usato per eseguire una ricerca.

Screenshot di un controllo SearchBar

Guida		 
<SearchBar Placeholder="Enter search term"
           SearchButtonPressed="OnSearchBarButtonPressed" />

SwipeView

Fornisce voci di menu di scelta rapida che vengono visualizzate da un movimento di scorrimento rapido.

Screenshot di un controllo SwipeView

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

Visualizzazioni per impostare i valori

Visualizza Esempio

CheckBox

Consente la selezione di un boolean valore.

Screenshot di un controllo CheckBox

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

Dispositivo di scorrimento

Consente la selezione di un double valore da un intervallo continuo.

Screenshot di un dispositivo di scorrimento

Guida all'API / 
<Dispositivo di scorrimento minimo="0"
        Massimo="100"
        VerticalOptions="CenterAndExpand" />

Gestore di istruzioni

Consente la selezione di un double valore da un intervallo incrementale.Screenshot di un stepper

Guida all'API / 
<Stepper Minimum="0"
         Massimo="10"
         Increment="0.1"
         HorizontalOptions="Center"
         VerticalOptions="CenterAndExpand" />

Switch

Consente la selezione di un boolean valore.

Screenshot di un'opzione

Guida all'API / 
<Switch IsToggled="false"
        HorizontalOptions="Center"
        VerticalOptions="CenterAndExpand" />

DatePicker

Consente la selezione di una data.

Screenshot di un controllo DatePicker

Guida all'API / 
<DatePicker Format="D"
            VerticalOptions="CenterAndExpand" />

TimePicker

Consente la selezione di un'ora.

Screenshot di un controllo TimePicker

Guida all'API / 
<TimePicker Format="T"
            VerticalOptions="CenterAndExpand" />

Visualizzazioni per modificare il testo

Visualizza Esempio

Movimento

Consente di immettere e modificare una singola riga di testo.

Screenshot di una voce

Guida all'API / 		<
<Entry Keyboard="Email"
       Segnaposto="Immettere l'indirizzo di posta elettronica"
       VerticalOptions="CenterAndExpand" />

Editor

Consente di immettere e modificare più righe di testo.

Screenshot di un editor

Guida all'API / 
<Editor VerticalOptions="FillAndExpand" />

Visualizzazioni per indicare l'attività

Visualizza Esempio

ActivityIndicator

Visualizza un'animazione per mostrare che l'applicazione è impegnata in un'attività lunga, senza fornire alcuna indicazione dello stato di avanzamento.

Screenshot di un ActivityIndicator

Guida all'API / 
<ActivityIndicator IsRunning="True"
                   VerticalOptions="CenterAndExpand" />

ProgressBar

Visualizza un'animazione per indicare che l'applicazione sta procedendo attraverso un'attività lunga.

Screenshot di un controllo ProgressBar

Guida all'API / 
<ProgressBar Progress=".5"
             VerticalOptions="CenterAndExpand" />

Visualizzazioni che visualizzano le raccolte

Visualizza Esempio

CarouselView

Visualizza un elenco scorrevole di elementi di dati.

Screenshot di un controllo CarouselView

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

CollectionView

Visualizza un elenco scorrevole di elementi di dati selezionabili, usando specifiche di layout diverse.

Screenshot di un oggetto CollectionView

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

IndicatorView

Visualizza gli indicatori che rappresentano il numero di elementi in un oggetto CarouselView.

Screenshot di un indicatoreView

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

ListView

Visualizza un elenco scorrevole di elementi di dati selezionabili.

Screenshot di un controllo ListView

Guida all'API / 
<ListView ItemsSource="{Binding Monkeys}">
          ItemTemplate="{StaticResource MonkeyTemplate}" />

Picker

Visualizza un elemento di selezione da un elenco di stringhe di testo.

Screenshot di una selezione

Guida all'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>Giapponese Macaque</x:String>
    </x:Array>
  </Picker.ItemsSource>
</Picker>

TableView

Visualizza un elenco di righe interattive.

Screenshot di un oggetto TableView

Guida all'API / 
<Finalità TableView="Settings">
    <TableRoot>
        <TableSection Title="Ring">
            <SwitchCell Text="New Voice Mail" />
            <SwitchCell Text="New Mail" On="true" />
        </TableSection>
    </TableRoot>
</TableView>