Xamarin跨平台开发：全局底部多级滑动抽屉菜单实现咨询

Hey Alex, great question! Let's walk through a practical, reusable solution for your multi-stage bottom-sheet drawer that will work across all your pages without repeating code. You were right to look at ControlTemplate—it's not just for static styling, it can absolutely handle interactive behaviors when paired with a base page class. Here's how to pull it off:

We'll build a reusable base page that integrates a ControlTemplate for the header and bottom drawer, then encapsulate all the swipe logic and multi-stage docking in the base class. This way, any page that inherits from this base will automatically get the drawer functionality, no duplicate code required.

Step 1: Create the ControlTemplate for Your Master Layout #

First, define the shared header, main content area, and bottom drawer in a ControlTemplate (add this to your App.xaml or a resource dictionary so it's accessible app-wide):

<ControlTemplate x:Key="BottomDrawerMasterTemplate">
    <Grid>
        <!-- Fixed Header -->
        <StackLayout HeightRequest="60" BackgroundColor="#2196F3" VerticalOptions="Start">
            <Label Text="App Header" TextColor="White" FontSize="Large" HorizontalOptions="Center" VerticalOptions="Center"/>
        </StackLayout>

        <!-- Main Page Content (dynamic per page) -->
        <ContentPresenter Margin="0,60,0,0" />

        <!-- Bottom Drawer with Multi-Stage Groups -->
        <Frame x:Name="BottomDrawer" 
               CornerRadius="15,15,0,0" 
               BackgroundColor="White"
               VerticalOptions="End">
            <StackLayout>
                <!-- Handle for Swiping -->
                <BoxView WidthRequest="40" HeightRequest="5" CornerRadius="3" BackgroundColor="#CCCCCC" HorizontalOptions="Center" Margin="0,10"/>

                <!-- Favorites Group -->
                <Label Text="收藏" FontSize="Medium" FontAttributes="Bold" Margin="10,10,0,5"/>
                <StackLayout Orientation="Horizontal" Spacing="10" Margin="10,0">
                    <Button Text="收藏1" WidthRequest="80"/>
                    <Button Text="收藏2" WidthRequest="80"/>
                    <Button Text="收藏3" WidthRequest="80"/>
                </StackLayout>

                <!-- Frequently Used Group -->
                <Label Text="常用" FontSize="Medium" FontAttributes="Bold" Margin="10,15,0,5"/>
                <StackLayout Orientation="Horizontal" Spacing="10" Margin="10,0">
                    <Button Text="常用1" WidthRequest="80"/>
                    <Button Text="常用2" WidthRequest="80"/>
                    <Button Text="常用3" WidthRequest="80"/>
                </StackLayout>
            </StackLayout>
        </Frame>
    </Grid>
</ControlTemplate>

Step 2: Build a Base Page Class for Drawer Logic #

Create a custom ContentPage subclass that loads the ControlTemplate and handles the swipe gestures, multi-stage docking, and animations. This is where all the interactive logic lives, so your other pages don't need to repeat it:

public class DrawerBasePage : ContentPage
{
    private Frame _bottomDrawer;
    private double _fullDrawerHeight;
    // Define your docking stages (adjust values based on your layout)
    private double _closedPosition;
    private double _stage1Position; // Shows only "Favorites" group
    private double _stage2Position; // Fully expanded (shows both groups)

    public DrawerBasePage()
    {
        // Load the shared template
        ControlTemplate = (ControlTemplate)Application.Current.Resources["BottomDrawerMasterTemplate"];
        Loaded += OnPageLoaded;
    }

    private void OnPageLoaded(object sender, EventArgs e)
    {
        _bottomDrawer = (Frame)GetTemplateChild("BottomDrawer");
        if (_bottomDrawer == null) return;

        // Add swipe gesture to the drawer
        var panGesture = new PanGestureRecognizer();
        panGesture.PanUpdated += OnDrawerSwiped;
        _bottomDrawer.GestureRecognizers.Add(panGesture);

        // Calculate docking positions once the drawer is laid out
        _bottomDrawer.SizeChanged += (s, args) =>
        {
            _fullDrawerHeight = _bottomDrawer.Height;
            _closedPosition = _fullDrawerHeight; // Drawer hidden off-screen
            _stage1Position = _fullDrawerHeight - 100; // Adjust to show only Favorites
            _stage2Position = 0; // Drawer fully visible

            // Start with drawer closed
            _bottomDrawer.TranslationY = _closedPosition;
        };
    }

    private void OnDrawerSwiped(object sender, PanUpdatedEventArgs e)
    {
        switch (e.StatusType)
        {
            case GestureStatus.Running:
                // Follow the user's finger, restrict movement to valid range
                var newTranslation = Math.Clamp(_bottomDrawer.TranslationY + e.TotalY, 0, _closedPosition);
                _bottomDrawer.TranslationY = newTranslation;
                break;
            case GestureStatus.Completed:
                // Snap to the nearest docking stage
                var currentPos = _bottomDrawer.TranslationY;
                if (currentPos > (_closedPosition + _stage1Position) / 2)
                {
                    AnimateDrawer(_closedPosition);
                }
                else if (currentPos > (_stage1Position + _stage2Position) / 2)
                {
                    AnimateDrawer(_stage1Position);
                }
                else
                {
                    AnimateDrawer(_stage2Position);
                }
                break;
        }
    }

    private void AnimateDrawer(double targetTranslation)
    {
        // Smooth animation for docking
        _bottomDrawer.TranslateTo(_bottomDrawer.TranslationX, targetTranslation, 250, Easing.CubicInOut);
    }
}

Step 3: Use the Base Page for All Your Content Pages #

Now any page that needs the drawer just inherits from DrawerBasePage—no extra drawer code needed! Here's an example:

<local:DrawerBasePage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourAppNamespace"
             x:Class="YourAppNamespace.HomePage">
    <!-- Your page's unique content goes here -->
    <StackLayout>
        <Label Text="Welcome to the Home Page!" FontSize="Large" HorizontalOptions="Center" VerticalOptions="CenterAndExpand"/>
        <Button Text="Test Button" HorizontalOptions="Center"/>
    </StackLayout>
</local:DrawerBasePage>

Bonus Optimizations #

• MVVM Support: Add bindable properties (like DrawerState) to the base page, so you can control the drawer from your viewmodels (e.g., a ToggleDrawerCommand).
• Mask Layer: Add a semi-transparent overlay behind the drawer that closes it when tapped—great for user experience.
• Dynamic Stages: Make the stage positions bindable, so different pages can customize how much of the drawer shows at each stage.

内容的提问来源于stack exchange，提问作者Alex