xamarin.forms - How to create a hideable bottom view

Question

I've developed a Xamarin.Forms.Shell app containing 4 tabs.

I would like to add a basic audio player allowing to play music from a streaming source.

But I'm looking to the best way to manage it:

• I don't want to display it in a dedicated page, as I don't get the metadata of the audio (no album photo, no title, no author, ...) and there are no "Play Next" or "Play Previous" features
• I would like to display a basic view appearing at the bottom and above of the main page, containing 3 buttons (play or pause/stop/close) and the name of the radio

I would like to do something like this:

But I don't know what is the better approach to achieve this:

• use a Drawer like SimpleBottomDrawer
• use a Slide like SlideOverKit
• use a Sheet like BottomSheet

All of these solution seem too complicated for my needs.

Is there another approach?

question from:https://stackoverflow.com/questions/66064122/how-to-create-a-hideable-bottom-view

Answer 1

Here is the solution I've implemented.

By default, I display a Floating Action Button, that will show the radio player control panel.

In this panel, I have the "play"/"stop" controls, the radio title, and a "close" button to hide the panel.

The radio player control panel is hidden by default by applying a TranslationY

The XAML looks like this:

<Grid>
    <!-- FloatingActionButton -->
    <yummy:PancakeView x:Name="RadioFab"
                CornerRadius="28"                       
                Padding="16"
                BackgroundColor="{StaticResource AccentColor}"
                VerticalOptions="End"
                HorizontalOptions="End"
                Margin="25">
        <yummy:PancakeView.Shadow>
            <yummy:DropShadow Offset="1,2"
                              Color="{StaticResource Gray-Black}"
                              BlurRadius="2"
                              Opacity="0.2"/>
        </yummy:PancakeView.Shadow>
        <Image HeightRequest="24" WidthRequest="24">
            <Image.Source ... />
        </Image>
        <yummy:PancakeView.GestureRecognizers>
            <TapGestureRecognizer Tapped="RadioFab_Clicked" />
        </yummy:PancakeView.GestureRecognizers>
    </yummy:PancakeView>
    <!-- Radio player view
    <yummy:PancakeView x:Name="RadioPlayerView"
                       VerticalOptions="End"
                       HeightRequest="56"
                       BackgroundColor="{StaticResource Gray-400}"
                       Opacity="0.9"
                       TranslationY="56"
                       IsVisible="True">
       <!-- content ... -->
    </yummy:PancakeView>
<Grid>

When the Floating Action Button is clicked, I call the TranslateTo() method, allowing me to display the panel, and to get the expected behaviour.

The code-behind looks like this:

private void RadioFab_Clicked(object sender, EventArgs e)
{
    this.RadioFab.ScaleTo(0, easing: Easing.Linear);
    this.RadioPlayerView.TranslateTo(0, 0, 300);
}

void Player_CloseButton_Clicked(System.Object sender, System.EventArgs e)
{
    this.RadioPlayerView.TranslateTo(0, 56, 300);
    this.RadioFab.ScaleTo(1, easing: Easing.SpringOut);
}