Sliding Panel – Xamarin.Forms

Olá, neste post irei demonstrar como você pode criar Sliding Panel em suas aplicações Xamarin.Forms.

Para este exemplo foi criado 4 Sliding Panel.

  • PageUp
  • PageRight
  • PageDown
  • PageLeft

A imagem a seguir demonstra como foi nomeado os Panels e os ícones utilizados no exemplo.

1

PageUp

Crie um AbsoluteLayout que irá aparecer ao carregar a página e um StackLayout chamado “PageUp” que será o Panel que irá deslizar de cima para baixo.
Observe que é capturado o GestureRecognizers das imagens utilizadas como ícone.

Xaml

Code-Behind

No inicializador da página, atribua -1000 para a propriedade TranslationY do panel criado anteriormente. Isso irá servir para carregar a página com ele escondido.
Crie os métodos UpWhite_Tapped e DownBlue_Tapped que serão chamados quando capturado os GestureRecognizers.

PageUp.TranslateTo servirá para realizar a transição do panel. Informe 0 nas coordenadas x e y para aparecer o panel e informe -Page.Height na coordenada y para esconder o panel.

Easing.SinIn é o efeito utilizado para a transição.

PageRight

Crie um AbsoluteLayout que irá aparecer ao carregar a página e um StackLayout chamado “PageRight” que será o Panel que irá deslizar da direita para a esquerda.
Observe que é capturado o GestureRecognizers das imagens utilizadas como ícone.

Xaml

Code-Behind

No inicializador da página, atribua 1000 para a propriedade TranslationX do panel criado anteriormente. Isso irá servir para carregar a página com ele escondido.
Crie os métodos LeftBlue_Tapped e RightWhite_Tapped que serão chamados quando capturado os GestureRecognizers.

PageRight.TranslateTo servirá para realizar a transição do panel. Informe 0 nas coordenadas x e y para aparecer o panel e informe Page.Width na coordenada x para esconder o panel.

Easing.SinIn é o efeito utilizado para a transição.

PageDown

Crie um AbsoluteLayout que irá aparecer ao carregar a página e um StackLayout chamado “PageDown” que será o Panel que irá deslizar de baixo para cima.
Observe que é capturado o GestureRecognizers das imagens utilizadas como ícone.

Xaml

Code-Behind

No inicializador da página, atribua 1000 para a propriedade TranslationY do panel criado anteriormente. Isso irá servir para carregar a página com ele escondido.
Crie os métodos UpBlue_Tapped e DownWhite_Tapped que serão chamados quando capturado os GestureRecognizers.

PageDown.TranslateTo servirá para realizar a transição do panel. Informe 0 nas coordenadas x e y para aparecer o panel e informe Page.Height na coordenada y para esconder o panel.

Easing.SinIn é o efeito utilizado para a transição.

PageLeft

Crie um AbsoluteLayout que irá aparecer ao carregar a página e um StackLayout chamado “PageLeft” que será o Panel que irá deslizar de baixo para cima.
Observe que é capturado o GestureRecognizers das imagens utilizadas como ícone.

Xaml

Code-Behind

No inicializador da página, atribua -1000 para a propriedade TranslationX do panel criado anteriormente. Isso irá servir para carregar a página com ele escondido.
Crie os métodos LeftWhite_Tapped e RightBlue_Tapped que serão chamados quando capturado os GestureRecognizers.

PageLeft.TranslateTo servirá para realizar a transição do panel. Informe 0 nas coordenadas x e y para aparecer o panel e informe -Page.Width na coordenada x para esconder o panel.

Easing.SinIn é o efeito utilizado para a transição.

 

 

Resultado

ezgif.com-gif-maker

 

Esse e todos os exemplos deste blog encontram-se disponíveis no GitHub.

icongithub

2 comentários em “Sliding Panel – Xamarin.Forms

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

w

Conectando a %s