Skip to content

dw2kim/slidingpanel

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

78 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

Sliding Panel for Xamarin Forms

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages