Skip to content

Latest commit

 

History

History
95 lines (76 loc) · 3.64 KB

readme.md

File metadata and controls

95 lines (76 loc) · 3.64 KB

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