Xamarin.Forms Modos de exibição

Artigo
09/24/2022

Xamarin.Forms os modos de exibição são os blocos de construção de interfaces do usuário móvel multiplataforma.

As exibições são objetos de 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. Os modos de exibição com suporte de Xamarin.Forms todos derivam da View classe. Eles podem ser divididos em várias categorias:

Exibições para apresentação

Tipo	Descrição	Aparência
`BoxView`	`BoxView` exibe um retângulo sólido colorido pela `Color` propriedade. `BoxView` tem uma solicitação de tamanho padrão de 40x40. Para outros tamanhos, atribua o e `HeightRequest` as `WidthRequest` propriedades. Documentação / da API Guia / Exemplo 1, 2, 3, 4, 5 e 6	Exemplo de Código C# para esta página / Página XAML
`Ellipse`	`Ellipse` exibe uma reticência ou um círculo de tamanho `WidthRequest` x `HeightRequest`. Para pintar o interior da elipse, defina sua `Fill` propriedade como um `Color`. Para dar uma estrutura de tópicos à reticência, defina sua `Stroke` propriedade como um `Color`. Documentação / da API Guia / Amostra	Exemplo de elipse de de Código C# para esta página / Página XAML
`Label`	`Label` exibe cadeias de texto de linha única ou blocos de texto de várias linhas, com formatação constante ou variável. Defina a `Text` propriedade como uma cadeia de caracteres para formatação constante ou defina a `FormattedText` propriedade como um `FormattedString` objeto para formatação de variável. Documentação / da API Guia / Amostra	rótulo de de rótulo Código C# para esta página / Página XAML
`Line`	`Line` exibe uma linha de um ponto de partida para um ponto de extremidade. O ponto de partida é representado pelo e `Y1` pelas `X1` propriedades, enquanto o ponto de extremidade é representado pelo e `Y2` pelas `X2` propriedades. Para colorir a linha, defina sua `Stroke` propriedade como um `Color`. Documentação / da API Guia / Amostra	de Código C# para esta página / Página XAML
`Image`	`Image` exibe um bitmap. Os bitmaps podem ser baixados pela Web, inseridos como recursos nos projetos comuns de projeto ou plataforma ou criados usando um objeto .NET `Stream` . Documentação / da API Guia / Amostra	de de exemplo de imagem Código C# para esta página / Página XAML
`Map`	`Map` exibe um mapa. O Xamarin.Forms. O pacote NuGet do Mapas deve ser instalado. Android e Plataforma Universal do Windows exigem uma chave de autorização de mapa. Documentação / da API Guia / Amostra	Código C# para esta página / Página XAML
`OpenGLView`	`OpenGLView` exibe elementos gráficos OpenGL em projetos iOS e Android. Não há suporte para o Plataforma Universal do Windows. Os projetos do iOS e do Android exigem uma referência ao assembly OpenTK-1.0 ou ao assembly do OpenTK versão 1.0.0.0. `OpenGLView` é mais fácil de usar em um projeto compartilhado; se usado em uma biblioteca .NET Standard, um Serviço de Dependência também será necessário (conforme mostrado no código de exemplo). Essa é a única instalação de elementos gráficos interna Xamarin.Forms, mas um Xamarin.Forms aplicativo também pode renderizar elementos gráficos usando `SkiaSharp`ou `UrhoSharp`. Documentação da API	Exemplo exemplo Código C# para esta página / Página XAML com code-behind
`Path`	`Path` exibe curvas e formas complexas. A `Data` propriedade especifica a forma a ser desenhada. Para colorir a forma, defina sua `Stroke` propriedade como um `Color`. Documentação / da API Guia / Amostra	de de caminho Código C# para esta página / Página XAML
`Polygon`	`Polygon` exibe um polígono. A `Points` propriedade especifica os pontos de vértice do polígono, enquanto a `FillRule` propriedade especifica como o preenchimento interior do polígono é determinado. Para pintar o interior do polígono, defina sua `Fill` propriedade como um `Color`. Para dar ao polígono uma estrutura de tópicos, defina sua `Stroke` propriedade como um `Color`. Documentação / da API Guia / Amostra	Exemplo de Código C# para esta página / Página XAML
`Polyline`	`Polyline` exibe uma série de linhas retas conectadas. A `Points` propriedade especifica os pontos de vértice da polilinha, enquanto a `FillRule` propriedade especifica como o preenchimento interior da polilinha é determinado. Para pintar o interior da polilinha, defina sua `Fill` propriedade como um `Color`. Para dar uma estrutura de tópicos à polilinha, defina sua `Stroke` propriedade como um `Color`. Documentação / da API Guia / Amostra	Exemplo de Código C# para esta página / Página XAML
`Rectangle`	`Rectangle` exibe um retângulo ou quadrado. Para pintar o interior do retângulo, defina sua `Fill` propriedade como um `Color`. Para dar ao retângulo uma estrutura de tópicos, defina sua `Stroke` propriedade como um `Color`. Documentação / da API Guia / Amostra	Exemplo de Código C# para esta página / Página XAML
`WebView`	`WebView` exibe páginas da Web ou conteúdo HTML, com base em se a `Source` propriedade está definida como um objeto ou um `UriWebViewSourceHtmlWebViewSource` objeto. Documentação / da API Guia / Exemplo 1 e 2	Exemplo de Código C# para esta página / Página XAML

