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

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:DemoSlidingPanel"
x:Class="DemoSlidingPanel.MainPage">
<AbsoluteLayout VerticalOptions="FillAndExpand" x:Name="Page">
<StackLayout AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" BackgroundColor="White">
<Image Source="DownBlue.png" HorizontalOptions="CenterAndExpand" VerticalOptions="StartAndExpand" >
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="DownBlue_Tapped"/>
<PanGestureRecognizer PanUpdated="DownBlue_Tapped" />
</Image.GestureRecognizers>
</Image>
</StackLayout>
<StackLayout x:Name="PageUp" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All"
Orientation="Vertical" VerticalOptions="FillAndExpand" Spacing="0">
<StackLayout VerticalOptions="FillAndExpand" BackgroundColor="#006df0">
<Image Source="UpWhite.png" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand" >
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="UpWhite_Tapped"/>
<PanGestureRecognizer PanUpdated="UpWhite_Tapped" />
</Image.GestureRecognizers>
</Image>
</StackLayout>
</StackLayout>
</AbsoluteLayout>
</ContentPage>

view raw
MainPageUp.xaml
hosted with ❤ by GitHub

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.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
namespace DemoSlidingPanel
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
PageUp.TranslationY = 1000;
}
async void UpWhite_Tapped(object sender, System.EventArgs e)
{
await PageUp.TranslateTo(0, Page.Height, 500, Easing.SinIn);
}
async void DownBlue_Tapped(object sender, System.EventArgs e)
{
await PageUp.TranslateTo(0, 0, 500, Easing.SinIn);
}
}
}

view raw
MainPageUp.xaml.cs
hosted with ❤ by GitHub

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

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:DemoSlidingPanel"
x:Class="DemoSlidingPanel.MainPage">
<AbsoluteLayout VerticalOptions="FillAndExpand" x:Name="Page">
<StackLayout AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" BackgroundColor="White">
<Image Source="LeftBlue.png" HorizontalOptions="EndAndExpand" VerticalOptions="CenterAndExpand" >
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="LeftBlue_Tapped"/>
<PanGestureRecognizer PanUpdated="LeftBlue_Tapped" />
</Image.GestureRecognizers>
</Image>
</StackLayout>
<StackLayout x:Name="PageRight" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All"
Orientation="Vertical" VerticalOptions="FillAndExpand" Spacing="0">
<StackLayout VerticalOptions="FillAndExpand" BackgroundColor="#006df0">
<Image Source="RightWhite.png" HorizontalOptions="StartAndExpand" VerticalOptions="CenterAndExpand" >
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="RightWhite_Tapped"/>
<PanGestureRecognizer PanUpdated="RightWhite_Tapped" />
</Image.GestureRecognizers>
</Image>
</StackLayout>
</StackLayout>
</AbsoluteLayout>
</ContentPage>

view raw
MainPageRight.xaml
hosted with ❤ by GitHub

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.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
namespace DemoSlidingPanel
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
PageRight.TranslationX = 1000;
}
async void LeftBlue_Tapped(object sender, System.EventArgs e)
{
await PageRight.TranslateTo(0, 0, 500, Easing.SinIn);
}
async void RightWhite_Tapped(object sender, System.EventArgs e)
{
await PageRight.TranslateTo(Page.Width, 0, 500, Easing.SinIn);
}
}
}

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

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:DemoSlidingPanel"
x:Class="DemoSlidingPanel.MainPage">
<AbsoluteLayout VerticalOptions="FillAndExpand" x:Name="Page">
<StackLayout AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" BackgroundColor="White">
<Image Source="UpBlue.png" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand" >
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="UpBlue_Tapped"/>
<PanGestureRecognizer PanUpdated="UpBlue_Tapped" />
</Image.GestureRecognizers>
</Image>
</StackLayout>
<StackLayout x:Name="PageDown" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All"
Orientation="Vertical" VerticalOptions="FillAndExpand" Spacing="0">
<StackLayout VerticalOptions="FillAndExpand" BackgroundColor="#006df0">
<Image Source="DownWhite.png" HorizontalOptions="CenterAndExpand" VerticalOptions="StartAndExpand" >
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="DownWhite_Tapped"/>
<PanGestureRecognizer PanUpdated="DownWhite_Tapped" />
</Image.GestureRecognizers>
</Image>
</StackLayout>
</StackLayout>
</AbsoluteLayout>
</ContentPage>

view raw
MainPageDown.xaml
hosted with ❤ by GitHub

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.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
namespace DemoSlidingPanel
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
PageDown.TranslationY = 1000;
}
async void UpBlue_Tapped(object sender, System.EventArgs e)
{
await PageDown.TranslateTo(0, 0, 500, Easing.SinIn);
}
async void DownWhite_Tapped(object sender, System.EventArgs e)
{
await PageDown.TranslateTo(0, Page.Height, 500, Easing.SinIn);
}
}
}

view raw
MainPageDown.xaml.cs
hosted with ❤ by GitHub

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

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:DemoSlidingPanel"
x:Class="DemoSlidingPanel.MainPage">
<AbsoluteLayout VerticalOptions="FillAndExpand" x:Name="Page">
<StackLayout AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" BackgroundColor="White">
<Image Source="LeftBlue.png" HorizontalOptions="EndAndExpand" VerticalOptions="CenterAndExpand" >
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="LeftBlue_Tapped"/>
<PanGestureRecognizer PanUpdated="LeftBlue_Tapped" />
</Image.GestureRecognizers>
</Image>
</StackLayout>
<StackLayout x:Name="PageLeft" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All"
Orientation="Vertical" VerticalOptions="FillAndExpand" Spacing="0">
<StackLayout VerticalOptions="FillAndExpand" BackgroundColor="#006df0">
<Image Source="LeftWhite.png" HorizontalOptions="EndAndExpand" VerticalOptions="CenterAndExpand" >
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="LeftWhite_Tapped"/>
<PanGestureRecognizer PanUpdated="LeftWhite_Tapped" />
</Image.GestureRecognizers>
</Image>
</StackLayout>
</StackLayout>
</AbsoluteLayout>
</ContentPage>

view raw
MainPageLeft.xaml
hosted with ❤ by GitHub

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.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
namespace DemoSlidingPanel
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
PageLeft.TranslationX = 1000;
}
async void LeftWhite_Tapped(object sender, System.EventArgs e)
{
await PageLeft.TranslateTo(Page.Width, 0, 500, Easing.SinIn);
}
async void RightBlue_Tapped(object sender, System.EventArgs e)
{
await PageLeft.TranslateTo(0, 0, 500, Easing.SinIn);
}
}
}

view raw
MainPageLeft.xaml.cs
hosted with ❤ by GitHub

 

 

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 )

Conectando a %s