编写 Xamarin.Forms 应用程序的提示

Question

对不起，我的问题可能很愚蠢。 由于我是 Xamarin Forms 的新手，我需要一些基本提示：

我需要一个 window（“辅助窗口”）从左侧滑入我的主窗口 window。在这个 window 中，应该显示一个项目列表（带有图像和文本），这个 window 应该只覆盖我的 1/4 到 1/2主要 window。将一个项目从这个辅助 window 拖到主要 window 应该开始对主要 window 上的这个项目进行一些操作。

哪种类型的视图最适合此目的？要搜索的关键字是什么？ 这看起来像一个弹出菜单，但我如何从我的主菜单或单击按钮创建这样的视图？

我正在使用 C# 和 Visual Studio 2022

Answer 1

可能像这样，一个页面（ContentPage）在一个Grid中有一个Grid。

Grid MainContentGrid正在滑动， MenuContainer Grid 正在显示。

然后使用拖放将MenuContainer中的 Like Image 放在MainContentGrid中的 Drophhere Image 上，然后是一个事件。

MainContentGrid使用 TranslateTo 来回滑动。

https://learn.microsoft.com/en-us/xamarin/xamarin.forms/app-fundamentals/gestures/拖放

https://learn.microsoft.com/en-us/xamarin/xamarin.forms/user-interface/animation/simple

主页

<Grid>
    <!--  Menu Grid  -->

    <Grid x:Name="MenuContainer" BackgroundColor="Gray">

        <StackLayout
            Margin="24,100,0,0"
            HorizontalOptions="Start"
            Spacing="30">

            <Label
                FontSize="28"
                HorizontalOptions="Center"
                Text="MENU Options" />

            <Image
                HeightRequest="50"
                HorizontalOptions="Center"
                Source="imglike.png"
                VerticalOptions="Center"
                WidthRequest="50">
                <Image.Clip>
                    <EllipseGeometry
                        Center="25,25"
                        RadiusX="25"
                        RadiusY="25" />
                </Image.Clip>
                <Image.GestureRecognizers>
                    <DragGestureRecognizer />
                </Image.GestureRecognizers>
            </Image>

        </StackLayout>
    </Grid>
    <!--  Main Content  -->

    <Grid
        x:Name="MainContentGrid"
        Padding="24,5,24,0"
        BackgroundColor="Red"
        ColumnDefinitions="*,Auto"
        RowDefinitions="Auto,*">

        <!--  Header Text  -->
        <StackLayout
            Grid.Row="0"
            Grid.Column="1"
            Spacing="4"
            VerticalOptions="Center">

            <Label Text="Slide Menu" />

        </StackLayout>

        <!--  Hamburger Pic  -->
        <Frame
            Grid.Row="0"
            Grid.Column="0"
            BackgroundColor="Red"
            BorderColor="Gray"
            CornerRadius="28"
            HeightRequest="56"
            HorizontalOptions="Start"
            VerticalOptions="Center"
            WidthRequest="56">
            <Frame.GestureRecognizers>
                <TapGestureRecognizer Tapped="ProfilePic_Clicked" />
            </Frame.GestureRecognizers>

            <Image
                HeightRequest="50"
                HorizontalOptions="Center"
                Source="icnhamburger.png"
                VerticalOptions="Center"
                WidthRequest="50">
                <Image.Clip>
                    <EllipseGeometry
                        Center="25,25"
                        RadiusX="25"
                        RadiusY="25" />
                </Image.Clip>
            </Image>

        </Frame>

        <Frame
            Grid.Row="1"
            Grid.Column="0"
            BackgroundColor="Red"
            BorderColor="Gray"
            CornerRadius="28"
            HeightRequest="56"
            HorizontalOptions="Start"
            VerticalOptions="Center"
            WidthRequest="56">

            <Image
                Aspect="AspectFill"
                HeightRequest="50"
                HorizontalOptions="Center"
                Source="drop.png"
                VerticalOptions="Center"
                WidthRequest="50">
                <Image.GestureRecognizers>
                    <DropGestureRecognizer Drop="DropGestureRecognizer_Drop" />
                </Image.GestureRecognizers>
            </Image>
            
        </Frame>
    </Grid>
</Grid>

主页.cs

 public partial class MainPage : ContentPage
{
    private const uint AnimationDuration = 500u;
    public MainPage()
    {
        InitializeComponent();
    }
    private async Task CloseMenu()
    {
        //Close the menu and bring back back the main content
        _ = MainContentGrid.FadeTo(1, AnimationDuration);
        _ = MainContentGrid.ScaleTo(1, AnimationDuration);
        await MainContentGrid.TranslateTo(0, 0, AnimationDuration, Easing.CubicIn);
    }
    async void ProfilePic_Clicked(System.Object sender, System.EventArgs e)
    {
        // Reveal our menu and move the main content out of the view
       _ = MainContentGrid.TranslateTo(this.Width * 0.5, this.Height * 0, AnimationDuration, Easing.CubicIn);
        await MainContentGrid.ScaleTo(0.8, AnimationDuration);
        _ = MainContentGrid.FadeTo(0.8, AnimationDuration);
    }

    private async void DropGestureRecognizer_Drop(object sender, DropEventArgs e)
    {
        await CloseMenu();
        await DisplayAlert("Job", "I have a job for you to do !", "OK");
    }
}

这是它的样子