Wednesday 25 October 2017

XamarinForms SlidingPanel [Tutorial 27]

Step1:

//Set MainPage As Starting Page:
App.xaml.cs:


MainPage = new SliderPanel.MainPage();


Step2:

//Downlaod DKsliding Panel From Nuget
//Import Library inside MainPage.xaml


 xmlns:DK="clr-namespace:DK.SlidingPanel.Interface;assembly=DK.SlidingPanel.Interface"

// Create a Absolute Layout For Sliding Panel:
<AbsoluteLayout VerticalOptions="FillAndExpand" x:Name="Main">
        <StackLayout AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" x:Name="main" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
            <Image Source="img1.jpg" Aspect="AspectFill" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"></Image>

        </StackLayout>
        <StackLayout x:Name="body" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All"
   Orientation="Vertical" VerticalOptions="FillAndExpand" Spacing="0">
            <!--<StackLayout VerticalOptions="End" BackgroundColor="Red">
    <Label Text="Titulo" />
    
   </StackLayout>-->
            <StackLayout VerticalOptions="FillAndExpand">
                <Label Text="Slider-Example"  HorizontalOptions="Center" VerticalOptions="Center"/>
                <Image Source="img2.jpg" Aspect="AspectFill"></Image>
                <StackLayout.GestureRecognizers>
                    <TapGestureRecognizer Tapped="Handle_Tapped">
                    </TapGestureRecognizer>
                </StackLayout.GestureRecognizers>
            </StackLayout>
        </StackLayout>
    </AbsoluteLayout>

Step3: Now Give Handler event And Pass the object to Action Event:
 async void Handle_Tapped(object sender, System.EventArgs e)
        {
            var initialPosition = Main.Height;
            var currentPosition = body.Height;

            await body.TranslateTo(0, (initialPosition - currentPosition) * -1, 500, Easing.SinIn);
        }

        public MainPage()
  {
            InitializeComponent();

            body.TranslationY = Main.Height + 500;
        }

No comments:

Post a Comment