Compartilhar via

Controles XAML

  • Artigo

Modos de exibição são objetos da interface do usuário, como rótulos, botões e controles deslizantes, que são comumente conhecidos como controles ou widgets em outros ambientes de programação gráfica. As exibições suportadas por Xamarin.Forms todos derivam da View classe.

Todos os modos de exibição definidos em Xamarin.Forms podem ser referenciados a partir de arquivos XAML.

Exibições para apresentação

Exibir Exemplo

BoxView

Exibe um retângulo de uma cor específica.

Captura de tela de um BoxView

Guia da API / 
<BoxView Color="Acento"
         WidthRequest="150"
         HeightRequest="150"
         HorizontalOptions="Center">

Elipse

Exibe uma elipse ou círculo.

Captura de tela de uma elipse

Guia da API / 
<Ellipse Fill="Vermelho"
         WidthRequest="150"
         HeightRequest="50"
         HorizontalOptions="Center" />

Imagem

Exibe um bitmap.

Captura de ecrã de uma imagem

Guia da API / 
<Fonte da imagem="https://aka.ms/campus.jpg"
       Aspect="AspectFit"
       HorizontalOptions="Center" />

Etiqueta

Exibe uma ou mais linhas de texto.

Captura de ecrã de uma etiqueta

Guia da API / 
<Label text="Olá, Xamarin.Forms!"
       FontSize="Grande"
       FontAttributes="Itálico"
       HorizontalTextAlignment="Center" />

Linha

Exibir uma linha.

Captura de tela de uma linha

Guia da API / 
<Linha X1="40"
      Y1="0"
      X2="0"
      Y2="120"
      Stroke="Vermelho"
      HorizontalOptions="Center" />

Mapeamento

Exibe um mapa.

Captura de tela de um mapa

Guia da API / 
<maps:Map ItemsSource="{Binding Locations}" />

Caminho

Exibir curvas e formas complexas.

Captura de tela de um caminho

Guia da API / 
<traçado do caminho="preto"
      Aspect="Uniforme"
      HorizontalOptions="Centro"
      HeightRequest="100"
      WidthRequest="100"
      Dados="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" />

Polígono

Exibir um polígono.

Captura de tela de um polígono

Guia da API / 
<Pontos de polígono="0 48, 0 144, 96 150, 100 0, 192 0, 192 96,
                 50 96, 48 192, 150 200 144 48"
         Fill="Azul"
         Stroke="Vermelho"
         StrokeThickness="3"
         HorizontalOptions="Center" />

Linha poligonal

Exibir uma série de linhas retas conectadas.

Captura de tela de uma Polyline

Guia da API / 
<Pontos Polilinha="0,0 10,30, 15,0 18,60 23,30 35,30 40,0
                  43,60 48,30 100,30"
          Stroke="Vermelho"
          HorizontalOptions="Center" />

Retângulo

Exibir um retângulo ou quadrado.

Captura de tela de um retângulo

Guia da API / 
<Preenchimento do retângulo="Vermelho"
           WidthRequest="150"
           HeightRequest="50"
           HorizontalOptions="Center" />

WebView

Exibe páginas da Web ou conteúdo HTML.

Captura de tela de um WebView

Guia da API / 
<WebView Source="https://learn.microsoft.com/xamarin/"
         VerticalOptions="FillAndExpand" />

Exibições que iniciam comandos

Exibir Exemplo

Botão

Exibe texto em um objeto retangular.

Captura de tela de um botão

Guia da API / 
<Botão text="Clique em mim!"
        font="grande"
        BorderWidth="1"
        HorizontalOptions="Centro"
        VerticalOptions="CenterAndExpand"
        Clicked="OnButtonClicked" />

ImageButton

Exibe uma imagem em um objeto retangular.

Captura de tela de um ImageButton

Guia da API / 
<ImageButton Source="XamarinLogo.png"
             HorizontalOptions="Centro"
             VerticalOptions="CenterAndExpand"
             Clicked="OnImageButtonClicked" />

RadioButton

Permite a seleção de uma opção de um conjunto.

Captura de tela de um RadioButton

Guia		 
<RadioButton Text="Abacaxi"
             CheckedChanged="OnRadioButtonCheckedChanged" />

RefreshView

Fornece funcionalidade pull-to-refresh para conteúdo rolável.

Captura de tela de um RefreshView

Guia		 
<RefreshView IsRefreshing="{Vinculação IsRefreshing}"
             Command="{Binding RefreshCommand}" >
    <-- Controle rolável vai aqui -->
</RefreshView>

SearchBar

Aceita a entrada do usuário que ele usa para executar uma pesquisa.

Captura de tela de uma Barra de Pesquisa

Guia		 
<Espaço reservado SearchBar="Inserir termo de pesquisa"
           SearchButtonPressed="OnSearchBarButtonPressed" />

SwipeView

Fornece itens de menu de contexto que são revelados por um gesto de passar o dedo.

Captura de tela de um SwipeView

