Partilhar via

Controles XAML

  • Artigo

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

Todas as exibições definidas podem ser referenciadas de Xamarin.Forms 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 de API / 
<BoxView Color="Accent"
         LarguraSolicitação = "150"
         HeightRequest="150"
         HorizontalOptions="Center">

Elipse

Exibe uma elipse ou círculo.

Captura de tela de uma elipse

Guia de API / 
<Preenchimento de elipse = "Vermelho"
         LarguraSolicitação = "150"
         HeightRequest="50"
         HorizontalOptions="Center" />

Imagem

Exibe um bitmap.

Captura de tela de uma imagem

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

Etiqueta

Exibe uma ou mais linhas de texto.

Captura de tela de um rótulo

Guia de API / 
<Rótulo text="Olá, Xamarin.Forms!"
       FontSize="Grande"
       FontAttributes="Itálico"
       HorizontalTextAlignment="Center" />

Linha

Exibir uma linha.

Captura de tela de uma linha

Guia de 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 de API / 
<maps:Map ItemsSource="{Binding Locations}" />

Caminho

Exiba curvas e formas complexas.

Captura de tela de um caminho

Guia de API / 
<Traçado do caminho = "Preto"
      Aspecto = "Uniforme"
      HorizontalOptions="Centro"
      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" />

Polígono

Exibir um polígono.

Captura de tela de um polígono

Guia de 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"
         EspessuraTraçado="3"
         HorizontalOptions="Center" />

Linha poligonal

Exiba uma série de linhas retas conectadas.

Captura de tela de uma polilinha

Guia de API / 
<Pontos de 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 de API / 
<Preenchimento retangular = "Vermelho"
           LarguraSolicitação = "150"
           HeightRequest="50"
           HorizontalOptions="Center" />

WebView

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

Captura de tela de um WebView

Guia de API / 
<Fonte do WebView="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 de API / 
<Botão Text="Clique em mim!"
        Fonte = "Grande"
        Largura da borda = "1"
        HorizontalOptions="Centro"
        VerticalOptions="CenterAndExpand"
        Clicked="OnButtonClicked" />

ImageButton

Exibe uma imagem em um objeto retangular.

Captura de tela de um ImageButton

Guia de API / 
<Fonte do ImageButton = "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		 
<Texto do botão de opção="Abacaxi"
             CheckedChanged="OnRadioButtonCheckedChanged" />

RefreshView

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

Captura de tela de um RefreshView

Guia		 
<RefreshView IsRefreshing="{Binding IsRefreshing}"
             Command="{Vinculando 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		 
<SearchBar Placeholder="Digite o 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="LightPink"
                       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 caixa de seleção

Guia		 
<CheckBox IsChecked="true"
          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 de API / 
<Slider Minimum="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 de API / 
<Mínimo de passo = "0"
         Máximo = "10"
         Incremento="0,1"
         HorizontalOptions="Centro"
         VerticalOptions="CenterAndExpand" />

Comutador

Permite a seleção de um boolean valor.

Captura de tela de um switch

Guia de API / 
<Interruptor IsToggled="false"
        HorizontalOptions="Centro"
        VerticalOptions="CenterAndExpand" />

DatePicker

Permite a seleção de uma data.

Captura de tela de um DatePicker

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

TimePicker

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

Captura de tela de um TimePicker

Guia de 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 de 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 de 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 nenhuma indicação de progresso.

Captura de tela de um ActivityIndicator

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

ProgressBar

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

Captura de tela de um ProgressBar

Guia de API / 
<Progresso da barra de progresso = ".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="{Vinculando macacos}">
              ItemTemplate="{StaticResource MonkeyTemplate}" />

CollectionView

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

Captura de tela de um CollectionView

Guia		 
<CollectionView ItemsSource="{Vinculando macacos}">
                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="LightGray"
               SelectedIndicatorColor="DarkGray" />

ListView

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

Captura de tela de um ListView

Guia de API / 
<ListView ItemsSource="{Vinculando macacos}">
          ItemTemplate="{StaticResource MonkeyTemplate}" />

Picker

Exibe um item selecionado de uma lista de cadeias de caracteres de texto.

Captura de tela de um seletor

Guia de API / 		<
<Picker Title="Selecione um macaco"
        TitleColor="Vermelho">
  <Picker.ItemsSource>
    <x:Tipo de matriz="{x:Tipo x:String}">
      <x:Babuíno< de corda>/x:Corda>
      <x:Corda>Macaco-prego</x:Corda>
      <x:Corda>Macaco Azul</x:Corda>
      <x:Macaco-esquilo< de corda>/x:Corda>
      <x:Corda>Mico-leão-dourado</x:Corda>
      <x:Macaco Uivador de Cordas></x:Corda>
      <x:Corda>Macaco< Japonês/x:Corda>
    </x:Matriz>
  </Picker.ItemsSource>
</Picker>

TableView

Exibe uma lista de linhas interativas.

Captura de tela de um TableView

Guia de API / 
<TableView Intent="Configurações">
    <Raiz de tabela>
        <TableSection Title="Anel">
            <SwitchCell Text="Nova caixa postal" />
            <SwitchCell text="Novo e-mail" On="true" />
        </Seção de tabela>
    </Raiz_de_tabela>
</TableView>