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