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.
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> |
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); | |
} | |
} | |
} |
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> |
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> |
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); | |
} | |
} | |
} |
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> |
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); | |
} | |
} | |
} |
Resultado
Esse e todos os exemplos deste blog encontram-se disponíveis no GitHub.
Very cool
CurtirCurtir
Thanks
CurtirCurtir