How to create a structure that is above the NavigationView on the screen and opens upwards when dragged up(.Net Maui)

Question

I have a .Net Maui project and I want a structure that stands just above the NavigationView at the bottom, as in music applications such as Apple Music, and moves up simultaneously as I drag it upwards with my hand, but I couldn't find how to do it.

Apple Music

Animation

End

My App

So far, I have created this opening section with a page that opens upwards with a simple event trigger, but it does not follow my hand and does not look good. Is it possible to use bottom sheets? If possible, is it possible to launch it from just above the Navigation View instead of from the bottom of the page?

Some codes that I tried but did not work(Another Project): Bottom Bar:

<AbsoluteLayout>
    <BoxView Color="Teal"  HeightRequest="200"  x:Name="monster">
        <BoxView.GestureRecognizers>
            <PanGestureRecognizer PanUpdated="PanGestureRecognizer_PanUpdated" />

        </BoxView.GestureRecognizers>
    </BoxView>
</AbsoluteLayout>

Main Page:

 <cc:BottomPage HeightRequest="100" Grid.Row="1" toolkit:DockLayout.DockPosition="Bottom"/>

Although I tried, I was not successful. If you could give me more details, I would be very happy. — Salih Etka Akagündüz
– Salih Etka Akagündüz, Commented Dec 31, 2024 at 19:48
The boxview is the control you want to drag, and this testpage is the page to be displayed. Here you can drag your finger up and down the boxview. — liyu
– liyu, Commented Jan 2 at 9:16

liyu · Accepted Answer · 2024-12-27 09:12:58Z

0

Here is my solution.

-----update----- TestPage.xaml

<AbsoluteLayout>
               <BoxView Color="Teal"  HeightRequest="200" WidthRequest="200"  x:Name="monster">
    <BoxView.GestureRecognizers>
        <PanGestureRecognizer PanUpdated="OnPanUpdated" />

    </BoxView.GestureRecognizers>
</BoxView>
           </AbsoluteLayout>

TestPage.xaml.cs

 double tempx = 0;
 double tempy = 0; 
 void OnPanUpdated(object sender, PanUpdatedEventArgs e)
 {
     switch (e.StatusType)
     {
         case GestureStatus.Started:
             tempx = monster.TranslationX;
             tempy = monster.TranslationY;
             break;
         case GestureStatus.Running:
             monster.TranslationY = e.TotalY + tempy;
             break;
         case GestureStatus.Completed:
             tempy = monster.TranslationY;
             break;
     }
 }

edited Dec 27, 2024 at 9:12

answered Dec 17, 2024 at 9:57

liyu

2221 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Salih Etka Akagündüz Dec 18, 2024 at 20:28

Thank you, but that's not what I'm looking for. It has to go up simultaneously with my hand.

liyu Dec 19, 2024 at 5:56

@SalihEtkaAkagündüz I have updated my answer, please give it a try.For more information , please refer to PanGestureRecognizer.

Salih Etka Akagündüz Dec 26, 2024 at 17:36

Sorry for returning late. Yes, it goes up as I want, but it can only go up to the height of the structure (100 px), I want it to cover the entire screen.

liyu Dec 27, 2024 at 9:13

I have updated the answer, and it worked. Please give it a try.@SalihEtkaAkagündüz

Salih Etka Akagündüz Dec 28, 2024 at 11:10

I opened another project and did what you said, but I guess it didn't work. When I used the structure you mentioned, it covered the entire page, so I added HeightRequest="100" expression to the structure on the Main Page, but BoxView does not appear and OnPanUpdated does not trigger. Thank you very much for your help.

Collectives™ on Stack Overflow

How to create a structure that is above the NavigationView on the screen and opens upwards when dragged up(.Net Maui)

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related