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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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.
Juliano Custódio 
Very cool
CurtirCurtir
Thanks
CurtirCurtir