Guia		 
<SwipeView>
    <SwipeView.LeftItems>
        <SwipeItems>
            <SwipeItem Text="Excluir"
                       IconImageSource="delete.png"
                       BackgroundColor="Rosa Claro"
                       Invoked="OnDeleteInvoked" />
        </SwipeItems>
    </SwipeView.LeftItems>
    <!--Conteúdo-->
</SwipeView>

Exibições para definir valores

Exibir Exemplo

CheckBox

Permite a seleção de um boolean valor.

Captura de tela de uma CheckBox

Guia		 
<CheckBox IsChecked="verdadeiro"
          HorizontalOptions="Centro"
          VerticalOptions="CenterAndExpand" />

Controle deslizante

Permite a seleção de um double valor de um intervalo contínuo.

Captura de tela de um controle deslizante

Guia da API / 
<Slider Mínimo="0"
        Máximo="100"
        VerticalOptions="CenterAndExpand" />

Passador

Permite a seleção de um double valor de um intervalo incremental.Captura de tela de um Stepper

Guia da API / 
<Stepper Mínimo="0"
         Máximo="10"
         Incremento="0,1"
         HorizontalOptions="Centro"
         VerticalOptions="CenterAndExpand" />

Comutador

Permite a seleção de um boolean valor.

Captura de ecrã de um Switch

Guia da API / 
<Alternar IsToggled="false"
        HorizontalOptions="Centro"
        VerticalOptions="CenterAndExpand" />

DatePicker

Permite a seleção de uma data.

Captura de tela de um DatePicker

Guia da API / 
<Formato DatePicker ="D"
            VerticalOptions="CenterAndExpand" />

TimePicker

Permite a seleção de um horário.

Captura de tela de um TimePicker

Guia da API / 
<TimePicker Format="T"
            VerticalOptions="CenterAndExpand" />

Exibições para edição de texto

Exibir Exemplo

Entry

Permite que uma única linha de texto seja inserida e editada.

Captura de tela de uma entrada

Guia da API / 		<
<Entrada Keyboard="E-mail"
       Placeholder="Digite o endereço de e-mail"
       VerticalOptions="CenterAndExpand" />

Editor

Permite que várias linhas de texto sejam inseridas e editadas.

Captura de tela de um Editor

Guia da API / 
<Editor VerticalOptions="FillAndExpand" />

Exibições para indicar atividade

Exibir Exemplo

ActivityIndicator

Exibe uma animação para mostrar que o aplicativo está envolvido em uma atividade longa, sem dar qualquer indicação de progresso.

Captura de tela de um ActivityIndicator

Guia da API / 
<ActivityIndicator IsRunning="Verdadeiro"
                   VerticalOptions="CenterAndExpand" />

ProgressBar

Exibe uma animação para mostrar que o aplicativo está progredindo em uma atividade longa.

Captura de ecrã de uma ProgressBar

Guia da API / 
<ProgressBar Progress=".5"
             VerticalOptions="CenterAndExpand" />

Exibições que mostram coleções

Exibir Exemplo

CarouselView

Exibe uma lista rolável de itens de dados.

Captura de tela de um CarouselView

Guia		 
<CarouselView ItemsSource="{Macacos de ligação}">
              ItemTemplate="{StaticResource MonkeyTemplate}" />

CollectionView

Exibe uma lista rolável de itens de dados selecionáveis, usando especificações de layout diferentes.

Captura de tela de um CollectionView

Guia		 
<CollectionView ItemsSource="{Macacos de ligação}">
                ItemTemplate="{StaticResource MonkeyTemplate}"
                ItemsLayout="VerticalGrid, 2" />

IndicatorView

Exibe indicadores que representam o número de itens em um CarouselViewarquivo .

Captura de tela de um IndicatorView

Guia		 
<IndicatorView x:Name="indicatorView"
               IndicatorColor="Cinza claro"
               SelectedIndicatorColor="DarkGray" />

ListView

Exibe uma lista rolável de itens de dados selecionáveis.

Captura de tela de um ListView

Guia da API / 
<ListView ItemsSource="{Macacos de ligação}">
          ItemTemplate="{StaticResource MonkeyTemplate}" />

Picker

Exibe um item de seleção de uma lista de cadeias de caracteres de texto.

Captura de tela de um seletor

Guia da API / 		<
<Picker Title="Selecione um macaco"
        TitleColor="Vermelho">
  <Picker.ItemsSource>
    <x:Tipo de matriz="{x:Tipo x:String}">
      <x:Babuíno< de corda>/ x:String>
      <x:Macaco Capuchinho String></x:String>
      <x:Macaco< azul da corda>/ x:String>
      <x:Macaco Esquilo String></x:String>
      <x:Mico-leão-dourado</>x:Corda>
      <x:Macaco< bugio de corda>/ x:String>
      <x:Macaco< japonês da corda>/ x:String>
    </x:Matriz>
  </Picker.ItemsSource>
</Picker>

TableView

Exibe uma lista de linhas interativas.

Captura de tela de um TableView

Guia da API / 
<TableView Intent="Configurações">
    <Raiz da Tabela>
        <TableSection title="Anel">
            <SwitchCell text="Nova caixa postal" />
            <SwitchCell text="Novo e-mail" em="true" />
        </TableSection>
    </TableRoot>
</TableView>