Exibições que iniciam comandos

Tipo	Descrição	Aparência
`Button`	`Button` é um objeto retangular que exibe texto e que dispara um `Clicked` evento quando ele é pressionado. Documentação / da API Guia / Amostra	de de de exemplo de botão Código C# para esta página / Página XAML com code-behind
`ImageButton`	`ImageButton` é um objeto retangular que exibe uma imagem e que dispara um `Clicked` evento quando ele é pressionado. Documentação / da API Guia / Amostra	Exemplo Código C# para esta página / Página XAML com code-behind
`RadioButton`	`RadioButton` permite a seleção de uma opção de um conjunto e aciona um `CheckedChanged` evento quando ocorre a seleção. Documentação / da API Guia / Amostra	Exemplo Código C# para esta página / Página XAML com code-behind
`RefreshView`	`RefreshView` é um controle de contêiner que fornece a funcionalidade pull-to-refresh para conteúdo rolável. A `ICommand` propriedade definida pela `Command` propriedade é executada quando uma atualização é disparada e a `IsRefreshing` propriedade indica o estado atual do controle. Documentação / da API Guia / Amostra	Código C# para esta página / Página XAML com code-behind
`SearchBar`	`SearchBar` exibe uma área para o usuário digitar uma cadeia de texto e um botão (ou uma tecla de teclado) que sinaliza o aplicativo para executar uma pesquisa. A `Text` propriedade fornece acesso ao texto e o `SearchButtonPressed` evento indica que o botão foi pressionado. Documentação / da API Guia / Amostra	Exemplo Código C# para esta página / Página XAML com code-behind
`SwipeView`	`SwipeView` é um controle de contêiner que encapsula um item de conteúdo e fornece itens de menu de contexto que são revelados por um gesto de passar o dedo. Cada item de menu é representado por um `SwipeItem`, que tem uma `Command` propriedade que executa um `ICommand` quando o item é tocado. Documentação / da API Guia / Amostra	Código C# para esta página / Página XAML com code-behind

Exibições para definir valores

Tipo	Descrição	Aparência
`CheckBox`	`CheckBox` permite que o usuário selecione um valor booliano usando um tipo de botão que pode ser verificado ou vazio. A `IsChecked` propriedade é o estado do `CheckBox`evento e é `CheckedChanged` acionado quando o estado é alterado. Documentação / da API Guia / Amostra	Exemplo de Caixa de Código C# para esta página / Página XAML
`Slider`	`Slider`permite que o usuário selecione um `double` valor de um intervalo contínuo especificado com o e `Maximum` as `Minimum` propriedades. Documentação / da API Guia / Amostra	Exemplo de de Código C# para esta página / Página XAML
`Stepper`	`Stepper`permite que o usuário selecione um `double` valor de um intervalo de valores incrementais especificados com o , `Maximum`e `Increment` as `Minimum`propriedades. Documentação / da API Guia / Amostra	Exemplo de exemplo a Código C# para esta página / Página XAML
`Switch`	`Switch` usa a forma de um comutador ativado/desativado para permitir que o usuário selecione um valor booliano. A `IsToggled` propriedade é o estado da opção e o `Toggled` evento é acionado quando o estado é alterado. Documentação / da API Guia / Amostra	de exemplo de Código C# para esta página / Página XAML
`DatePicker`	`DatePicker` permite que o usuário selecione uma data com o seletor de datas da plataforma. Defina um intervalo de datas permitidos com as propriedades e `MaximumDate` as `MinimumDate` propriedades. A `Date` propriedade é a data selecionada e o `DateSelected` evento é acionado quando essa propriedade é alterada. Documentação / da API Guia / Amostra	Exemplo de Código C# para esta página / Página XAML
`TimePicker`	`TimePicker` permite que o usuário selecione uma hora com o seletor de tempo da plataforma. A `Time` propriedade é a hora selecionada. Um aplicativo pode monitorar as alterações na `Time` propriedade instalando um manipulador para o `PropertyChanged` evento. Documentação / da API Guia / Amostra	Exemplo de Código C# para esta página / Página XAML

Exibições para edição de texto

Essas duas classes derivam da InputView classe, que define a Keyboard propriedade:

