Giter Club home page Giter Club logo

slidingpanel's Introduction

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:
    alt HidePanel

  • Show Collapsed Panel:
    alt ShowCollapsedPanel

  • Show Expaneded Panel:
    alt ShowExpandedPanel

#### 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

slidingpanel's People

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.