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

relj7zay  于 2023-01-31  发布在  其他
关注(0)|答案(1)|浏览(176)

很抱歉我的问题可能很愚蠢。由于我是Xamarin Forms的新手,我需要一些基本的提示:
我需要一个窗口(“辅助窗口”)从左滑动到我的主窗口。在这个窗口中,项目列表(与图像和文本)应该显示,这个窗口应该只覆盖我的主窗口的1/4到1/2。拖动一个项目从这个辅助窗口到主窗口应该开始与主窗口上的这个项目的一些行动。
哪种类型的视图最适合这个目的?要搜索的关键字是什么?这看起来像一个弹出菜单,但我如何从主菜单或单击按钮创建这样的视图?
我正在使用C#和Visual Studio 2022

esyap4oy

esyap4oy1#

也许就像这样,一个页面(ContentPage)中有一个网格。
网格MainContentGrid正在滑动,MenuContainer网格正在显示。
然后使用拖放将MenuContainer中的Like图像放在MainContentGrid中的Drophere图像上,然后是一个事件。
MainContentGrid正在使用TranslateTo进行滑动。
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/gestures/drag-and-drop
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>

MainPage.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");
    }
}

看起来是这样的

相关问题