Tipo	Descrição	Aparência
`Entry`	`Entry` permite que o usuário insira e edite uma única linha de texto. O texto está disponível como a `Text` propriedade e os `TextChanged` eventos são `Completed` acionados quando o texto é alterado ou o usuário sinaliza a conclusão tocando na tecla enter. Use um `Editor` para inserir e editar várias linhas de texto. Documentação / da API Guia / Amostra	de de entrada Código C# para esta página / Página XAML
`Editor`	`Editor` permite que o usuário insira e edite várias linhas de texto. O texto está disponível como a `Text` propriedade e os `TextChanged` eventos são `Completed` acionados quando o texto é alterado ou o usuário sinaliza a conclusão. Use uma exibição `Entry` para inserir e editar uma única linha de texto. Documentação / da API Guia / Amostra	de editor de de exemplo editor Código C# para esta página / Página XAML

Exibições para indicar atividade

Tipo	Descrição	Aparência
`ActivityIndicator`	`ActivityIndicator` usa uma animação para mostrar que o aplicativo está envolvido em uma atividade longa sem dar qualquer indicação de progresso. A `IsRunning` propriedade controla a animação. Se o progresso da atividade for conhecido, use um `ProgressBar` em vez disso. Documentação / da API Guia / Amostra	Exemplo Código C# para esta página / Página XAML
`ProgressBar`	`ProgressBar` usa uma animação para mostrar que o aplicativo está progredindo por meio de uma atividade longa. Defina a `Progress` propriedade como valores entre 0 e 1 para indicar o progresso. Se o progresso da atividade não for conhecido, use um `ActivityIndicator` em vez disso. Documentação / da API Guia / Amostra	Código C# para esta página / Página XAML com code-behind

Exibições que mostram coleções

Tipo	Descrição	Aparência
`CarouselView`	`CarouselView` exibe uma lista rolável de itens de dados. Defina a `ItemsSource` propriedade como uma coleção de objetos e defina a `ItemTemplate` propriedade como um `DataTemplate` objeto que descreve como os itens devem ser formatados. O `CurrentItemChanged` evento sinaliza que o item exibido no momento foi alterado, o que está disponível como a `CurrentItem` propriedade. Guia / Amostra	Exemplo de exemplo Código C# para esta página / Página XAML
`CollectionView`	`CollectionView` exibe uma lista rolável de itens de dados selecionáveis, usando diferentes especificações de layout. Ele tem como objetivo fornecer uma alternativa mais flexível e performante para `ListView`. Defina a `ItemsSource` propriedade como uma coleção de objetos e defina a `ItemTemplate` propriedade como um `DataTemplate` objeto que descreve como os itens devem ser formatados. O `SelectionChanged` evento sinaliza que uma seleção foi feita, que está disponível como a `SelectedItem` propriedade. Guia / Amostra	Exemplo Código C# para esta página / Página XAML
`IndicatorView`	`IndicatorView` exibe indicadores que representam o número de itens em um `CarouselView`. Defina a `CarouselView.IndicatorView` propriedade como o `IndicatorView` objeto para exibir indicadores para o `CarouselView`. Documentação / da API Guia / Amostra	Exemplo de Código C# para esta página / Página XAML
`ListView`	`ListView` deriva e `ItemsView` exibe uma lista rolável de itens de dados selecionáveis. Defina a `ItemsSource` propriedade como uma coleção de objetos e defina a `ItemTemplate` propriedade como um `DataTemplate` objeto que descreve como os itens devem ser formatados. O `ItemSelected` evento sinaliza que uma seleção foi feita, que está disponível como a `SelectedItem` propriedade. Documentação / da API Guia / Amostra	Exemplo Código C# para esta página / Página XAML
`Picker`	`Picker` exibe um item selecionado de uma lista de cadeias de caracteres de texto e permite selecionar esse item quando o modo de exibição é tocado. Defina a `Items` propriedade como uma lista de cadeias de caracteres ou a `ItemsSource` propriedade para uma coleção de objetos. O `SelectedIndexChanged` evento é acionado quando um item é selecionado. A `Picker` lista de itens é exibida somente quando ela é selecionada. Use uma `ListView` ou `TableView` para uma lista rolável que permanece na página. Documentação / da API Guia	de de seletor de seletor Código C# para esta página / Página XAML com code-behind
`TableView`	`TableView` exibe uma lista de linhas de tipo `Cell` com cabeçalhos e subtítulos opcionais. Defina a `Root` propriedade como um objeto de tipo `TableRoot`e adicione `TableSection` objetos a isso `TableRoot`. Cada `TableSection` um deles é uma coleção de `Cell` objetos. Documentação / da API Guia / Amostra	Exemplo de Código C# para esta página / Página XAML