xamarin-forms-contentpage

Xamarin.Forms – ContentPage

Fala galera, tudo bem?

Seguindo a série sobre os tipos de Page, falaremos hoje sobre o tipo ContentPage.

A ContentPage é uma um tipo de Page com o objetivo de apresentar uma simples View.

Esta View pode ser um Label, um StackLayout, entre outros.

A propriedade mais importante do ContentPage é a Content, onde você define um elemento de View que define o conteúdo da page.

Observe o código abaixo:

public App ()
{
	MainPage = new ContentPage {
		Content = new StackLayout {
			VerticalOptions = LayoutOptions.Center,
			Padding = new Thickness(0, 10, 0, 10), 
			Children = {						
				new Label {
					XAlign = TextAlignment.Center,
					Text = "Bem vindo ao exemplo de ContentPage"
				},
				new Button {
					Text= "Exemplo de botão"
				}
			}
		}
	};
}

Das linhas 4 à 16, estamos definindo o nosso Layout para um objeto ContentPage. Para isso, setamos a propriedade Content com um objeto StackLayout e neste definimos um Label e um Button; Após executar a aplicação temos a seguinte visualização:

Exemplo de ContentPage
Exemplo de ContentPage

Como observado na imagem acima, nossos componentes estão organizados de acordo com as definições do StackLayout, mas é apresentada uma tela simples. Esta poderia ser uma tela de Login, um formulário para entrada de dados do usuário, uma exibição de imagem, etc. É interessante observar que toda a tela foi definida em código e portanto, caso hajam maiores interações, estas deverão ser configuradas no código, criando uma definição extensa da classe para definição de uma View, já que todas as propriedades dos objetos serão definidas “manualmente”. Uma outra forma de trabalhar com a ContentPage é criando um arquivo XAML. Esta abordagem traz benefícios, entre eles a separação do “Design” e da Lógica de Negócio ou Código. Verifique abaixo o código da nossa nova ContentPage criada com o XAML:

public App ()
	{
		MainPage = new PaginaInicial ();
	}
<?xml version="1.0" encoding="UTF-8"?>

	
		
			
			
		
	

public partial class PaginaInicial : ContentPage
{
	public PaginaInicial ()
	{
		InitializeComponent ();
	}
	
	public async void btnExemplo_clicked(object sender, EventArgs e)
	{
		await DisplayAlert("Clicou", "Clicou no botão", "OK");
	}
}

Como podemos observar, existem 2 arquivos para a ContentPage PaginaInicial – xaml e xaml.cs. O arquivo xaml contém o xml de definição do Layout. Por isso temos a mesma configuração do layout anterior, porém com alguns acréscimos, como a definição da cor de background do botão e o evento clique. Na linha 4, temos a propriedade x:Class que define qual classe C# está vinculada ao nosso xaml. O arquivo xaml.cs é o arquivo que irá conter a nossa lógica de negócio, como por exemplo, o método de definição do clique do botão. Em nosso exemplo, temos definido a partir das linhas 8 à 11 um método do botão da nossa tela que enviará um alert. Veja como ficou nossa tela:

Exemplo ContentPage Xaml
Exemplo ContentPage Xaml
Exemplo ContentPage Xaml Alert
Exemplo ContentPage Xaml Alert

O arquivo App_alterado.cs demonstra a alteração feita em nossa classe principal determinando a propriedade MainPage com uma intância da ContentPage PaginaInicial criada a partir do Xaml.

Como observamos, trabalhar com o ContentPage é muito simples. É a Page mais simples do Xamarin Forms. Espero que tenham gostado e aguardem os próximos posts.

Abraço!

Xamarin.Forms – ContentPage
5 (100%) 1 voto

Albert Tanure

Arquiteto de Software com atuação na área de desenvolvimento a 10 anos. Gosto muito de desenvolver, aprender, gadgets e tenho grande disposição para ensinar e compartilhar conhecimento. Atuante na comunidade Xamarin como XSP e comunidade Microsoft como MTAC.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

%d blogueiros gostam disto: