dw2kim / slidingpanel

Sliding Panel for Xamarin Forms

Sliding Panel for Xamarin Forms

Xamarin.Forms library that allows you to have for Google-Map-Like sliding panel from bottom of the screen. Supports only Xamarin.Forms.

NuGet

Features

Support Platforms

Xamarin.Forms Only**

Setup

• First, simply reference the nuget package in your Xamrin.Forms projects.
• Second, initialize SlidingUpPanel instance either in Xaml or C#.
• Lastly, apply the SlidingPanelConfig for your customizations.

Screenshots

• Hide Panel:
  

• Show Collapsed Panel:
  

• Show Expaneded Panel:
  

#### XAML ```xml

<DK:SlidingUpPanel x:Name="spTest">
    <DK:SlidingUpPanel.MainView>
        <StackLayout Orientation="Horizontal" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
            <maps:Map x:Name="GoogleMapInstance"></maps:Map>
        </StackLayout>
    </DK:SlidingUpPanel.MainView>

    <DK:SlidingUpPanel.PanelRatio>0.6</DK:SlidingUpPanel.PanelRatio>
    <DK:SlidingUpPanel.HideNavBar>True</DK:SlidingUpPanel.HideNavBar>

    <DK:SlidingUpPanel.HeaderLeftButton>
        <Image HeightRequest="48" WidthRequest="48" Source="{Binding BackButtonImage}">
            <Image.GestureRecognizers>
                <TapGestureRecognizer Tapped="BackButtonTapGesture_Tapped"></TapGestureRecognizer>
            </Image.GestureRecognizers>
        </Image>
    </DK:SlidingUpPanel.HeaderLeftButton>
    <DK:SlidingUpPanel.PictureView>
        <Image BackgroundColor="White" HorizontalOptions="StartAndExpand" VerticalOptions="StartAndExpand" Aspect="AspectFill" Source="{Binding HondaImage}"></Image>
    </DK:SlidingUpPanel.PictureView>

    <DK:SlidingUpPanel.TitleView>
        <StackLayout Orientation="Vertical" HeightRequest="80" BackgroundColor="Green">
            <Label Text="Title1"></Label>
            <Label Text="Title2"></Label>
        </StackLayout>
    </DK:SlidingUpPanel.TitleView>
    <DK:SlidingUpPanel.BodyView>
        <StackLayout BackgroundColor="Blue">
            <Label Text="Test Body y"></Label>
        </StackLayout>
    </DK:SlidingUpPanel.BodyView>
</DK:SlidingUpPanel>

```

C# - Codebehind

    protected override void OnBindingContextChanged()
    {
        base.OnBindingContextChanged();

        SlidingPanelConfig config = new SlidingPanelConfig();
        config.MainStackLayout = mainStackLayout;

        StackLayout titleStackLayout = new StackLayout();
        titleStackLayout.Children.Add(new Label { Text = "Test Title x" });
        config.TitleStackLayout = titleStackLayout;
        config.TitleBackgroundColor = Color.Green;

        spTest.ApplyConfig(config);
    }

Other Docs

• Source Code